11523 sujets

JavaScript, DOM et API Web HTML5

Appliquer un script sur un fichier appelé via Ajax

Bonjour,

En appuyant sur un bouton je déclenche l'appel d'un fichier .php via Ajax :
$('.ajax').click(function(){
	var param = $(this).attr("id");
	// Ouverture dans une fenêtre ajax dédiée :
	$('.ajax-window-' + param).load('./Ajax/' + param + '.php');
});

Ma question : Que dois-je ajouter à mon code afin que le fichier appelé puisse bénéficier des scripts déjà présents dans la page en cours ?

J'ai entendu parler des fonctions de rappel (callbacks), mais je ne sais pas par quel bout prendre le problème...
Salut, tu peux trouver ta réponse sur les callbacks dans la doc de jQuery: http://api.jquery.com/jquery.ajax/#callback-functions
Tu peux utiliser les méthodes inhérentes à $.ajax pour tester tes appels AJAX comme suit: 
$.ajax({
   url: 'tonurl.php',
   success: function(){
      //ta fonction de callback en cas de réussite de ta transaction
   },
   error: function(){
      //ta fonction en cas d'erreur 
   },
   complete: function(){
     //ta fonction de callback dans tous les cas
   }
})


Tu as aussi l'objet deferred et les promises qui te permettent de gérer tes requêtes asynchrones, voir à cette adresse: https://api.jquery.com/jquery.deferred/, sur les promises tu as cet article qui est vraiment bien fait et assez abordable: http://www.html5rocks.com/fr/tutorials/es6/promises/#toc-javascript-promises
Modifié par soldavox (03 May 2015 - 16:33)
soldavox a écrit :
Salut, tu peux trouver ta réponse sur les callbacks dans la doc de jQuery...

@Soldavox : Oui, bien sûr, sinon je n'en aurais pas parlé dans mon introduction avec ma question de départ. Merci aussi d'avoir recopié une partie de la spécification jQuery sur le sujet... mais je la connaissais déjà. Ne m'en veuillez pas, mais si j'ai posé une question sur le forum à partir d'un exemple concret c'est justement pour trouver une réponse concrète, même s'il ne s'agit que d'une piste.

@tous : Je sais que la méthode .live() était invoquée auparavant pour gérer les éléments ajouté ultérieurement à la page. Dans le cas qui nous occupe :
.live('click', function(){}

Depuis les versions récentes de jQuery cette méthode est dépréciée. Comment la remplacer ?
Je comprends pas pourquoi t'es aussi agressif alors que je te propose un coup de main...
Tu trouveras dans la doc de jQuery Smiley langue que live() a été remplacé par on():


 $(element).on('click', function(){});
soldavox a écrit :
Je comprends pas pourquoi t'es aussi agressif alors que je te propose un coup de main...

Ce n'est pas mon intention...
soldavox a écrit :
Tu trouveras dans la doc de jQuery Smiley langue que live() a été remplacé par on()

Oui, j'ai déjà tenté d'implémenter cette solution sur les fonctions concernées, sans succès pour l'instant.
Modifié par Olivier C (05 May 2015 - 23:38)
Tu ne donnes pas assez d'infos. Persollement je ne comprends pas vraiment ce que tu veux faire. Tu dis que tu as lu la doc de .on() mais à priori la réponse à ce que j'imagine que tu souhaites est montrée à la section "The event handler and its environment".


function appliquer_des_trucs() {
 /* applique tes scripts à tes éléments */
}

appliquer_des_trucs(); // chargement de la page, on applique des trucs sur les éléments

$(".ajax").on( "click", function(event) {
  event.preventDefault();
  var param = $(this).attr("id");
  // Ouverture dans une fenêtre ajax dédiée :
  $('.ajax-window-' + param).load('./Ajax/' + param + '.php');
  appliquer_des_truc(); // on réapplique les trucs sur les machins qui ont été rafraichis par load();
});

Modifié par lamext (04 May 2015 - 01:46)
lamext a écrit :
Tu ne donnes pas assez d'infos...

Effectivement. Voici donc un code avec une première fonction letter() qui devra s'appliquer avec .load() :
$(':header, legend, .h1, .h2, .h3, .h4, .h5, .h6, .addletter').each(function letter(){
	var string = $(this);
	var newString = string.html().replace(/(<([^>]+)>|[A-Z«»"]|&amp;)/gm, '<span class="letter">$1</span>'); // Ajout d'un span + class sur les caractères sélectionnés, filtrage des balises html
	string.html(newString);
});

$('.ajax').on('click', function(){
	var param = $(this).attr("id");
	// Ouverture dans une fenêtre ajax dédiée :
	$('.ajax-window-' + param).load('./Ajax/' + param + '.php');
	letter();
});

J'ai donc essayé d'appliquer letter() comme tu l'as proposé, mais j'échoue pour l'instant...
Le code que tu donnes ne correspond pas à l'exemple que je t'ai donné, ta fonction letter() n'est définie nulle part et la partie each(function letter() { ... }); n'a aucun sens. J'ai l'impression que tu essais de définir et utiliser la fonction en même temps (?).

Par contre j'ai fait une erreur dans mon exemple, j'aurais du appeler ma fonction appliquer_des_trucs() dans le callback de la méthode load().

Ce qui donne :


function appliquer_des_trucs() {
 /* applique tes scripts à tes éléments */
}

appliquer_des_trucs(); // chargement de la page, on applique des trucs sur les éléments

$(".ajax").on( "click", function(event) {
  event.preventDefault();
  var param = $(this).attr("id");
  // Ouverture dans une fenêtre ajax dédiée :
  $('.ajax-window-' + param).load('./Ajax/' + param + '.php',
    appliquer_des_truc() // on réapplique les trucs sur les machins qui ont été rafraichis par load();
  );
});

Modifié par lamext (04 May 2015 - 09:02)
Bonjour,

J'ai passé certaines de mes fonctions en plugins :
$.fn.letter = function(){.........};

... Pour ensuite tenter de les appeler via ajax, par exemple :
$('.ajax').on('click', function(){
	var param = $(this).attr("id");
	// Ouverture dans une fenêtre ajax dédiée :
	$('.ajax-window-' + param).load('./Ajax/' + param + '.php').letter();
});

En fait, il se passe bien quelque chose, mais cela ne redéfinit que les élements déjà présents avant l'appel Ajax...

Un exemple en ligne avec le code nu (celui définit dans mon premier topic) : Ajax test.
Modifié par Olivier C (06 May 2015 - 12:59)
Sujet clos
Aller à