jQuery: événement ajax

Question

OK ici est mon code

$("#content_Div").ajaxStart(function() { 
    $(this).css('cursor', 'wait') 
}).ajaxComplete(function() { 
    $(this).css('cursor', 'default') 
}); 

c'est un problème assez simple: sur ajaxStart le curseur change immédiatement à la (attente) Hourglass mais ajaxComplete il ne marche pas revenir à defalut jusqu'à ce que vous déplacez la souris. Lol dat était mon problème mais pendant que j'écrivais ceci j'ai réalisé après ajaxComplete si vous cliquez sur il va revenir à défaut, donc la seule raison pour laquelle le curseur change immédiatement sur ajaxStart est parce que vous devez double-cliquer sur un élément dans le content_Div afin de démarrer la requête de sorte que l'événement click est wat change le curseur après le début de l'événement ajaxStart. donc ce que je veux, c'est un moyen de passer au curseur sans avoir à le déplacer ou cliquer à nouveau.

évidemment je veux utiliser le curseur pour informer l'utilisateur lorsque la demande est terminée.

merci à l'avance

pour Thomas:

function DF() { //Deletes selected File 
if (selectedfiles.length == 0) { 
    alert("No file slected!"); 
    return 
}; 
var selectedtxt = (selectedfiles.length == 1) ? "'" + basename(selectedfiles[0]) + "'?" : 'these ' + selectedfiles.length + ' files?'; 
if (confirm("Are you sure you want to delete " + selectedtxt)) { 
    $.each(selectedfiles, function() { 
     $.post("server/editfile.php", { 
      user: user, 
      oper: "del", 
      path: "../" + this 
     }, function (res) { 
      if (res) { 
       alert(res); 
      } 
      else LT(dirHistory[current]); 
     }); 
    }) 
} 

}

Answer 1

OK Son été environ 5 heures depuis que je posté cette question et personne n'a même fait une tentative de répondre encore. Donc, je vais juste poster ce que j'ai trouvé.

Il s'agit d'un bogue Google Chrome et Safari. chromium

Dans tous les autres navigateurs, vous pouvez modifier dynamiquement le curseur de la souris sans que l'utilisateur doive cliquer ou déplacer la souris.

sorcière a vaincu ce que j'essayais de faire. informer l'utilisateur lorsque la demande a été faite, si l'utilisateur y prend la main et attend que le curseur change, ils attendent toute la journée et toute la nuit ou jusqu'à ce qu'ils essaient de partir car ils ont appris que ma page était gelée. il n'y a pas de correctif, car si vous cochez le lien ci-dessus, le bug n'est toujours pas confirmé. je l'ai trouvé aucun travail autour soit donc ce que je l'ai fait

$("#content_Div").ajaxStart(function() { 
    if(!$.browser.safari)//ignores ajaxStart if browser is safari or chrome 
    $(this).css('cursor', 'wait') 
}).ajaxComplete(function() { 
    $(this).css('cursor', 'default') 
}); 

Answer 2

Il ne semble que l'utilisateur doit déplacer le curseur avant qu'il change, mais en plus de cela, il y a un autre problème. Si l'utilisateur supprime le curseur du #content_Div, il ne peut pas voir si les données sont en cours de chargement ou non, puisque le CSS ne s'applique que lorsqu'il survole un DIV particulier.

Une méthode qui montrerait clairement que les données sont récupérées, indépendamment de ce que fait l'utilisateur, consiste à utiliser un gif animé, un lettrage «Chargement ...» ou les deux. Cette solution est aussi un peu moins intrusive que de changer le curseur de l'utilisateur.

Si, lorsque des données sont demandées, vous ajoutez une image de chargement au div où les données seront affichées, cette image de chargement disparaîtra naturellement une fois les données chargées. Par exemple:

$("#content_Div").ajaxStart(function() { 
    $("#content_Div").append('<img src="loading.gif" />'); 
}); 

Dans ce cas, ajaxStop n'est pas nécessaire, car les données chargées remplacent l'image.

Here is a jsFiddle example that makes use of both an image and lettering.

jsFiddle with multiple buttons and a loading div at the center of the page.

Answer 3

Je préférerais le faire avec plus d'élégance comme ceci:

$(function(){ 
    $("html").bind("ajaxStart", function(){ 
    $(this).addClass('busy'); 
    }).bind("ajaxStop", function(){ 
    $(this).removeClass('busy'); 
    }); 
}); 

CSS:

html.busy, html.busy * { 
    cursor: wait !important; 
} 

Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/