[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 :lol:
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 :calim2:
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
1 pièce(s) jointe(s)
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é):
Pièce jointe 151420
Partie HTML :
Code:
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"> </td>
<td width="50%" align="left" valign="top"> </td>
</tr>
</table>
... |
Et la partie JavaScript :
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
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(' ');
$.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.
