11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

Je vous présente mon pb sue lequel je planche depuis un petit moment. Ce pb existe uniquement sur IE et Chrome et pas sur Firefox .
J'ai tout d'abord une première requête Ajax qui affiche sur l'écran de l'utilisateur un tableau affichant une liste de donnée à traiter :

	function traitement(nomfichier,codetgc,idlot)
	{
		$('#content').html("");
		if (nomfichier!="" && codetgc!="" && idlot>0)
		{
			foo = new Date().getTime(); // var unique permettant de rendre l'appel AJAX unique afin de ne pas utiliser le cache d'IE
			$.ajax({
				url: "traitementlot_ajax.php",
				data: {dummy:foo,nomfichier:nomfichier,codetgc:codetgc,idlot:idlot},
				type: 'get',
				async: false,
				cache: false,
				beforeSend: function (){/*$("#divLoading").show();*/},
				success: function (data)
				{
					//$("#divLoading").fadeOut();
					$('#content').html(data);
					//var test_affiche = affiche_content(data);
					$( "#content" ).show("fast", function() {
							// Animation complete.
							attente(idlot);
					});
				},
				error: function (xhr,data,errorretour) {var machain = "";for (i in errorretour) machain += i + " " + errorretour[i] + "\n"; alert(data + " " + machain);}, dataType : 'text'
			});
		}
	}


Ensuite la fonction attente exécute pour chaque ligne de donnée à traiter un appel ajax


		function attente(idlot) {
				var totalok=0;
				var totalnok=0;
				if ($('#nbre_ref').attr('value') >0)
				{
					//On balaye maintenant les ref pour le traitement sous TGC
					//for (var i=0;i<=$('#nbre_ref').attr('value');i++)
					var i=0;
					$("input[id^=refelec_]").each(
					function()
					{
						i++;
						$('#test').prop('value',i);
							// Animation complete.
							if (typeof $('#refelec_'+i).attr('value') == "undefined") refelec=""; else refelec=$('#refelec_'+i).attr('value');
							if (typeof $('#heurecreuse_'+i).text() == "") index1 = ""; else index1=$('#heurecreuse_'+i).text();
							if (typeof $('#heurepleine_'+i).text() == "") index2=""; else index2=$('#heurepleine_'+i).text();
							if (typeof $('#refgaz_'+i).attr('value') == "undefined") refgaz=""; else refgaz=$('#refgaz_'+i).attr('value');
							if (typeof $('#indexgaz_'+i).text() == "") index=""; else index=$('#indexgaz_'+i).text();
							if (typeof $('#codeelec_'+i).text() == "") codecentreelec= ""; else codecentreelec=$('#codeelec_'+i).text();
							if (typeof $('#codegaz_'+i).text() == "") codecentregaz=""; else codecentregaz=$('#codegaz_'+i).text();
							if (typeof $('#idclicartet'+i).attr('value') == "") idclicartet=""; else idclicartet=$('#idclicartet'+i).attr('value');
							$('#texte_'+i).text("Traitement en cours ...");
							$('#texte_'+i).css("display","block");
							if ((refelec!="" || refgaz!="")&&(idclicartet!=""))
							{
								foo = new Date().getTime(); // var unique permettant de rendre l'appel AJAX unique afin de ne pas utiliser le cache d'IE
								$.ajax({
									url: "/application/cartet/interfaces_tgc/transfert_index.php",
									data: {dummy:foo,refelec:refelec,index1:index1,index2:index2,refgaz:refgaz,index:index,codecentreelec:codecentreelec,codecentregaz:codecentregaz,idclicartet:idclicartet},
									type: 'get',
									async : false,
									cache: false,
									beforeSend: function (){
										$( "#divLoading" ).show();
									},
									success: function (data)
									{
										$("#divLoading").hide();
										//$("#divLoading").fadeOut();
										if (data=='1')
										{
											totalok++;
										}
										else
											totalnok++;
										$('#texte_'+i).text("Traitement terminé ...");
										$('#table_lot tr[id="lot_' + i + '"] td').hide();
									},
									error: function (xhr,data,errorretour) {var machain = "";for (i in errorretour) machain += i + " " + errorretour[i] + "\n"; alert(data + " " + machain); },dataType : 'text'
								});
								$('#table_lot tr[id="lot_' + i + '"] td' ).css( "display", "none" );
							}
						});
				}


Mon pb est le suivant toutes les modifications du DOM comme $('#texte_'+i).text("Traitement terminé ..."); ne s'affichent pas . J'ai en fait tout qui s'affiche à la fin du traitement sauf si je fais un alert juste après cette ligne où l'a ca fonctionne. Mais dès que je retire l'alert l'utilisateur ne voit rien et c'est seulement à la fin du traitement que tout s'affiche. Sous Firefox tout fonctionne on voit bien les .hide() s'executer.
Je sais que lorsque l'on fait de l'ajax on doit être en asynchrone mais là j'ai besoin que l'utilisateur patiente de manière et voit le traitement s'effectuer petit à petit.

Par avance merci de vos réponses.[/i][/i]
Modifié par kgb (20 Jan 2015 - 14:51)
Bonjour.

Aaaah, l'indentation du diable, si possible, tu pourrais essayer d'éditer ton post pour corriger ça...

Première petite question, pourquoi tous ces "typeof" ? Ils ne seront jamais vide en plus ?
Bonjour SolidSnake

Merci pour l'intérêt que tu portes à mon pb. Concernant l'indentation j'y regarde. Pour les typesof je les contrôles au cas où car la page php appellé en ajax interroge un terminal et je dois garantir des données que j'envoie à la fois avant (avec les type of) et aussi pendant (en php).

Cordialement
kgb a écrit :
Bonjour à tous

Je vous présente mon pb sue lequel je planche depuis un petit moment. Ce pb existe uniquement sur IE et Chrome et pas sur Firefox .
J'ai tout d'abord une première requête Ajax qui affiche sur l'écran de l'utilisateur un tableau affichant une liste de donnée à traiter :

	function traitement(nomfichier,codetgc,idlot)
	{
		$('#content').html(&quot;&quot;);
		if (nomfichier!=&quot;&quot; &amp;&amp; codetgc!=&quot;&quot; &amp;&amp; idlot&gt;0)
		{
			foo = new Date().getTime(); // var unique permettant de rendre l'appel AJAX unique afin de ne pas utiliser le cache d'IE
			$.ajax({
				url: &quot;traitementlot_ajax.php&quot;,
				data: {dummy:foo,nomfichier:nomfichier,codetgc:codetgc,idlot:idlot},
				type: 'get',
				async: false,
				cache: false,
				beforeSend: function (){/*$(&quot;#divLoading&quot;).show();*/},
				success: function (data)
				{
					//$(&quot;#divLoading&quot;).fadeOut();
					$('#content').html(data);
					//var test_affiche = affiche_content(data);
					$( &quot;#content&quot; ).show(&quot;fast&quot;, function() {
							// Animation complete.
							attente(idlot);
					});
				},
				error: function (xhr,data,errorretour) {var machain = &quot;&quot;;for (i in errorretour) machain += i + &quot; &quot; + errorretour[i] + &quot;\n&quot;; alert(data + &quot; &quot; + machain);}, dataType : 'text'
			});
		}
	}


Ensuite la fonction attente exécute pour chaque ligne de donnée à traiter un appel ajax


function attente(idlot) 
{
        var totalok=0;
	var totalnok=0;
	if ($('#nbre_ref').attr('value') &gt;0)
	{
		//On balaye maintenant les ref pour le traitement sous TGC
		//for (var i=0;i&lt;=$('#nbre_ref').attr('value');i++)
		var i=0;
		$(&quot;input[id^=refelec_]&quot;).each(
		function()
		{
			i++;
			$('#test').prop('value',i);
			// Animation complete.
			if (typeof $('#refelec_'+i).attr('value') == &quot;undefined&quot;) refelec=&quot;&quot;; else refelec=$('#refelec_'+i).attr('value');
			if (typeof $('#heurecreuse_'+i).text() == &quot;&quot;) index1 = &quot;&quot;; else index1=$('#heurecreuse_'+i).text();
			if (typeof $('#heurepleine_'+i).text() == &quot;&quot;) index2=&quot;&quot;; else index2=$('#heurepleine_'+i).text();
			if (typeof $('#refgaz_'+i).attr('value') == &quot;undefined&quot;) refgaz=&quot;&quot;; else refgaz=$('#refgaz_'+i).attr('value');
			if (typeof $('#indexgaz_'+i).text() == &quot;&quot;) index=&quot;&quot;; else index=$('#indexgaz_'+i).text();
			if (typeof $('#codeelec_'+i).text() == &quot;&quot;) codecentreelec= &quot;&quot;; else codecentreelec=$('#codeelec_'+i).text();
			if (typeof $('#codegaz_'+i).text() == &quot;&quot;) codecentregaz=&quot;&quot;; else codecentregaz=$('#codegaz_'+i).text();
			if (typeof $('#idclicartet'+i).attr('value') == &quot;&quot;) idclicartet=&quot;&quot;; else idclicartet=$('#idclicartet'+i).attr('value');
			$('#texte_'+i).text(&quot;Traitement en cours ...&quot;);
			$('#texte_'+i).css(&quot;display&quot;,&quot;block&quot;);
			if ((refelec!=&quot;&quot; || refgaz!=&quot;&quot;)&amp;&amp;(idclicartet!=&quot;&quot;))
			{
				foo = new Date().getTime(); // var unique permettant de rendre l'appel AJAX unique afin de ne pas utiliser le cache d'IE
				$.ajax({
					url: &quot;/application/cartet/interfaces_tgc/transfert_index.php&quot;,
					data: {dummy:foo,refelec:refelec,index1:index1,index2:index2,refgaz:refgaz,index:index,codecentreelec:codecentreelec,codecentregaz:codecentregaz,idclicartet:idclicartet},
					type: 'get',
					async : false,
					cache: false,
					beforeSend: function (){
						$( &quot;#divLoading&quot; ).show();
					},
					success: function (data)
					{
						$(&quot;#divLoading&quot;).hide();
						//$(&quot;#divLoading&quot;).fadeOut();
						if (data=='1')
						{
							totalok++;
						}
						else
							totalnok++;
						$('#texte_'+i).text(&quot;Traitement terminé ...&quot;);
						$('#table_lot tr[id=&quot;lot_' + i + '&quot;] td').hide();
					},
					error: function (xhr,data,errorretour) {var machain = &quot;&quot;;for (i in errorretour) machain += i + &quot; &quot; + errorretour[i] + &quot;\n&quot;; alert(data + &quot; &quot; + machain); },dataType : 'text'
				});
				$('#table_lot tr[id=&quot;lot_' + i + '&quot;] td' ).css( &quot;display&quot;, &quot;none&quot; );
			}
		});
	}


Mon pb est le suivant toutes les modifications du DOM comme $('#texte_'+i).text(&quot;Traitement terminé ...&quot;); ne s'affichent pas . J'ai en fait tout qui s'affiche à la fin du traitement sauf si je fais un alert juste après cette ligne où l'a ca fonctionne. Mais dès que je retire l'alert l'utilisateur ne voit rien et c'est seulement à la fin du traitement que tout s'affiche. Sous Firefox tout fonctionne on voit bien les .hide() s'executer.
Je sais que lorsque l'on fait de l'ajax on doit être en asynchrone mais là j'ai besoin que l'utilisateur patiente de manière et voit le traitement s'effectuer petit à petit.

Par avance merci de vos réponses.[/i][/i]