Je combine deux fonctions en une seule fonction et je dois transmettre la valeur de mon id de calla() à callb() afin que callb() puisse également utiliser cette information dans son appel AJAX. Quand il s'agissait de deux fonctions différentes, un bouton a été cliqué qui a déclenché ma fonction callb() et lui a passé le id. Maintenant qu'il s'agit d'une seule fonction avec deux appels, je ne sais pas comment transmettre cela.

Je sais que ça va être un type d'écouteur d'événement, mais quand j'enveloppe callb() dans un jQuery(document).load( alors il me dit que callb() n'est pas défini. Si je supprime callb(), il n'exécute pas du tout la fonction.

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';
          
          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
        }
      });
    }

    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }
    
    callA();
    callB();
  }
});

Tentative de code alternatif pour function b

jQuery(document).load(function callB(id) {
  jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    data: {
      action: 'options_function',
      cid: id
    },
    success: function(data) {
      jQuery(data).after('#cid_' + id)
      console.log(data);
      console.log(id);
    }
  });
});

callA();
//  callB();

EDIT 1- Ajoutez callb au succès de calla

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';
          
          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
            
    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }
            
            
        }
      });
    }


    
    callA();
   callB();   /* <<<<<<<<<<< tried with this commented out or on, doesnt matter/*
  }
});

Edit 2 - Code du bouton d'origine

<a href="javascript:void(0)" id="options-btn" class="button" onclick="function callB('+ value.id+')" data-id="'+ value.id+'"> </a>
javascript jquery ajax
0
user14955679 14 janv. 2021 à 00:13

2 réponses

Meilleure réponse

Ce qui vous facilitera la vie, c'est que vous pouvez définir une fonction à un endroit, puis l'appeler plus tard d'un autre endroit. Vous n'avez pas besoin de définir vos fonctions dans un bloc if, ni même dans votre callback document.load. Vous pouvez définir vos fonctions au niveau le plus élevé de votre script.

Un exemple simplifié:

function callA() {
 // ... code ...
}

function callB() {
 // ... code ...
}

jQuery(document).on('popup/show', (event, id) => {
  // you can run callA and/or callB however you want
});

Si vous souhaitez exécuter callA, qui effectue un appel AJAX, puis obtenir des données et les transmettre à callB, vous voudrez utiliser le modèle de rappel comme ceci:

function callA(callback) {
  jQuery.ajax({
    // ... ajax options ...
    success: function(data) {
      var id = jQuery().data('id');
      // you can pass functions as arguments to other functions! :)
      callback(id);
    }
  });
}

function callB(id) {
  // ... use 'id' here ...
}

jQuery(document).on('popup/show', (event, id) => {
  // pass callB as the callback to callA
  // callB will run after in callA's ajax success method
  callA(callB);
});
1
bmdev 13 janv. 2021 à 21:53

AJAX est asynchrone, vous appelez donc callB() avant que l'appel AJAX dans callA() ne soit terminé.

Pour utiliser la variable id dans callA(), vous devez appeler callB() depuis la fonction de réussite callA().

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';

          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
          callB(id);
        }
      });
    }

    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }

    callA();
  }
});
1
Barmar 13 janv. 2021 à 21:56
65709877

Questions connexes

30 Existe-t-il une fonction «existe» pour jQuery?
28 Quelle est la meilleure façon d'ajouter des options à une sélection en tant qu'objet JS avec jQuery?
26 Définir une valeur de paramètre par défaut pour une fonction JavaScript
29 Comment obtenir la valeur des paramètres GET?
30 Récupérer le texte sélectionné dans une liste déroulante (case de sélection) à l'aide de jQuery
31 jQuery Obtenir l'option sélectionnée dans la liste déroulante

De nouvelles questions

2 Modifier le texte de la plage avec l'option sélectionnée
1 Convertir un tableau en carte ou en tableau 2D
1 SyntaxError: jeton inattendu u dans JSON à la position 0 sur JSON.parse
4 Changer le texte de l'espace réservé toutes les deux secondes dans React
1 URL dynamique des tables de données à partir d'un clic sur le bouton
2 Comment inverser un objet imbriqué d'objets
4 Comment ajuster la valeur du jeu de requêtes Django?
1 conversion de la structure de données dans JS
1 Comment modifier la taille d'une toile lors du redimensionnement et de la suppression de la barre latérale?
1 Existe-t-il un moyen d'interdire le défilement de l'écran lors du déplacement de type d'entrée = plage?
Toutes les questions sur javascript >

javascript

Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.

Plus à propos javascript...