Ré-executer un code en cas de succès de requête ajax

Par Genki, il y a 9 ans

Javascript

Bonjour,

Pour ceux qui traine sur le tchat, certains ont dû voir mon problème, non résolu pour le moment, alors qu'il paraît tout simple sur le papier, mais ça bloque..

Concrètement, en français :

J'ai un tableau avec des données, à la fin de chaque ligne <tr /> du tableau, j'ai un bouton, quand j'appuie sur ce bouton, ça me donne des informations relatives à cette ligne (dans un modal bootstrap). En dehors du tableau, j'ai un bouton qui va actualiser celui-ci (afin de récupérer les derniers enregistrements depuis la base de données, le tout traité en ajax) Donc à la fin de chaque ligne du tableau généré actualisé, il y a toujours ce fameux bouton qui m'affiche les informations, sauf que celui ci ne fonctionne pas comme je le voudrais. Vu qu'un code JS ne peux s'appliquer sur des éléments chargé dynamiquement après le DOM)

Grosso merdo, ce que j'ai actuellement fonctionne , le code s'exécute au chargement de la page, et également après avoir actualisé le tableau généré par l'ajax.
MAIS, ce code est le même pour les deux cas, il est redondant par conséquent, je pourrai le garder, mais si je pouvais trouver un moyen pour raccourcir, je suis toujours preneur.

Voilà le code (simplifié, pour une meilleure compréhension) :

// Code d'obtention des informations relatives à la ligne du tableau $('.sublogger').on('click', '.getUrl', function () { // On écoute le click sur le bouton du tableau $.post('./inc/callback.php?getResponse=logger', function (data) { // <-- récupère les infos relative à la ligne du bouton cliqué console.log(data); // On affiche les données dans modal (code simplifié par un simple console.log, mais c'est pas ça en vrai) }, "json"); }); // Code d'actualisation du tableau $(".refresh").click(function () { // On actualise le tableau $.post('./inc/callback.php?refresh=logger', function (data) { $(".refresh").parents('.panel').find('tbody').html(data); // On regénère chaque ligne du tableau par l'ajax }, "json").done(function () { // Ce code là, est le même que celui d'au dessus, il est redondant, je voudrai juste ne pas le dupliquer vu qu'il existe déjà $('.sublogger').on('click', '.getUrl', function () { // On écoute le click sur le bouton du NOUVEAU tableau $.post('./inc/callback.php?getResponse=logger', function (data) { // <-- récupère les infos de la NOUVELLE ligne console.log(data); // On affiche les informations dans le modal }, "json"); }); }); });

J'espère vraiment que mes explications sont claires, parce que y a pas à ce prendre la tête pour la compréhension du code, j'ai juste 2 codes
Code 1 qui s'execute au chargement de la page, et qui doit s'executer aussi dans le code 2 en cas de succès de la requête ajax.

On m'a proposé ça :

var maFunction1 = function() { //mon code... }(); // Qu'on execute au chargement de la page

Et on appelle maFunction1 dans le .done() du deuxième code. Cependant, ça ne fonctionne pas, pour je ne sais quelle raison :/
Voilà si vous pouviez m'aider, je reste dispo pour plus d'info si besoin

Merci :)

3 réponses

Genki, il y a 9 ans

Oui mais j'ai besoin de l'executer juste après l'avoir déclaré, donc que je mette les () ou que je fasse maFunction1(); ça change pas grand chose.
Ensuite si j'utilise cette méthode de var maFunction... et que je met maFunction1() dans le .done(), il me dit que maFunction is not a function. :/

PhiSyX, il y a 9 ans

Vu qu'un code JS ne peux s'appliquer sur des éléments chargé dynamiquement après le DOM

Tu parles d'événements ? En fait si, il peut sur les événements appellés avec la méthode .on('nomEvent') et non directement avec un événement type .nomEvent().

  • Event $('button').on('click') => Les boutons chargés dynamiquement seront affectés .
  • Event $('button').click() => Les boutons chargés dynamiquement ne seront pas affectés.

Pour preuve https://jsfiddle.net/5yyw0a45/ - À chaque click, il simule une requête et ajoute un nouveau contenu (qui est statique, certes) dans une div.content
Si l'évenement ne s'applique pas sur ton bouton chargé dynamiquement, c est peut-être que ta structure html qui a été chargé dynamiquement est mauvaise?

J'imagine que la structure de ton code html est plus complexe que celle que j'ai mise, est-ce que tu peux JSFiddle à ton tour pour voir à quoi ressemble ta structure? ^^

Genki, il y a 9 ans

Grafikart à résolu mon problème, au final, ça semble si simple :

var sublogger = function () { $('.sublogger').on('click', '.getUrl', function () { $.post('./inc/callback.php?getResponse=logger', function (data) { // On affiche les data }, "json"); }); } $(".refresh").click(function () { // On actualise le tableau $.post('./inc/callback.php?refresh=logger', function (data) { $(".refresh").parents('.panel').find('tbody').html(data); sublogger(); // On appel bien le code d'en haut pour l'executer }, "json"); }); sublogger(); // On l'execute aussi au chargement de la page