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>
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