ajaxstart avec dialog et IE (exemple video inclus)

Version imprimable

bonjour,

J'ai un souci avec Internet Explorer, tout fonctionne sur les autres navigateurs.
Code:

1 2 3 4 5 6 7 8 9 jQuery(document).ajaxStart(function () { $("#DIV_LOADING").dialog({ resizable: false, width: 100, height: 150, draggable: false }); }); jQuery(document).ajaxStop(function () { alert("fermer"); //$("#DIV_LOADING").dialog("close"); });
Lors d'une requête ajax, j'ouvre une popup dialog avec une petite image animée.

Sous IE, ma popup ne s'affiche qu'au moment ou je passe dans la fonction ajaxStop.. pourquoi ? alors qu'elle devrait s'ouvrir dans l'ajaxStart, comme avec les autres navigateurs....

Merci d'avance

22/12/2011, 12h01
Dark Ryus

On dirait que le comportement d'internet explorer est différent des autres, et qu'il attend la fin de l'ajax pour afficher la popup. Comme si le javascript n'avait pas d'effet sur l'affichage en direct, mais que tout se fait d'un coup à la fin...

Je viens de découvrir qu'en mettant une alert classique dans ajaxstart, cela fonctionne bien, alors qu'une popup dialog ne s'affiche pas tout de suite ....

une idée ?

Hello,

ce que tu veux c'est mettre, par exemple, une espèce de loader dans une popup lorsque tu fais une requête AJAX c'est bien ça ?

Si c'est bien le cas, je vois déjà un très gros problème... Tu instancie à chaque requête une nouvelle popup
Code:

1 2 3 4 5 //ICI LE PROBLEME jQuery(document).ajaxStart(function () { $("#DIV_LOADING").dialog({ resizable: false, width: 100, height: 150, draggable: false }); });
Donc ce qu'il faudrait que tu fasses c'est plutôt quelque chose dans ce genre la :
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready( function(){ //Tu instancie ta div $("#DIV_LOADING").dialog({ resizable: false, width: 100, height: 150, draggable: false, autoOpen:false }); //ICI TU FAIS TON AJAX START ET AJAX STOP $('#DIV_LOADING').ajaxStart(function(){$(this).dialog('open');}); $('#DIV_LOADING').ajaxStop(function(){$(this).dialog('close');}); } );
J'espère que ça t'aide ?

23/12/2011, 11h53
Dark Ryus
En fait je m'aperçois que le problème ne vient pas de JQuery, mai plutôt du navigateur. Mon truc ne marche que sur Firefox.

J'ai testé en mettant une simple div avec un background rouge sur toute la page.

Avec firefox pas de problème, mon site devient tout rouge pendant la requête ajax assez longue. La div apparait dès le début de l'ajax.

Mais avec les autre navigateurs, on dirait que tout le js est exécuté d'un coup à la fin de l'affichage sur la page, du coup bah ma div rouge n'apparait que si je met un alert à la fin de ma fonction ajaxStart.

Je vous met un exemple en video:
http://www.youtube.com/watch?v=ejhAl...ature=youtu.be

Première recherche sur firefox, la div rouge apparait aus début de l'ajax, puis se retire à la fin.
Deuxième recherche sur IE, la div n'apparait pas car elle est retiré aussitôt, l js est exécuté tout d'un coup.
Troisième recherche, avec un alert, la div apparait bien et disparait après.

code js :
Code:

1 2 3 4 5 6 7 8 jQuery(document).ajaxStart(function () { $("#DIV_CACHE_MOI_TOUT").show(); //alert("stop"); }); jQuery(document).ajaxStop(function () { $("#DIV_CACHE_MOI_TOUT").hide(); });
23/12/2011, 12h37
tidus_6_9_2

Alors ton code fonctionne et devrait bien fonctionner d'après moi.

Tu pourrais me montrer la requête que tu fais avec JQuery ?

ça fonctionne bien mais que su firefox ^^

J'ai le problème sur toute mes requêtes ajax

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
function rechercherProduits(action, pagination) {
    if ($('#TXT_PRIX_MIN').val() != "" && $('#TXT_PRIX_MAX').val() != "") {
        if ($('#TXT_PRIX_MIN').val() > $('#TXT_PRIX_MAX').val()) {
            popupAlert(messageTestPrix);
            return;
        }
    }
 
    var str = $("#FRM_RECHERCHE").serialize();
    pageActuelle = pagination;
    $("#DIV_LISTE_PROD").empty();
    // Utilisation du framework JQuery pour l'ajax
    $.ajax({
        async: false,
        type: "POST",
        dataType: "html",
        url: "/Boutique/ListeProduits",
        data: str + "&action=" + action + "&pagination=" + pagination,
        success: function (data) {
            $("#DIV_LISTE_PROD").empty();
            $("#DIV_LISTE_PROD").append(data);
        },
        error: function (request) {
            document.location.href = "/Erreurs";
        }
    });
}

A mon avis ton traitement est trop "rapide" pour IE (donc la requête), et de ce fait IE l'affiche et masque droit derrière ta div en rouge.

Pour tester si c'est bien ça tu fais juste un alert après ton .append dans ta requête, comme suite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$.ajax({
        async: false,
        type: "POST",
        dataType: "html",
        url: "/Boutique/ListeProduits",
        data: str + "&action=" + action + "&pagination=" + pagination,
        success: function (data) {
            $("#DIV_LISTE_PROD").empty();
            $("#DIV_LISTE_PROD").append(data);
            alert('x');
        },
        error: function (request) {
            document.location.href = "/Erreurs";
        }
    });

Redis moi ce qui se passe après ça ^^

23/12/2011, 14h27
Dark Ryus

Cela ne change rien, cela fonctionne toujours pareil, la div apparait à la fin de l'ajax et non à son lancement ...

Ecoutes je ne vois pas vraiment la raison du dysfonctionnement...

Tu es sûr d'avoir mis le code ajaxStart et ajaxStop dans le document ready ?
Code:

1 2 3 4 5 6 7 $(document).ready( function(){ $('#DIV_LOADING').ajaxStart(function(){$(this).dialog('open');}); $('#DIV_LOADING').ajaxStop(function(){$(this).dialog('close');}); } );
As-tu exactement la même chose ?

Ensuite, es-ce que tu as définit une width ET une height à ta DIV ?

23/12/2011, 15h47
Dark Ryus

TROUVEEEEEEEEEEEEEEE !!!!

J'ai changé l'option de l'appel ajax async:true, ce qui est logique.

ça marche !

Des heures de galère résolues.

Merci pour le coup de main.
23/12/2011, 16h06
tidus_6_9_2

Arf me suis pas rendus compte du async:false, :aie: :aie: :aie:

C'est sûr que si tu fais AjaxStart et AjaxStop c'est censé être de l'AJAX, XD pas une requête javascript synchrone XD

Bien joué en tout cas :ccool:

A bientôt