JS problème avec replace() - Page 1

Je rencontre un problème avec la fonction replace en javascript.

Je veux modifier la valeur d'un input dans une div. Je ne peux pas le faire via getElementById car cette fonction ne s'applique pas sur la div mais au document. Hors comme je charge la div par ajax, elle ne fait pas partie du document (le fait de changer la page par innerHTML() ne reconstruit pas les noeuds DOM de la page). C'est donc pourquoi je dois faire appel à replace().

Je stocke le contenu HTML d'une div dans une variable, je parcoure cette variable avec replace pour changer un value="" en value=argument. Seulement rien n'est remplacé! J'ai rajouté une condition avec indexOf pour voir si ma chaine est au moins trouvée, et ça me répond que oui! Vraiment je sais plus quoi faire.

Le code:

function putReferer(txt,ref) {

	if (txt.indexOf('value=""') != -1) {         // test d'existence de la chaine
		txt.replace(/value=\"\"/g, "value=\""+ref+"\"");
	}
	return txt;
}

et je l'appelle comme ça:

page = xmlhttp.responseText;     // code html de la page a charger en ajax (source)
element.innerHTML = putReferer(page,"ma valeur que je voudrai mettre")         //element.innerhtml c'est le code de ma div à modifier (destination)

Vraisemblablement le probleme se trouve dans ma fonction putreferer. Peut etre que le replace ne gère pas les auts de ligne dans les variables? C'est marqué nul par dans la doc!

Merci de votre aide!


PS: Je sais que le innerHTML() c'est le mal mais ça reste une solution rapide qui permet une lecture plus aisée du code.

JoNas (./1) :
le fait de changer la page par innerHTML() ne reconstruit pas les noeuds DOM de la page

faut... je le fais hyper souvent....

- lancer la httprequest et recuperer le contenu
- ecrire le contenu dans la page (=> ca créé le dom)
- acceder par son id à l'input pour changer sa valeur.

par contre le innerHTML de IE6 ne marche que sur les <div>. Ou au moins, pas sur les <select>, ni sur les <table>, j'en ai fait l'amère expérience

Tu te prends la tête pour rien.

Ton div il a un id? Si oui:

document.getElementById('id_de_mon_div').innerHTML = xmlhttp.responseText;

en meme temps, il ne faut pas faire d'innerHTML sur des éléments dont la mise en forme dépend des balises le contenant, comme justement les select, table, ul, ajout de input radio,... afin de ne pas "casser" le dom

en regle général, le mieux est de limiter l'ecriture dans un innerHTML aux balises div, span, p, th, td

vouais et quand tu veux ajouter dynamiquement des TR à une table ben t'es dans le acac .

Bon Spipu tu est mon Dieu de la journée.

Je vais aller te vouer un culte et bruler 10 000 cierges en ton honneur.

Merci beaucoup! Vraiment!

squalyl (./6) :
vouais et quand tu veux ajouter dynamiquement des TR à une table ben t'es dans le acac .

non, une astuce conciste à mettre ta table dans une div, récuperer l'innerhtml, mettre ton nouveau TR entre ceux déjà existant, puis ecrire le nouveau code HTML dans la div.

JoNas (./7) :
Bon Spipu tu est mon Dieu de la journée.

dieu d'un jour, dieux toujours !

Spipu (./9) :
non, une astuce conciste à mettre ta table dans une div, récuperer l'innerhtml, mettre ton nouveau TR entre ceux déjà existant, puis ecrire le nouveau code HTML dans la div.

Tu te doutes bien que j'ai fait ça (c'est ce qui est recommandé par MSDN, en plus )

Je vais aller te vouer un culte et bruler 10 000 cierges en ton honneur.

Attention à la pollution

squalyl (./9) :
(c'est ce qui est recommandé par MSDN, en plus )

ah je savais meme pas

Bon j'ai encore un petit soucis dans l'AJAX (c'est la première fois que j'en utilise), ta solution marche spipu, mais que quand je debug pas à pas avec Firebug.

Donc voila comment j'ai fait:

A près le xmlhttp.send("") (écriture de la page) je peux accèder à mon input via getelementbyid. J'ai modifié ma fonction putReferer() de ./2 en me servant de getElementById() et ça marche très bien! Mais seuelemt en pas à pas (debug) avec firebug

Quand je fais tourner le script en live sans les breakpoints la page est bien chargée mais la modif n'est pas prise en compte. Donc que faut-il que je fasse? Voici mon code ajax.js:

function xhr( ) {
	var xmlhttp

	if (!xmlhttp && typeof XMLHttpRequest!='undefined')
	{
		try
		{
			xmlhttp = new XMLHttpRequest();
		}catch (e){
			xmlhttp=false;
		}
	}else{
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				xmlhttp = false;
			}
		}
	}
	return xmlhttp;
}

function ajaxShow(fragment_url, element_id, ref) {
	var element = document.getElementById(element_id);
	var xmlhttp = xhr();
	xmlhttp.open("POST", fragment_url, true);
	xmlhttp.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 ) {
			if( xmlhttp.status == 200 ) {
				element.innerHTML = xmlhttp.responseText;
			} else {
				element.innerHTML = '<div>Impossible de charger la page</div>';
			}
		}
	}
	xmlhttp.send("");
        putReferer(ref);                                    // ############## ma fonction #######################
} 

function traitementProgress( element_id ) {
	var element = document.getElementById(element_id);
	element.innerHTML = '<div style="padding:0px;margin:0px;vertical-align:middle;text-align:center;width:100%;height:100%;"><img src="./img/ajax-loader.gif" alf="Chargement..." /><br/>Traitement en cours ...</div>';
	return null;
}

function putReferer(ref) {
        document.getElementById('referer').value=ref;                      // je rapelle que l'id de mon inpu dans ma page c'est 'referer'

}

Une idée?

Bon j'ai du nouveau, j'ai mis une pause (j'ai trouvé une fonction sur le net qui fait VRAIMENT attendre le js) entre le send() et le putReferer() car je me suis dit que c'était peut être de là que venait le problème et effectivement ça a marché................ une fois et c'était une pause de 10 000ms, oui 10secondes! 10secondes d'attente, ya plus réactif comme script AJAX :P

Donc là je suis un peu bloqué, Spipu tu fais comment dans tes scripts toi? ALlez je mets en jeux une 2e journée de vénération! :P

function fnc1()
{
blabla blabla
setTimeout('fnc2();', 100);
}

function fnc2()
{
bla bla bla
}

j'ai l'impression qu'il te manque quelques bases... tu devrais faire des tutos complets...

non, c'est qu'il faut piger que xmlhttp est fait pour être asynchrone (même si on peut le forcer à être synchrone...)
si c'était moi je ferais :

function ajaxShow(fragment_url, element_id, ref) { 
	var element = document.getElementById(element_id); 
	var xmlhttp = xhr(); 
	xmlhttp.open("POST", fragment_url, true); 
	xmlhttp.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); 
	xmlhttp.onreadystatechange = function() { 
		if (xmlhttp.readyState == 4 ) { 
			if( xmlhttp.status == 200 ) { 
				element.innerHTML = xmlhttp.responseText; 
				putReferer(ref);
			} else { 
				element.innerHTML = '<div>Impossible de charger la page</div>'; 
			} 
		} 
	} 
	xmlhttp.send(""); 

} 

en gros le traitement de la réponse doit se faire dans onreadystatechange et pas après avoir fait send.
Car tu ne sais pas quand se produira le vrai chargement.
Ou alors tu auras besoin d'un flag, que tu initialises à faux avant l'appel à send, que tu passes à true dans l'évènement, et tu boucles sur la valeur de ce flag après avoir fait send...

en plus il faut définir onreadystatechange avant de faire open et send! (je sais pas si c nécessaire, mais c plus sur)

c data

style:
var flagdone=false;
var x=xhr();
var data;
x.onreadystatechange=function() {
	if(x.readyState==4) {
		flagdone=true;
		data=x.responseText;
	}
}
x.abort(); //au cas ou y'a déja un truc en cours
x.open("GET" /*t'as vraiment besoin de POST? t'envoies rien lol*/, fragment_url, true);
flagdone=false; //pour etre sur
x.send(null);
while(!flagdone) pause(1ms);
//faire des trucs ave

ah vi, aussi, j'avais pas vu qu'il avait fait ca direct (l'ecriture du contenu dans l'element)

perso j'utilise ca : xmlhttp.onreadystatechange = HTTPObject_reponse;

avec HTTPObject_reponse une fonction de post traitement bien identifiée.

car sinon, on mélance la demande et la réponse... ce qui amène à ce genre de problèmes

eh ué (pas con le coup de séparer le handler, oué)

et en plus, ca augmente la lisiblité du code... et donc diminue le nombre de bugs

règle de base : tjrs coupé les programmes en faisant une fonction pour chaque etape différente, meme si on pourrait le faire en une seule fonction

@Spipu: Oui c'est vrai qu'il me manque des bases, le js j'en ai fait pendant des années mais c'était hyper crade (ha les jeunes années de programmation) et là je m'y mets doucement mais en essayant de faire du code propre (je dis essayer car une fois que je suis desepéré je reviens sur du code crade tel que vous avez pu le voir avec le replace() du ./1)

Et pour ce timer que tu me propose je l'ai deja essayé mais il n'arrete pas l'execution du code JS, ya une histoire de thread là dedans et j'ai pas pris le temps de plonger la tête dans la doc surtout que j'avais trouvé une alternative qui bloque le JS (d'ailleurs FF détecte ça comme un script qui a planté et demande si on veut continuer son exec).


@squalyl: tu as remporté le 2e jour de vénération. Merci beaucoup! J'ai pas fait de flag ni rien, j'ai juste déplacer le putreferer() après le element.innerHTML = xmlhttp.responseText dans le if du status.


Merci beaucoup! ça donne envie d'aller plus loin! Vous connaissez un endroit où trouver de la bonne doc Ajax? Les tutos sur le net ont l'air un peu à l'arrache, le seul que j'ai trouvé qui tenait la route c'était celui-là http://www.usabilityviews.com/ajaxsucks.html!

truc de base:

http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp

je me démerde avec ça, le reste je sais pas ce que ça vaut

JoNas (./18) :
Et pour ce timer que tu me propose je l'ai deja essayé mais il n'arrete pas l'execution du code JS, ya une histoire de thread là dedans et j'ai pas pris le temps de plonger la tête dans la doc surtout que j'avais trouvé une alternative qui bloque le JS (d'ailleurs FF détecte ça comme un script qui a planté et demande si on veut continuer son exec).

en effet, ca ne pouvait pas marcher, je m'étais trompé, en ayant lu un peu trop vite ton code, désolé

sinon, voici une librairie de ma conception que j'utilise dans quasi toutes mes applis :
[lien supprimé]

tu peux voir comment je l'utilise en regardant les sources HTML de [lien supprimé]/

jolie lib

merci

surtout très pratique, car elle gère les files d'attente lors de la demande de plusieurs requêtes en même temps

En parlant de documentation pour le js, y a Google Doctype qui est pas mal (bien qu'encore léger) parce que basé sur des batteries de tests.

Je voulais en tout cas vous remercier pour avoir si solidement répondu à mon problème et m'avoir plus qu'aidé à trouver la solution

Aujourd'hui c'est documentation!

bonne lecture