Multiple AJAX requests using the same ajax_object.ajaxurl

Question

I have a plugin that makes different AJAX calls, using the ajax_object.ajaxurl. Both AJAX requests are coded in the same file (emx-functions.js). It seems, however, that only one AJAX call is successfully firing. Am I limited to using the ajaxurl for only a single AJAX request, or can I configure all my AJAX requests with the same ajaxurl. I presume that the reason the other AJAX call isn't working is due to a conflict, as they are both using the same ajaxurl. Is that correct? Is there a better way to do this?

Here's how I'm setting up AJAX:

function load_ajax_scripts() {
  wp_enqueue_script( "emx-functions", plugin_dir_url( __FILE__ ) . 'emx-functions.js', array( 'jquery' ) );
  wp_localize_script( 'emx-functions', 'EMX', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_print_scripts', 'load_ajax_scripts');

Here's the code from the emx-functions.js file:

function disable_forms_ajax(){

  var disable;

  jQuery(document).ready(function(){

    // if checkbox checked
    if( jQuery('input[name="all_fields_or_not[]"]:visible:checked').length == 1 ){
      $disable = 'true';
      // take this out
      alert('checked');
    } else {
      $disable = 'false';
      // take this out
      alert('unchecked');
    }

        // get ticket_id
    $ticket_id = jQuery('[value="Save Coupons"]:visible')
                .parent()
                .parent()
                .children('input:first').val();

    var data = {
      action: 'hidden_form_fields',
      ticket_id: $ticket_id,
      disable: $disable
    };

    jQuery.post(EMX.ajaxurl, data, function(response) {
      alert(response);
    });
    return false;
  });
}

function available_coupons_ajax(){

    jQuery(document).ready( function($) {

      // get ticket_id
      $ticket_id = jQuery('[value="Save Coupons"]:visible')
                  .parent()
                  .parent()
                  .children('input:first').val();

      // get checked coupon elements
      $coupon_els = jQuery('input.button[value="Save Coupons"]')
                      .closest('form[name="ticket-coupons"]:visible')
                      .find('input:checked');

      // convert to array and get coupon codes
      $coupon_codes = Array.prototype.slice.call($coupon_els).map(function(el){
        return el.value.toLowerCase();
      });

      // prepare ajax call
      var data = {
        action: 'set_ticket_coupon_availability',
        ticket_id: $ticket_id,
        coupon_codes: $coupon_codes
      };

      // ajax call
      jQuery.post(EMX.ajaxurl, data, function(response) {
        alert(response);
      });
      return false;
    });

}

Thank you!

Answer 1

To clarify your doubt you localized variable will contains the same values until it is overriden.

In your case EMX.ajaxurl will be available throught the script. Ajax not happening at your intended event might be due to not executing the ajax function but definetly not due to EMX.ajaxurl. EMX.ajaxurl will contain the ajax url.

EMX.ajaxurl can be used for multiple times unless it is overriden. So I guess you are not calling you ajax function at the intended time correctly. You need to execute disable_forms_ajax(), available_coupons_ajax() whenever you wanted to make the ajax. Also please make sure is there any script error that prevents from making ajax.