[Résolu] Wrapper un contenu ajax

Bonjour,

Je souhaiterais entourer un contenu appelé via ajax afin qu'il soit affiché dans une popin (pas une popup...), il faut donc que le contenu soit entouré par :

'<section id="popin" class="popin">' + leContenu + '<a href="" id="cmd-popin"></a></section>'

Le code est appelé dans une div :

<div class="ajax-window-popin"></div>

Pour vous donner une idée je vous mets un exemple en ligne : TEST AJAX, édit : désormais OK

J'ai tout d'abord essayé ceci :

$('.ajax-popin').click(function() {
	// Ouverture dans une fenêtre ajax globale pour toutes les popins
	$('.ajax-window-popin').load('./Ajax/'+$(this).attr("id") + '.php');
	$('.ajax-window-popin').wrapAll('<section id="popin" class="popin"/>')
		.after('<a href="" id="cmd-popin"></a>');
	return false;
});

À première vu "ça fonctionne"... à ceci près que le contenu est entouré avec la div .ajax-window-popin dans laquelle il est appelé. Ce qui n'est pas bon bien sûr, car on ne peut plus réitérer l'appel par la suite : si l'on "ferme" le contenu avec un .hide() la fenêtre d'appel se "volatilise" par la même occasion.

Du coup j'ai essayé de cibler les enfants avec .children() :

$('.ajax-popin').click(function() {
	// Ouverture dans une fenêtre ajax globale pour toutes les popins
	$('.ajax-window-popin').load('./Ajax/'+$(this).attr("id") + '.php');
	$('.ajax-window-popin').children().wrapAll('<section id="popin" class="popin"/>')
		.after('<a href="" id="cmd-popin"></a>');
	return false;
});

Aucun effet...

J'avais essayé aussi ceci, mais ça ne fonctionne pas au premier appel, l'objet n'a pas le temps d'être mappé, il faut attendre un second click :

$('.ajax-popin').click(function() {
	// Ouverture dans une fenêtre ajax globale pour toutes les popins
	var obj = $('.ajax-window-popin').load('./Ajax/'+$(this).attr("id") + '.php');
	$('.ajax-window-popin').prepend('<section id="popin" class="popin">' + obj + '<a href="" id="cmd-popin"></a></section>');
	return false;
});

Merci pour votre analyse.
Modifié par Olivier C (01 Dec 2018 - 13:22)

Bonjour.

J'avoue ne pas avoir tout compris, donc je me lance un peu au hasard :
Si tu testes avec avec wrapInner() ?

Bonjour SolidSnake, et merci de passer par ici.

Je cherche à obtenir ceci :

<section id="popin" class="popin"/>
    <!-- LE CONTENU AJAX -->
    <a href="" id="cmd-popin"></div>
</section>

Et surtout pas ceci (le cas présent) :

<section id="popin" class="popin"/>
    <div class="ajax-window-popin">
        <!-- LE CONTENU AJAX -->
        <a href="" id="cmd-popin"></div>
    </div>
</section>

J'avais essayé .wrapInner(), mais sans résultat :

$('.ajax-popin').click(function() {
	// Ouverture dans une fenêtre ajax globale pour toutes les popins
	$('.ajax-window-popin').load('./Ajax/'+$(this).attr("id") + '.php')
		.wrapInner('<section id="popin" class="popin"/>')
		.after('<a href="" id="cmd-popin"></a>');
	return false;
});

Ce qui est bizarre, c'est que ça marche presque. La fenêtre est mappée... puis s'affiche finalement comme le résultat du premier bouton de ma page d'exemple.
Modifié par Olivier C (23 Mar 2015 - 09:58)

J'ai trouvé un exemple en ligne qui fait parfaitement ce que je veux :

$('.ajax-popin').click(function() {
	var response;
	$.ajax({ type: "GET",   
		url: './Ajax/' +$(this).attr("id") + '.php',
		async: false,
		success : function(text)
		{
			response = text;
		}
	});
	$('.ajax-window-popin').prepend('<section id="popin" class="popin">' + response + '<a href="" id="cmd-popin"></a></section>');
});

Ce code fonctionne grâce au paramètre async réglé à false afin de chainer les actions. Mais ce paramètre est déprécié depuis quelque temps. En admettant que je garde ce code, je ne sais comment remplacer ce paramètre...
Modifié par Olivier C (23 Mar 2015 - 10:24)

C'est bon, j'ai trouvé, et je vous prie de croire que ça n'a pas été sans mal...

Le code précédent m'a mis sur la voie. Étant donné qu'il s'agit d'un appel ajax, il fallait inclure les méthodes dans une fonction passée en paramètre de .load() :

$('.ajax-popin').click(function() {
	// Ouverture dans une fenêtre ajax globale pour toutes les popins
	$('.ajax-window-popin')
		.load('./Ajax/' + $(this).attr("id") + '.php', function() {
	$(this).wrapInner('<section id="popin" class="popin"/>')
		.children().children().after('<a href="" id="cmd-popin"/>');
	});
	return false;
});