Résultat POST invisible dans html

[Alixe80]

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

[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.

[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.

[SpaceFrog]

sans doute une creation dynamique d'elements de form en innerHTML ?
Le elements ne sont alors pas reconnus pas le DOM

[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();)});

[Alixe80]

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....

[Samolo]

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;
	});