IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Rafraichissement d'une page pendant l'exécution d'un script Javascript


Sujet :

AJAX

  1. #1
    Membre habitué Avatar de MGD_Software
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 137
    Points : 139
    Points
    139
    Par défaut [AJAX] Rafraichissement d'une page pendant l'exécution d'un script Javascript
    Bonjour,

    Dans un page, j'utilise des requêtes AJAX en cascade pour vérifier, réparer et optimiser toutes les tables d'une base de données MySql (requêtes SHOW TABLES, CHECK TABLES, REPAIR TABLE et OPTIMIZE TABLE). La durée du script est assez longue, car il y a pas mal de tables et chaque requête de ce type prend un certains temps au serveur.

    Les requêtes AJAX sont effectuées en mode synchrone. Je sais que ce n'est pas l'idéal, mais c'est nécessaire pour pouvoir afficher les résultats dans l'ordre. J'ai testé en asynchrone, toutes les requêtes partent en même temps, et les OPTIMIZE se font parfois pendant le REPAIR de la même table, ce qui n'est pas top.

    Au fur et à mesure du retour des requêtes, j'affiche le résultat des requêtes sur la page, et je fait avancer un curseur proportionnel au nombre de tables vérifiées.
    Cela est fait avec des instructions du type $('#result').html(zz) pour le texte et $('#moncurseur').width(nn) pour le curseur.

    Sur Firefox, tout va très bien, les résultats s'affichent en cadence, le curseur avance génialement

    Mais sur Internet Explorer (exploseur) rien ne se passe tant que toutes les requêtes ne sont pas terminées. La page est bloquée et tout s'affiche brutalement à la fin du script

    Je cherche donc un moyen de forcer l'affichage d'un texte évolutif PENDANT un script, et non pas le texte entier à la fin du script, et qui marche sur tous les navigateurs (Encore merci M. Microsoft !).

    J'ai bien sûr déjà cherché dans la FAQ et sur les moteurs de recherche, mais avec les mots clés "rafraichir", "affichage" et/ou "script", etc. je n'ai trouvé que des rafraichissements complets de page et rien qui résolve mon problème.
    Merci de vos conseils

  2. #2
    Membre confirmé Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Points : 566
    Points
    566
    Par défaut
    Bjr, peut être un peu de code stp

    ++
    "Aucun de nous ne sait ce que nous savons tous, ensemble."
    Lien vers mon appli Funcash n'hésitez pas à donner votre avis

  3. #3
    Membre habitué Avatar de MGD_Software
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 137
    Points : 139
    Points
    139
    Par défaut Rafraichissement d'une page pendant l'exécution d'un script Javascript
    Voici un extrait du code. Ça va bien remplir le forum et je ne suis pas sûr que cela serve à grand-chose, mais bon...

    Environnement:
    #result est une table à une ligne et 2 colonnes que l'on remplit alternativement pour prendre moins de place en hauteur. Nota: j'ai essayé aussi avec un simple <div>, le comportement est exactement le même
    #curseur_ext et #curseur_int sont deux <div> imbriqués. Le premier a quelques pixels de haut et 300 de large, un intérieur vide, un contour solide et délimite l'enveloppe du second. Ce dernier a la même hauteur que son conteneur, un remplissage de couleur et une largeur proportionnel au pourcentage d'avancement.

    Pour une meilleure compréhension du code, la fonction doSQL :
    • appelle une procédure PHP qui exécute la requête passée en premier paramètre et renvoie les résultats dans un tableau
    • en cas d'erreur affiche le code d'erreur
    • en cas de succès, appelle la fonction passée en second paramètre, avec un tableau javascript contenant les lignes de la requête
    • dans tous les cas, appelle la fonction passée en troisième paramètre (si définie).


    Voici une idée de ce que ça donne à la fin de la procédure (100% effectué):
    Nom : optibase.jpg
Affichages : 245
Taille : 29,2 Ko

    Partie HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ...
    <div id="cursor_ext" style="height:12px; border:solid 1px black; background-color:#CCC">
     <div id="cursor_int" style="background-color:blue; float:left; width:0%; height:100%;"></div>
    </div>
    ...
    <table width="80%" border="0" align="center" cellpadding="10" cellspacing="0" id="result">
      <tr>
        <td width="50%" align="left" valign="top">&nbsp;</td>
        <td width="50%" align="left" valign="top">&nbsp;</td>
      </tr>
    </table>
    ...
    Et la partie JavaScript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    ...
    $('#start').click(function(){
        var sql, tableNo = 0, colNo = 0;;
        $('#cursor_int').width(0);
        $('#cursor_ext').show();
        $('#result td').html('&nbsp;');
        $.ajaxSetup({async : false});
     
        doSQL("SHOW TABLES",function(tablerows){
            $.each(tablerows, function(key,table){
                var target = colNo == 0 ? $('#result td').eq(0) :  $('#result td').eq(1);
                colNo++;
                colNo %= 2;
                // table est un tableau associatif à 1 dimension dont la clé est construite par le moteur de base de données
                // Il est donc variable et doit être retrouvé à chaque fois.
                var tablekey = Object.keys(table)[0];
                var tablename = table[tablekey];
                tableNo++;
                $('#cursor_int').width(tableNo / tablerows.length * maxwidth)
                // Vérification de la table
                var html = '<br /><br /><strong>Vérification de la table : '+tablename+'</strong><br />\n';
                target.html(target.html() + html);
                doSQL("CHECK TABLE " + tablename, function(checkrows){
                    html = "État de la table : " + checkrows[0]['Msg_text'] + "<br />\n";
                    target.html(target.html() + html);
                    if(checkrows[0]['Msg_text'] != 'OK'){
                        // Table défectueuse : réparation
                        doSQL("REPAIR TABLE " + tablename, function(repairrows){
                            html =" Réparation de la table : " + repairrows[0]['Msg_text'] + "<br />\n";
                            target.html(target.html() + html);
                            doSQL("OPTIMIZE TABLE " + tablename, function(optirows){
                                html =" Optimisation de la table : " + optirows[0]['Msg_text'] + "\n";
                                target.html(target.html() + html);
                            });
                        });
                    }
                    else{
                        doSQL("OPTIMIZE TABLE " + tablename, function(optirows){
                            html =" Optimisation de la table : " + optirows[0]['Msg_text'] + "\n";
                            target.html(target.html() + html);
                        });
                    }
                });
            });
            alert('Vérification et optimisation terminées.');
            $.ajaxSetup({async : true});
        });
    })
    Mais en fait, ce que je voudrais savoir, c'est s'il existe un moyen de RAFRAICHIR la page SANS LA RECHARGER pendant l'exécution d'un script.

Discussions similaires

  1. [AJAX] Rafraichissement d'une partie de la page
    Par skandaboy dans le forum AJAX
    Réponses: 3
    Dernier message: 12/01/2011, 20h21
  2. [AJAX] Rafraichissement d'une page
    Par grandthor dans le forum AJAX
    Réponses: 2
    Dernier message: 14/12/2010, 16h42
  3. Réponses: 4
    Dernier message: 11/06/2009, 09h57
  4. Réponses: 7
    Dernier message: 23/02/2006, 14h24
  5. Comment arreter le rafraichissement d'une page avec un popup
    Par Wanty dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/08/2005, 14h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo