AJAX

Bonsoir un super site cadeaux avec un tuto super :D

http://www.grafikart.fr/tutoriels/video/navigation-ajax-33

Slt, merci pour ce tuto, il a presque résolu mes problèmes.
J'ai un petit souci: tout fonctionne très bien mis à part que les différentes pages html que je charge débordent de la div #contenu! Comment remédier à ça??? Il faut que je précise que ma page principale est en xhtml et non en php, est-ce qu'il y a des modifications à apporter pour adapter l'ajax à ma config? Merci de m'aider.

Pour récupérer le contenu de ton div #contenu :

Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(xhr.responseText);
contenu = resultat[0];

Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX. Il te suffira de faire un innerHTML de la variablecontenu dans le div #contenu :

document.getElementById('contenu').innerHTML = contenu;

Pour améliorer la navigation, stocke les urls visitées dans un array pour pouvoir faire un système précédent/suivant (avec AJAX, ceux du navigateur ne fonctionne pas car il n'y a aucune changement de page).

Slt,
excuse-moi "avion-f16", étant donné le peu d'expérience que j'ai en code et en javascript, pourrais-tu être plus explicite quant aux emplacements dans lesquels je doit insérer les lignes que tu m'a conseillées d'ajouter?
Merci et désolé pour mon manque de connaissance.

-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :

Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(xhr.responseText);
contenu = resultat[0];

-Qelle est ma chaine qui contient le retour de la requête AJAX?

Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX.

-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :

document.getElementById('contenu').innerHTML = contenu;

-Voici mon code du fichier "navigation.js" :

$(document).ready(function(){
$("#sousmenu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});

function afficher(data){
$("#contenu").fadeOut(500,function(){
$("#contenu").empty();
$("#contenu").append(data);
$("#contenu").fadeIn(1000);
})
}

Voilà ton nouveau navigation.js :

$(document).ready(function(){
	$("#sousmenu a").click(function(){
		page=$(this).attr("href");
		$.ajax({
			url: "contenu/"+page,
			cache:false,
			success:function(html){
				Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
				resultat = Expression.exec(html);
				afficher(resultat[0]);
			},
			error:function(XMLHttpRequest,textStatus, errorThrown){
				alert(textStatus);
			}
		});
	return false;
	});
});

function afficher(data){
	$("#contenu").fadeOut(500,function(){
		$("#contenu").empty();
		$("#contenu").append(data);
		$("#contenu").fadeIn(1000);
	});
}

« Ma » technique permet d'éviter à devoir créer un second fichier contenant que le contenu sans les menus. Ainsi, tu peux faire ta requête AJAX vers une page contenu les menus, le header, le footer, ... ça ne prendra au final que le contenu du div #contenu.

Salut,

Désolé ça bug chez-moi!!!
Résultat:

http://sevenset.free.fr/sevenset02/home.html

Je ne comprend pas ?!

Merci de votre aide.

Je pense que tu confonds l'AJAX avec les iframes ...

Sur ta page « contenu/page6.html » (par exemple), tu mets le DTD et tout le reste (</body>, </html>) alors que ça ne sert à rien. Quand je dis "juste le contenu", c'est vraiment que le contenu proprement dit : Ce que tu veux mettre entre <div id="contenu"> et </div> sans ce qu'il y a autour (ni ces balises).
En gros, AJAX charge le contenu d'un fichier dans une chaine de caractère avec laquelle tu fait des traitements (l'afficher par exemple).

Le script que je t'ai donné va chercher le contenu entre <div id="contenu"> et </div> et pas <div class="box" id="contenu">.

Pour terminer, tu n'as pas besoin de créer une duplication de ta page avec seulement le contenu : édite l'url de la requête AJAX et crées tes pages normalement.

Salut,
Désolé je suis perdu, je crois que j'ai été trop ambitieux (ajax...) pour mon niveau de néophyte!
ça ne fonctionne pas...
Et ça au fait je ne doit pas le mettre quelque part : document.getElementById('contenu').innerHTML = contenu;
Pour l'instant j'ai fais les 7 pages html test (correspondant aux 7 boutons de mon sousmenu) pour voir si ça fonctionnait, ajax tout ça... dont la page1.html avec seulement du texte sans aucune balise ni rien d'autre (comme conseillé)...
Je suis dépité!!!

Peut-être si tu connais un tuto complet du début à la fin, un bon tuto pour les nuls?!

Merci quand même pour ton savoir.