使用 js/jquery 将数据值从内部 function 传递到内部 function

Question

I am combining two functions into a single function and need to pass the value of my id from calla() to callb() so callb() can also use that information in its AJAX call. When these were two different functions, a button was clicked which triggered my callb() function and passed the id to it. Now that they are one single function with two calls, I am uncertain how to pass this along.

I know it's going to be some type of event listener but when I wrap callb() in a jQuery(document).load( then it tells me callb() is undefined. If I remove callb() then it doesn't run the function at all.

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();
  }
});

Attempted alternate code for 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- Add callb into the success of 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 - Original button code

<a href="javascript:void(0)" id="options-btn" class="button" onclick="function callB('+ value.id+')" data-id="'+ value.id+'"> </a>

Answer 1

AJAX is asynchronous, so you're calling callB() before the AJAX call in callA() has completed.

In order to use the id variable in callA() , you need to call callB() from within the callA() success function.

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();
  }
});

Answer 2

What will make your life easier, is that you can define a function in one place, then call it later from another place. You don't need to define your functions inside an if block, or even inside your document.load callback. You can define your functions at the top-most level of your script.

A simplified example:

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

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

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

If you want to run callA, which makes an AJAX call, then get some data and pass it to callB, you'll want to use the callback pattern like this:

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);
});