MàJ balise <div> - Framework prototype.js

[Mattius007]

Bonjour à tous !

Alors voilà j'utilise le framework prototype.js pour mettre à jour la partie contenu de ma page web. Lorsque l'on clique sur un élément du menu de navigation, j'appele la fonction getContentAjax().

Code :

function getContentAjax(contentID) {
	var url = 'getContent.php';
	var pars = 'contentID=' + contentID;
	var myAjax = new Ajax.Updater( {success: 'content'}, url, {method: 'post', parameters: pars, onFailure: reportError}); }

La mise à jour fonctionne parfaitement mais le pb est que l'insertion est faite par concaténation. Par exemple si je clique deux fois sur Accueil, il va me supperposer deux fois le contenu de ma page d'accueil entre la balise <div id="content"> et </div>.

Avant (sa ne fait que 3j que j'ai commencé avec AJAX) j'utilisais le framework Rico, qui lui gérait bien l'effacement avant l'insertion du contenu.

Je suis loin de maitriser le javascript donc il se peut que la solution soit vraiment très simple.

Pour résumer je cherche un moyen d'effacer le contenu d'une balise <div> en javascript, MAIS cette balise apparait comme étant vide : <div id="content"></div> car mise à jour via l'AJAX. InnerHTML n'est donc pas suffisant (selon mes tests...).

Merci d'avance !

Matth

Modifié 11 Février 2007 par Mattius007

[Dudu]

Salut

Si j'ai bonne mémoire, le gros problème d'innerHTML est qu'il ne modifie pas l'arbre DOM. C'est donc certainement pour ça que Javascript ne peut effacer quelque chose qu'il ne connaît pas.

Essaie d'écrire dans une balise avec de vraies propriétés standards comme createElement par exemple.

(c'est d'ailleurs pour cette raison qu'innerHTML n'est pas standard, et est déconseillé)

PS: outre ce problème, vérifie que le contenu de ton site est accessible aux visiteurs dépourvus de Javascript. Pour des questions d'accessibilité et de référencement

[nacedo]

salut,

cela fait maintenant quelque mois que je bidouille avec l'AJAX et je dois avouer que je n'ai jamais rencontré se problème.

innerthtml fonctionne très bien. si tu veux éffacer le contenue d'une div tu n'as que faire ceci ma_div.innerhtml = ' '; cela devrai suffir.

pour se qui est d'avoir 2 fois le même contenue à la suite dans t'a div, je te conseille de reprendre l'AJAX à la source;

function envoieRequete(url_php,div_id,page2){ //fonction qui rempli une balise div avec une page

	var xhr_object = null;
	var attente = '<div id="load"><div id="load_img"><img  src="./IMG/ajax-loader.gif" alt="load" width="50px" height="50px">Chargement en cours</div></div>';

	if(window.XMLHttpRequest) // Firefox et autres
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr_object = false; 
	}

		// On ouvre la requete vers la page désirée
		xhr_object.open("POST", url_php, true);

		xhr_object.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //POST
		//xhr_object.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1"); //GET
		xhr_object.onreadystatechange = function(){
		if ( xhr_object.readyState == 4 ) {
			// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
			document.getElementById(div_id).innerHTML = xhr_object.responseText;
		} else {
			document.getElementById(div_id).innerHTML = attente;

		}
	}
	// dans le cas du post envoi des variables
	xhr_object.send("page="+page2);	
}

ou sinon pour faire plus simple utilise la librairie prototype.js, dont voici un 'tit exemple