11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Tester existence d'un div ajouté par jquery: length toujours

Bonjour,

J'ai un problème pour tester l'existence d'un div que j'ai ajouté via jquery (et ajax). Si je crée le div dans le document html ça fonctionne, mais si le div est ajouté par jquery (à l'aide de .after) alors il ne le trouve pas.

Voilà un bout de code qui teste si le div #albumXX existe:

var split = this.search.split('='); //on récupère l'id envoyé par le lien ?album=id
var divAlbum = $('#album'+split[1]);
if(divAlbum.length){
	divAlbum.slideToggle();
}
else{
	//autre chose se passe...
}


Et comme j'expliquais ci-dessus, le div en question #albumXX est ajouté via Ajax et jquery:
success: function(data){
	var miniatures = ''; //je ne note pas tout ici, c'est le contenu du div (des images)
	$('#itemAlbum'+data.idAlbum).after('<div id="#album'+data.idAlbum + '">' + miniatures + '</div>');
}


Voyez-vous le problème? Le divAlbum.length fait toujours 0, que le div soit affiché ou non! Est-ce parce qu'il n'est pas dans le fichier html mais provient de l'ajout via .after???
Modifié par lefaye (10 Jul 2014 - 14:38)
Ouais, ça ne m'aide pas beaucoup, est-ce que je peux mélanger jquery et document.createElement()?

Je vais plutôt essayer de créer le div vide dans la page html, puis d'y insérer du contenu.

Mais le problème risque bien de rester: comment vérifier si le div contient quelque chose qui a été ajouté par jquery?
Ben à toi de voir l'équivalent en JQuery. Et oui, tu peux mélanger les instructions "classiques" et le JQuery.

Le lien explique qu'il faut utiliser une fonction bien particulière pour que ton DOM reste manipulable par la suite.
D'après ce que j'ai vu, l'équivalent en JQuery c'est la fonction que j'utilise (after, appendTo, html ou je ne sais quelle autre).

Je vais donc essayer avec document.createElement, en espérant que ce que je crée soit davantage manipulable...

Remarque: j'ai vu que ce qui est ajouté par JQuery n'apparaît pas dans le code source (ctrl+U) par contre ça apparaît dans le code visible depuis l'extension Web Developer.
Bon, ça fonctionne!

Voilà ce que j'ai fait de différent que mon premier message:

1) le div albumXX n'est plus créé par JQuery, mais directement dans le html
2) le JQuery devient donc ainsi:
success: function(data){
	var miniatures = ''; //je ne note pas tout ici, c'est le contenu du div (des images)
	divAlbum.append(miniatures); //pas de div ici !!! seulement le contenu ajouté dans le div existant
}

3) création dans le div #albumXX d'un span #testAlbumXX via javascript document.CreateElement
var span = document.createElement("span");
span.id = 'testAlbum'+data.idAlbum; //le idAlbum vient de la requête Ajax
emplacement = document.getElementById('album'+data.idAlbum);
emplacement.appendChild(span);

4) on peut tester avec JQuery la présence du span:
var split = this.search.split('='); //on récupère l'id envoyé par le lien ?album=id
var testAlbum = $('#testAlbum'+split[1]);
if(testAlbum.length){
	divAlbum.slideToggle();
}
else{
	//autre chose se passe...
}

Remarque finale: le span n'est créé que s'il n'existe pas (logique), et le div rempli via JQuery que si le span n'existe pas. Ainsi, le div n'est rempli qu'une fois (avec requête Ajax), ensuite il est affiché ou caché sans qu'Ajax soit relancé.

Merci donc pour ton aide et pour le lien proposé!
Sujet clos
Aller à