11521 sujets

JavaScript, DOM et API Web HTML5

Appliquer un script sur un fichier html appelé via Ajax

salut,
c'est sans doute que c'est parce qu'il n'y a aucune écoute d'évènement dessus. Il faut réappliquer donc cet écoute une fois l'appel Ajax correctement effectué.
En fait je supputais ^^... J'imagine que tu utilises un évènement "onclick" ou autre pour faire en sorte de pouvoir manipuler ces range ? Si c'est le cas, tu dois réappliquer une écoute sur cet évènement comme si que tu le faisais pour la première fois.
L'idéal serait de mettre tes écoutes d'évènements dans une fonction que tu appelles au chargement de la page, puis à chaque chargement Ajax effectué.
Zelalsan a écrit :
En fait je supputais ^^... J'imagine que tu utilises un évènement "onclick" ou autre pour faire en sorte de pouvoir manipuler ces range ?

J'utilise .on().

Voici mon code pour le traitement de la balise range (mais ce n'est qu'un exemple, je voudrais que tout le code appelé puisse être traité, quelqu'il soit : bouton de formulaire, etc) :
(function($){
	$('.range').each(function(){
		var range = $(this);
		range.on('input', function(){
			range.next().text($(this).val());
		})
		.next().text(range.val());
	});
})(jQuery);

Pour la fenêtre ajax (c'est un exemple, j'ai encore deux autres appel similaires) :
$('.ajax-global').on('click', function(){
	var param = $(this).attr('id');
	// Ouverture dans une fenêtre ajax dédiée :
	$('.ajax-window').load('./Ajax/' + param + '.php');
});

Zelalsan a écrit :
Si c'est le cas, tu dois réappliquer une écoute sur cet évènement comme si que tu le faisais pour la première fois. L'idéal serait de mettre tes écoutes d'évènements dans une fonction que tu appelles au chargement de la page, puis à chaque chargement Ajax effectué.

C'est ici que ça coince, je ne sais pas comment faire cela. En effet je croyais que .on() servait déjà à attacher un écouteur d’événements à un objet jQuery, et que cette délégation d'événement fonctionnait aussi sur des éléments html appelés via ajax.
Je ne vais pas te mentir, je ne suis pas pro JQuery donc je ne m'y connais pas parfaitement. J'ai cherché vite fais sur le net et il semblerait que .on() prenne en charge les modifications du DOM vu qu'avant, il fallait passer par .live() et que cette méthode est dépréciée (ou alors je n'ai pas très bien compris).

Dans un cas JS pure, le principe consisterait à créer une fonction que tu nommes par exemple "setListeners" où tu places toutes les écoutes d'évènements. Puis, par la suite, tu l'appelles à chaque chargement Ajax réussi. Tu n'oublieras pas de l'appeler aussi au chargement de ta page :

function setListeners(){
	
	Ton_Element.addEventListener(...);
	Autre_Element.addEventListener(...);
	Encore_Un_Element.addEventListener(...);

}

window.addEventListener("load", setListeners, false);
Il faut utiliser la délégation et non pas attacher l'event directement sur ton objet.

$('.range').on('change', 'input', function(){

});

ou
$(document).on('change', '.range', function(){

});


Je connais pas la structure HTML, mais le second exemple devrait fonctionner. ^^
Modifié par Oken (25 Jun 2015 - 12:31)
Bonjour,

Merci pour votre aide. De mon côté je me suis rappelé une fonction utile : $.getScript(), j'y suis presque :
// Affichage dans une div généraliste
$('.ajax-global').on('click', function(){
	var param = $(this).attr('id');
	// Ouverture dans une fenêtre ajax généraliste :
	$('.ajax-window').load('./Ajax/' + param + '.php', function() {
		$.getScript( "./Scripts/Public/Scripts.js");
	});
});

Ça fonctionne... à ceci près que le fichier appelé se réapplique à l'ensemble du document, alors que moi je souhaite le limiter uniquement aux nouveaux éléments html appelés via Ajax (ceci afin de limiter les bugs).
Modifié par Olivier C (25 Jun 2015 - 19:56)
Sujet clos
Aller à