Résultat POST invisible dans html

Version imprimable

02/03/2011, 16h37
Alixe80

Résultat POST invisible dans html

Bonjour,

j'ai fait une petite page internet ou l'utilisateur choisit une categorie dans un menu et via ajax post, suivant ce qu'il choisit, j'affiche une sous-categorie. Tout va bien au niveau de l'affichage sur la page, mais je remarque cependant, que quand je fais un affichage de ma source html, les sous-categorie n'apparaisse pas. C'est normal?

D'avance merci
02/03/2011, 16h44
Bovino

Oui c'est normal.
Par défaut, les navigateurs affichent la source de la page au moment de son chargement.
Pour voir la source actualisée, tu peux utiliser par exemple Web Developper ou Firebug pour Firefox.
02/03/2011, 16h56
Alixe80

ok, mais mon problème est que du coup, quand le visiteur clique sur cette sous-catégorie, je veux refaire un post via jquery/ajax en envoyant la sous-catégorie et afficher la liste des éléments de cette sous-catégorie, mais c'est impossible.
C'est comme si aucune donnée n'était envoyée. J'ai fait le test en écrivant en dur, en html, les sous-catégories et là, ça fonctionne, le contenu s'affiche au clic de l'utilisateur. :roll:
02/03/2011, 17h02
SpaceFrog

sans doute une creation dynamique d'elements de form en innerHTML ?
Le elements ne sont alors pas reconnus pas le DOM
02/03/2011, 23h49
Samolo
Bonjour,

je suppose que votre sous catégorie contient des éléments html 'input', et que ces elements sont injecté par ajax donc c'est normal que celà ne fonctionne pas, pour les raisons cité par SpaceFrog, pour faire fonctionner ces sous catégorie il faut y rajouter un evenement en utilisant .live()
Code:

1 2 3 $(".sous_categorie").live("click",function() {alert("ma valeur de sous categorie"+$(this).val();)});

Bonjour,

pour être plus claire, voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(document).ready(function() {
 
  	$("#categorie li a").click(function() {
		var id = $(this).attr('id').split("_");
		var id = id[1];
		var cat = $(this).text();
 
		$.get ("ajax.php", {"idCategorie": id, "nomCategorie": cat, "action": "getChoix"}, function(data){
			$('#choix').html(data);
		});
    return false;
	});   
 
	$("#choix li").click(function() {
		alert ('ok');
....

Si maintenant j'écris

Code:

1
2
3
4
 
$("#choix li").live("click",function(){
alert ('ok');
...

Il m'indique un message d'erreur disant que cet objet ne gère pas cette propriété ou cette méthode....

Quelle est ta version de jquery car .live a été implanté à la version 1.3:
http://api.jquery.com/live

Code:

1
2
3
4
5
 
//code alternatif
$("li","#choix").live("click",function(){
alert ('ok');
});

Sinon il te reste une solution c'est de mettre l'evenement dans le success ou le complete de ton appel ajax comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function() {
 
  	$("#categorie li a").click(function() {
		var id = $(this).attr('id').split("_");
		var id = id[1];
		var cat = $(this).text();
 
		$.get ("ajax.php", {"idCategorie": id, "nomCategorie": cat, "action": "getChoix"}, function(data){
		       $('#choix').html(data);
                       //une fois les donnees chargees, je lui donne l'evenement
                       $("#choix li").click(function() {alert ('ok');});
		});
    return false;
	});