Discussion :

[YvonBlais]

Bonjour à tous

Je travaille avec jQuery 1.6.1 et voici mon petit problème que je ne comprend pas. je vous fournis le code pour une meilleru compréhension.

j'insère dans une liste un élément en (1). Cet élément est connu de jQuery car je peux appliquer des opérations sur cet élément.

En (2), je place un appel a ajax() et j'insère dans la même liste. Aucundes 3 nouveaux éléments insèrés n'est reconnu par jQuery. Pourquoi?
Ou est l'erreur que je fais?
merci beaucoup pour votre aide

(1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('#select1').append( '<li id="9">9</li> ' );
 
function insertData( a ) {
	$('#select1').append( a );
}

(2)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$.ajax({
	dataType:'html',
	cache:true,
	type:'GET',
	url:"ajax/menu.php?list",
	success: function(r,s){
		insertData('<li id="10">10</li> ' );
		$('#select1').append( '<li id="8">8</li> ' );
	}
});

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#select1').append( $('<li id="8">8</li>') );

[danielhagnoul]

Bonsoir

Un ID doit être unique et il doit commencer par un caractère alphabétique.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ul id="listeID">
	<li id="li1">Un</li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$("#listeID").append('<li id="li2">Deux</li>');
 
// test 1
$("#listeID").children().each(function(i, item){
	console.log(i, this.id, $(this).text());
});
 
// test 2
$("#li2").css("color", "red");

[SpaceFrog]

:red:
j'ai honte de faire du copier coller comme ça !!!

j'ai même pas vu l'id nulérique

Milles excuses ..

[YvonBlais]

J'ai finalement trouvé la réponse à mon problème.

Je suis d'accord que le ID doit etre unique et qu'il doit commencer par un caractère alpha, mais c'étatit pas la question que je posais. La question était au niveau de l'évaluation AJAX.

Alors, si j'ai bien compris. Ajax fait un appel asynchone au serveur HTTP et lorsque la réponse retourne du serveur, le success: est éxécuté commme dans un THREAD. Nous ne sommes donc plus dans le CONTEXTE de jQuery.

En ajoutant un ASYNC: FALSE a la requête AJAX, cela force de conserver le contexte de jQuery

Merci quand même des réponses reçues

[Bovino]

Nous ne sommes donc plus dans le CONTEXTE de jQuery.

Bien sûr que si...

En ajoutant un ASYNC: FALSE a la requête AJAX, cela force de conserver le contexte de jQuery

Non, ça force juste à attendre que le serveur ai renvoyé sa réponse pour continuer les traitements, ce que tu ne faisais manifestement pas avant.
Il faut bien comprendre que lorsque tu fais une requête au serveur, tu n'obtiens pas de résultat instantanément comme par magie, il faut attendre que la requête soit acheminée, que le serveur travaille, qu'il envoie la réponse et que le navigateur la reçoive. Donc si pendant ce temps tu essayes d'utiliser les résultats qui ne sont pas encore arrivés, ben forcément, ça marche moins bien

Mais cela, on ne pouvait pas le deviner tant que tu ne l'avais pas dit...

[YvonBlais]

Merci Bovino pour ta réponse

Bien sûr que si...


Non, ça force juste à attendre que le serveur ai renvoyé sa réponse pour continuer les traitements, ce que tu ne faisais manifestement pas avant.
Il faut bien comprendre que lorsque tu fais une requête au serveur, tu n'obtiens pas de résultat instantanément comme par magie, il faut attendre que la requête soit acheminée, que le serveur travaille, qu'il envoie la réponse et que le navigateur la reçoive. Donc si pendant ce temps tu essayes d'utiliser les résultats qui ne sont pas encore arrivés, ben forcément, ça marche moins bien

Mais cela, on ne pouvait pas le deviner tant que tu ne l'avais pas dit...

Je sais très bien que les données doivent être transmises au serveur et que le serveur doit retourné la reponse à la requête.

Si tu regardes le code sur le POST initial, je traitais l'information retourné par le serveur sur comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
	dataType:'html',
	cache:true,
	async:false,
	type:'GET',
	url:"ajax/menu.php?list",
	success: function(r,s){
		insertData('<li id="10">10</li> ' );
		$('#select1').append( '<li id="A8">A8</li> ' );
	}
});

Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.

Salut,

Jpense que tu fais une fause interprétation du problème.
Que ca soit synchrone ou pas ca a rien avoir avec le contexte de jQuery.

Synchrone ca veut dire que tant que ton callback est pas exécuté tu passes pas à la suite du code.
Asynchrone ca veut dire que tu continues ton stuff et un beau jour tu executes le callback.

Alors c'est sur que si tu fais une asynchrone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	dataType:'html',
	cache:true,
	type:'GET',
	url:"ajax/menu.php?list",
	success: function(r,s){
		insertData('<li id="10">10</li> ' );
		$('#select1').append( '<li id="A8">A8</li> ' );
	}
});
//et que derriere tenquilles
$('#select1').remove();

forcément quand ton callback success est appelé, c'est très probable que ton navigateur a eu le temps de défoncer ton select.

Chose qui n'est pas possible en synchrone vu que tu exécutes pas $('#select1').remove();
tant que tu n'as pas eu de callback.

Je me souviens d'ailleurs que la synchrone fait friser le navigateur mais c'était jQuery il y a trois ans, cela dit, je vois pas cqu'ils auraient pu faire de mieux compte tenu de la nature du langage.

Bref, il serait préférable que tu mettes ton code javascript où tu testes ton truc ET ton code html.

[Bovino]

Si tu regardes le code sur le POST initial, je traitais l'information retourné par le serveur sur comme suit

Comme le fait remarquer galerien69, la question n'est pas de savoir quand les données sont intégrées à la page mais quand tu essayes de les traiter !

Alors, si je suis toujours dans le contexte de jQuery, pourquoi est-ce que si j'insère les données retournées par le serveur avec une requete AJAX ASYNC:true, les données sont insèrées mais jQuery ne les reconnait pas, et si je le fais avec ASYNC:false, jQuery les reconnait.

Soit parce que ton ordinateur est au-dessus d'un ancien cimetière de chats noirs indiens, soit parce que tu tentes de traiter les éléments avant que le callback ai été appelé...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#select1').append($(a) );

tu passes un string de html ...