How do I enqueue multiple Wordpress AJAX scripts in my functions.php file?

Question

I am currently trying to enqueue 2 Wordpress AJAX scripts in my functions.php file, but I seem to have hit an error. The first AJAX script works fine, but for the second I keep getting a 500 Internal Server Error.

What I have so far in my AJAX scripts is this:

This first block is for my first AJAX script located in my-ajax-script.js .

function lesson_watched_call(lesson_id_value) {  
    console.log('Lesson watched fn called.');
    console.log(lesson_id_value);
    $.post(my_ajax_obj.ajax_url, {
        _ajax_nonce: my_ajax_obj.nonce,  // nonce
        action: "lesson_watched", // action call
        lesson_value: lesson_id_value // data
    });
}

This second block is for my second AJAX script located in fav-ajax-script.js .

function toggleFavTut(tutorial_id_value) {  
    console.log('Tutorial toggle fn called.');
    console.log(tutorial_id_value);
    $.post(my_ajax_obj.ajax_url, {
        _ajax_nonce: my_ajax_obj.nonce,  // nonce
        action: "tutorial_fav_toggle", // action call
        tutorial_value: tutorial_id_value // data
    });
}

In my functions.php file, this is what I have:

/*---------------------------------------------------------------------------------*/
/*  Enqeue AJAX Script and Define Lesson Watched Function  */
/*---------------------------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_scripts' );
function enqueue_ajax_scripts() {

  wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
  wp_localize_script( 'ajax-script', 'my_ajax_obj',
          array( 'ajax_url' => admin_url( 'admin-ajax.php' ),
                 'nonce'    => wp_create_nonce( 'lesson_nonce_value' ),
          ) 
        );

  wp_enqueue_script( 'ajax-script2', get_template_directory_uri() . '/js/fav-ajax-script.js', array('jquery') );
  wp_localize_script( 'ajax-script2', 'my_ajax_obj',
          array( 'ajax_url' => admin_url( 'admin-ajax.php' ),
                 'nonce'    => wp_create_nonce( 'tutorial_nonce_value' ),
          ) 
        );
}

function lesson_watched() {
    $lastValue_php = wp_unslash( $_POST['lesson_value'] );
    $current_user_id = get_current_user_id();

    $found = get_user_meta( $current_user_id, 'lessons_watched_ids', true );

    if ( !in_array( $lastValue_php, $found ) ) :
      if( empty( $found ) ) :  
        update_user_meta( $current_user_id, 'lessons_watched_ids', array( $lastValue_php ) );
      else :
        $found[] = $lastValue_php;
        update_user_meta( $current_user_id, 'lessons_watched_ids', $found );
      endif;
    endif;

    wp_die(); // Ends all AJAX handlers
}

add_action('wp_ajax_nopriv_lesson_watched', 'lesson_watched');
add_action('wp_ajax_lesson_watched', 'lesson_watched');

/*---------------------------------------------------------------------------------*/
/*  Enqeue AJAX Script and Define Tutorial Toggle Function  */
/*---------------------------------------------------------------------------------*/
function tutorial_fav_toggle() {
  $tutorial_value = wp_unslash( $_POST['tutorial_value'] );
  $current_user_id = get_current_user_id();

  $found = get_user_meta( $current_user_id, 'tutorial_favorited_ids', true );

  if ( !in_array( $tutorial_value, $found ) ) :
    $found[] = $tutorial_value;
    update_user_meta( $current_user_id, 'tutorial_favorited_ids', $found );
  else:
    $key = array_search( $tutorial_value, $found );
    unset( $found[$key] );
    update_user_meta( $current_user_id, 'tutorial_favorited_ids', $found );
  endif;

  wp_die(); // Ends all AJAX handlers
}

add_action('wp_ajax_nopriv_tutorial_fav_toggle', 'tutorial_fav_toggle');
add_action('wp_ajax_tutorial_fav_toggle', 'tutorial_fav_toggle');

I first start out by enqueueing both scripts and then localizing each script. I'm wondering if maybe I have to use a different variable for some of the localize variables, but I am not certain about that. Would you have an tips on what to try to debug?

Answer 1

Per the docs , the second parameter to wp_localize_script should be unique.

$object_name is the name of the variable which will contain the data. Note that this should be unique to both the script and to the plugin or theme. Thus, the value here should be properly prefixed with the slug or another unique value, to prevent conflicts.

So, following your pattern the second function could use my_ajax_obj2 for the variable.

  wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
  wp_localize_script( 'ajax-script', 'my_ajax_obj',
          array( 'ajax_url' => admin_url( 'admin-ajax.php' ),
                 'nonce'    => wp_create_nonce( 'lesson_nonce_value' ),
          ) 
        );

  wp_enqueue_script( 'ajax-script2', get_template_directory_uri() . '/js/fav-ajax-script.js', array('jquery') );
  wp_localize_script( 'ajax-script2', 'my_ajax_obj2',
          array( 'ajax_url' => admin_url( 'admin-ajax.php' ),
                 'nonce'    => wp_create_nonce( 'tutorial_nonce_value' ),
          ) 
        );

Do take care to make your variable specific to your application, too. These variables all effectively are just properties on the global window object and everything can read/write them, so make sure they are unique.