Modif innerHTML d'un div entre 2 XMLHttpRequest synchrones sous IERésolu

Question

Bonjour,

Je suis en train de concevoir un outil qui, au clic sur un bouton, parcours les lignes d'un tableau, chaque ligne contenant 3 colonnes (pour simplifier) : une valeur "maREf" et deux cases à cocher.
Pour chaque ligne et pour chaque case cochée, je passe maRef en paramètre à une cgi en VB6 (il y en a donc deux différentes) à l'aide de XMLHttpRequest synchrone. Je remplace, au final, la case cochée par le résultat true ou false du responseText de ma requête.


function getXhr(){
var xhr=null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e1){
xhr = null;
}
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
}
return xhr;
}

function lance(){
var montbl = document.getElementById("idtabclt");
var montblbody = montbl.getElementsByTagName("tbody")[0];

for (var i=0; i < montblbody.rows.length; i++){
var refcpt = montblbody.rows[i].cells[1].innerHTML
if (montblbody.rows[i].cells[6].getElementsByTagName('input')[0].checked){
document.getElementById("ge" + refcpt).innerHTML = "";
envoi_cg1("cgi/clo/cgi_retsouf_clo.exe?act=clo&cpt=" + refcpt + "&typ=ge" + "&uid=" + Math.random(), "ge" + refcpt);
}
if(montblbody.rows[i].cells[7].getElementsByTagName('input')[0].checked){
document.getElementById("av" + refcpt).innerHTML = "";
envoi_cg1("cgi/clo/cgi_retsouf_clo.exe?act=clo&cpt=" + refcpt + "&typ=av" + "&uid=" + Math.random(), "av" + refcpt);
}
}
}

function envoi_cg1(url, monid){
var xhr1 = getXhr()	
document.getElementById(monid).innerHTML = "";
xhr1.open("GET", url, false);
xhr1.send(null);
if(xhr1.status == 200){			
if (xhr1.responseText.toLowerCase() == "true"){
document.getElementById(monid).innerHTML = "";
}
else {
document.getElementById(monid).innerHTML = "";
}		
}
}

function envoi_cgi2(url, monid){
var xhr2 = getXhr()	
document.getElementById(monid).innerHTML = "";
xhr2.open("GET", url, false);
xhr2.send(null);
if(xhr2.status == 200){			
if (xhr2.responseText.toLowerCase() == "true"){
document.getElementById(monid).innerHTML = "";
}
else {
document.getElementById(monid).innerHTML = "";
}
}	
}


J'observe, quand je lance le bidule sous FF6, que tout fonctionne. Quand je dis que ça fonctionne, c'est que chaque requête synchrone renvoi un résultat et que ma case à cocher est bien remplacée. On peut donc suivre la progression de l'ensemble. Je suis plutôt content de moi sauf que sous IE6 et IE8 (sur IE en général donc ?) ça freeze dès le début. Ca freeze tellement que même le bouton n'est pas relaché ! Donc pas le côté progression que j'aime tant.

Je sais, je ne suis pas raisonnable. IE6, VB6 et Jean Paul 6 c'est du passé. C'est pourtant une réalité en 2011 dans ma boîte (avec windows 2000, arg).

Merci aux généreux bienfaiteurs.

Pac

cs_pacadebord · Accepted Answer

Bonjour à tous,

Je reviens sur la question après quelque temps. Comme l'a dit Zobibol, ma gestion du onreadystatechange n'était pas terrible. J'ai enfin trouvé la réponse à l'aide de la technique du CALLBACK !

Pac

dvwyns · Answer

Salut,

Je ne sais plus dans quel cas innerHtml ne fonctionne pas sous IE, mais je pense que le problème vient de là.

Essaie l'équivalent jquery
$("#id").html(var)

Tu peux télécharger la librairie jquery ici

Je te concède qu'ajouter cette librairie augmentera le poids de ta page, mais en tout cas en premier lieu ça te permettra de voir si le problème vient de là.

Cordialement

cs_pacadebord · Answer

Je pense qu'innerHTML fonctionne puisqu'à la fin du traitement, j'obtiens pareil que sous Firefox : mes cases à cocher ont été remplacées. Cela dit me mettre à jquery serait peut-être une bonne chose.


Pac

Zobibol · Answer

bien le bonjour, il n'est pas évident de tester comme ça, mais il semblerait que ce soit d'un point de vue gestion de la requête qu'il y ait une erreur:

j'aurais plus aborder le problème comme ceci:

function getXhr(){
var xhr=null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e1){
xhr = null;
}
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
}
return xhr;
}

function lance(){
var montbl = document.getElementById("idtabclt");
var montblbody = montbl.getElementsByTagName("tbody")[0];

for (var i=0; i < montblbody.rows.length; i++){
var refcpt = montblbody.rows[i].cells[1].innerHTML
if (montblbody.rows[i].cells[6].getElementsByTagName('input')[0].checked){
document.getElementById("ge" + refcpt).innerHTML = "";
envoi_cg1("cgi/clo/cgi_retsouf_clo.exe?act=clo&cpt=" + refcpt + "&typ=ge" + "&uid=" + Math.random(), "ge" + refcpt);
}
if(montblbody.rows[i].cells[7].getElementsByTagName('input')[0].checked){
document.getElementById("av" + refcpt).innerHTML = "";
envoi_cg1("cgi/clo/cgi_retsouf_clo.exe?act=clo&cpt=" + refcpt + "&typ=av" + "&uid=" + Math.random(), "av" + refcpt);
}
}
}

function envoi_cg1(url, monid){
var xhr1 = getXhr()	
document.getElementById(monid).innerHTML = "";
xhr1.open("GET", url, false);
xhr1.send(null);
xhr1.onreadystatechange= function (ev){
// tout d'abord on ne s'intérresse qu'à la réponse ok.
if (xhr1.readyState == 4){
if(xhr1.status == 200){			
if (xhr1.responseText.toLowerCase() == "true"){
document.getElementById(monid).innerHTML = "";
}
else {
document.getElementById(monid).innerHTML = "";
}
}
}		
}
}

function envoi_cgi2(url, monid){
var xhr2 = getXhr()	
document.getElementById(monid).innerHTML = "";
xhr2.open("GET", url, false);
xhr2.send(null);

xhr2.onreadystatechange= function (ev){
// tout d'abord on ne s'intérresse qu'à la réponse ok.
if (xhr2.readyState == 4){
if(xhr2.status == 200){			
if (xhr2.responseText.toLowerCase() == "true"){
document.getElementById(monid).innerHTML = "";
}
else {
document.getElementById(monid).innerHTML = "";
}
}
}		
}
}


l'utilisation de onreadystatechange change probablement la donne. Et est plus en conformité (je pense avec IE... pas tester donc... pas certain que cela résolve le problème, en outre, c'est le traitement qu'il faut faire.).

[o-_-o]

cs_pacadebord · Answer

Salut Zobibol,

Merci pour ta réponse, hélas le script ne passe même plus dans le bloc onreadystatechange, ni avec FF6 ni avec IE.


Pac

cs_pacadebord · Answer

Mais readyState == 4 et status == 200 quand la requête synchrone est terminée

Pac

Modif innerHTML d'un div entre 2 XMLHttpRequest synchrones sous IE

6 réponses

Votre réponse

Discussions similaires