Ajax: comment récupérer nouveau contenu?

Bonjour, j'essaie de dompter jquery et sa fonction ajax, mais je bloque sur une question qui semble pourtant basique.

J'ai une page php genre portfolio.php?page=ma-premiere-page
et dont le h1 s'édite en fonction du get page (soit "ma première page")

j'utilise la fonction ajax avec l'url ?page=ma-deuxieme-page, en principe il va m'interpreter ma nouvelle page php en html, et le contenu du h1 devrait donc être ma deuxième page.

Pourtant si je fais un alert de son text, c'est toujours le premier qui est chargé, d'ou ma question comment récupérer le nouveau contenu d'une balise?

Hello,
Il faut, à priori, lui passer les paramètres comme cela:

$.ajax({
   type: "GET",
   url: "porfolio.php",
   data: "page=ma-deuxieme-page",
   success: function(data){
     alert(data);
   }
 });

Essaie et donne tes retours.

Merci beaucoup pour ta réponse, j'ai adapté mon script, et au premier abord ca ne marchait pas, mais en faisant l'alert(data) ou (html) la on peut voir que le h1 contient bien le bon titre, alors que mon alert($("#titre").text()) lui m'affiche toujours l'ancien contenu du h1...
Bref ca à l'air possible, mais comment récupérer le nouveau contenu et non l'ancien?

Oui c'set normal.
Ton

$("#titre").text()

est celui présent dans ta page et non celui présent dans data. Il faut injecter l'élément h1 dans le DOM à la fin de ta requete AJAX.

Exemple pour l'ajouter dans le body, à la fin:

success: function(data){
     $(data).find("#titre").appendTo("body");
}

Ok, je venais de trouver avec ceci:

$(html).find("#titre").text()

Je l'aurai placé dans une variable par facilité pour la suite.
Je ne sais pas ce qui est le plus clean? utiliser appendTo ou text?

Merci pour ton aide, sur le web il y a beaucoup de sources mais la plupart c'est juste pour coller tout le retour dans un div conteneur, pas vraiment pour décortiquer!

Je crois que je vais essayer de me faire un petit memento pour identifier les contenus de balises, leurs attributs, d'une page actuelle ou chargée par ajax...

après avoir trouvé comment récupérer le contenu textuel de mon h1 je pensais avoir la bonne façon d'écrire, mais au fur et a mesure que je teste, je deviens fou! Pour certaines balises ca marche mais pas pour d'autres...

    		success:function(html)
    		{
    			//alert($(html).find("#options").text());// --> renvoie le texte contenu entre les balises du titre
    			//alert($(html).find("section").text());// --> renvoie rien
    			//alert($(html).find("section").html());// --> renvoie null
    			//alert($(html).find("#contenusection").text());// --> renvoie rien
    			//alert($(html).find("#contenusection").html());// --> renvoie null
    			//alert($(html).find("#thumbs").text());// --> renvoie rien
    			//alert($(html).find("#thumbs").html());// --> renvoie l'html
    			//alert($(html).find("aside").text());// --> renvoie rien
    			//alert($(html).find("aside").html());// --> renvoie null
    			//alert($(html).find("#aside").text());// --> renvoie rien
    			//alert($(html).find("#aside").html());// --> renvoie null
    			//alert($(html));//  --> renvoie Object object
    			//alert(html);// --> renvoie tout l'html de la page
    			//alert($(html).find("body").html());//  -->  renvoie null
    			//alert($(html).find("body").text());//  --> rien
    			//alert($("body").text());//  --> Renvoie les textes de toutes les balises sans html de la page précédente (avec espaces et retours)
    			//alert($("body").html());//  --> Renvoie tout le contenu html de body de la page précédente
				$title=$(html).find("#options").text();
				$aside=$(html).find("aside").html();
    			actualiserviewer(html);
    		},

J'ai essayé en rajoutant des id dans mon html, mais ce n'est pas ca qui fait non plus...
Comment je pourrait faire pour par exemple prendre une partie du html? Car au bilan actuel, je sais tout récupérer ou parfois certains contenus textuels.

Heu... c'est quoi le but ? Tu es sensé faire quoi du html récupéré par la requête Ajax ?

Vérifie la syntaxe de ton code HTML. Peut être est-il mal formé. C'est de l'xHTML ou du HTML ?

moust a écrit :
Heu... c'est quoi le but ? Tu es sensé faire quoi du html récupéré par la requête Ajax ?

En fait j'ai une page portfolio.php qui contient des vignettes et une zone d'aperçu. Les vignettes sont générées en fonction d'un fichier xml qui contient la liste complète des images. Ces vignettes ont un lien tel que ?name=nomimage. Au chargement de la page je vérifie en php s'il y a une variable get ou non, name servant d'id, je cherche ensuite les info correspondantes dans le fichier xml, pour afficher la bonne image dans l'aperçu.

C'est encore en local, mais ca marche, je voulais y ajouter de l'ajax pour apprendre, tester et ajouter un petit plus à cette page de galerie.

JDW a écrit :
Vérifie la syntaxe de ton code HTML. Peut être est-il mal formé. C'est de l'xHTML ou du HTML ?

C'est de l'html5, ca serait les nouvelles balises qui ne passeraient pas dans le js?

<!DOCTYPE HTML>
<html lang="fr" id="content">
	<head>
		<meta charset="utf-8"/>
		<meta name="author" content="#jim"/>
		<title>Prestig'Clean</title>
		<link href="./templates/default/screen/screen.css" rel="stylesheet" type="text/css" media="screen"/>
		<link href="iphone.css" rel="stylesheet" type="text/css" media="screen"/>
		<link href="handheld.css" rel="stylesheet" type="text/css" media="handheld"/>
		<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
		<script src="./scripts/box/clearbox.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
		<script src="./scripts/navigation.js" type="text/javascript"></script>
		<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
	</head>
	<body>
		<header>
			<h1><a href="">#jim</a></h1> 
			<nav>
								<ul>
					<li><a href="index.php">Accueil</a></li>
					<li><a href="portfolio.php">Réalisations</a></li>
					<li><a href="cv.php">CV</a></li>
					<li><a href="contact.php">Contact</a></li>
				</ul>
			</nav>
		</header>
		<section id="contenusection">
			<article><h1>Réalisations</h1>
				<ul id="thumbs" style="list-style-type:none;">
				<li><a class="thumbs" href="?name=prestig-clean-logo"><img src="./images/portfolio/thumbs/prestig-clean-logo.jpg" alt="Prestig'Clean" /></a></li><li><a class="thumbs" href="?name=self-vectorisation"><img src="./images/portfolio/thumbs/self-vectorisation.jpg" alt="Self Vectorisation" /></a></li><li><a class="thumbs" href="?name=cuisine-3d"><img src="./images/portfolio/thumbs/cuisine-3d.jpg" alt="création 3d verre et couverts" /></a></li><li><a class="thumbs" href="?name=clones"><img src="./images/portfolio/thumbs/clones.jpg" alt="création 3d verre et couverts" /></a></li><li><a class="thumbs" href="?name=caricature-3d"><img src="./images/portfolio/thumbs/caricature-3d.jpg" alt="création 3d verre et couverts" /></a></li><li><a class="thumbs" href="?name=e-business-center"><img src="./images/portfolio/thumbs/e-business-center.jpg" alt="e-Business Center" /></a></li>				</ul>
			</article>
			<article><h1 id="options">Prestig'Clean</h1>
				<img id="viewer" src="./images/portfolio/slides/prestig-clean-logo.jpg" alt="Prestig'Clean" />			</article>
		</section>
		<aside id="aside">
			<p><fb:like href="www.test.com" layout="button_count" show_faces="false"></fb:like></p>
			<p><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></p>
		</aside>
		<footer>
			Copyright © 2010  <a href="index.php">Accueil</a> | <a href="portfolio.php">Réalisations</a> | <a href="cv.php">CV</a> | <a href="contact.php">Contact</a> | <a href="droit.php">Droits d'auteur</a> | <a href="vieprivee.php">Vie privée</a>
		</footer>
	</body>
</html>

Si j'ai bien compris : Vous lancez une requête ajax sur votre page avec en GET un nom d'image.
Pour cela, vous appelez "portfolio.php", car il sait en php charger le bon aperçu.

Le click qui lance votre requête est donc sur vos miniature. C'est ça ?

Si j'ai bon : vous dites que votre php récupère les infos en XML. Alors autant appeler en Ajax votre fichier XML, il sera bien plus simple à parser (ça fonctionne avec "find"). Il vous suffit de préciser le dataType correct dans votre appel ajax.

$.ajax({
  url:"votreXml.xml",
  dataType:"xml",
  success:function(xml){
     $(xml).find("noeud_NomImage").text();
  }});

Oui dans mon .js je suis parti du click sur le lien en récupérant l'href.
Par contre je pensais pouvoir justement éviter l'accès une deuxième fois au fichier xml (utilisé une fois dans ma page portfolio.php pour ceux qui n'ont pas js d'activé) et alors une seconde fois dans le js pour ceux qui ont js activé.

Si c'est plus simple, alors ok, par contre en php je sais comment parser le xml avec simplexml, mais avec jquery je n'ai jamais fait ca.

Il faudrait faire un array ou une boucle for each et vérifier si l'attribut name correspond, et si oui récupérer les autres attributs de l'img? C'est quoi la méthode la plus propre pour faire ce genre de tache?

voilà à quoi ressemble mon fichier xml pour l'instant:

<?xml version="1.0"?>
<portfolio>
    <img name="self-vectorisation" title="Self Vectorisation" comment="Portrait numérique" date="10 décembre 2010" url=""/>
    <img name="prestig-clean-logo" title="Prestig'Clean" comment="logo" date="22 décembre 2010" url=""/>
</portfolio>

Merci d'essayer de m'aider! parce que je la je rame, j'ai encore essayé d'afficher en alert le contenu d'un autre h1 en partant sur son id, et la pas de résultat, j'en viens à me demander pourquoi ca a fonctionné sur l'autre...
Modifié par #jim (14 Jan 2011 - 17:58)

Vous pouvez le parser comme le HTML. Voila un exemple décomposé :

var monUrl = $(xml).find("portfolio").find("img").eq(0).attr("url");

À ta place je ferai plus simple :

Une page PHP qui attends l'id (le nom de l'image). Qui va chercher les informations de l'image dans le fichier XML qui qui affiche ses résultats au format JSON (fonction PHP json_encode() ).
La requête Ajax appelle donc cette page en lui transmettant l'id image et récupère le contenu, donc les données JSON.
Enfin, côté javascript tu n'a plus qu'à exploiter les données en les affichant à tes souhaits dans la page.
L'avantage c'est que tu te retrouve directement avec des données exploitables en javascript et que tu n'as pas à aller picorer dans une masse de HTML.

Merci pour vos réponses, je suis content d'apprendre!
Je m'excuse par ailleurs de ne pas avoir répondu plus tôt, je n'ai pas su venir hier.

Moust >> J'avai déjà lu que le json fonctionnait très bien avec javascript, mais par rapport au xml, qu'est ce qu'on y gagne? N'y a t il pas d'inconvénients? Si c'est préférable, ca sera pour moi l'occasion d'essayer.

Voilà j'ai essayé avec json, et c'est vrai que c'est facile.
Si je charge avec la fonction ajax la page xmltojson.php en donnant la variable name, je recois bien les différentes variables que j'attends.
Mais j'ai besoin de mon autre fonction ajax pour charger la page html, pour réattribuer les variable issues du json.

J'ai voulu imbriquer les fonctions ajax, ca fonctionne mais ca ne doit pas être très propre non?

voici mon js

		$(document).ready(function(){
	$("#thumbs a").click(function() {
    	$name=$(this).attr("href").substring(6);
    	newsrcviewer="./images/portfolio/slides/"+$name+".jpg";
    	$.ajax({
    		type:"GET",
    		data:"name="+$name,
    		cache:false,
    		success:function(html)
    		{
//		    	$.ajax({
//		    		type:"GET",
//		    		url:"./php/xmltojson.php",
//		    		data:"name="+$name,
//		    		dataType: 'json',
//		    		cache:false,
//		    		success:function(data)
//		    		{
//		    			$title=data.title;
//		    			alert(data.comment+data.name+data.title+data.date+data.url);
//		    		},
//		    		error:function(XMLHttpRequest,textStatus,errorThrown){
//		    			alert(textStatus);
//		    		}
//		    	});
	   			actualiserviewer(html);
			},
    		error:function(XMLHttpRequest,textStatus,errorThrown){
    			alert(textStatus);
    		}
    	})
    	return false;
    });
});
function actualiserviewer(html){
	$("#viewer").fadeOut(500,function(){
		var $this=$(this);
		$this.empty();
		$this.attr("src",newsrcviewer);
		$this.attr("alt",$title);
		$this.fadeIn()	
	});
	$("#options").fadeOut(500,function(){
		var $this=$(this);
		$this.text($title);
		$this.fadeIn()	
	});
	document.title = $title;
}

Encore une question qui me vient, en utilisant la fonction ajax, on peut envoyer des variables avec data, n'y a t il pas moyen d'en recevoir directement? Genre un retour de fonction php? je demande ca pour savoir si ca serait possible d'intégrer d'une certaine facon le xmltojson.php directement dans ma page portfolio.php (les variables ne seraient vérifiées et cherchées une seule fois) ?

Encore merci j'ai bien avancé grace à vous!