I have written a plugin which has a usermanagement page in the backend. This page loads userdata from the database by an AJAX call. The data returned from this function does contain HTML with class references to a javascript library.

For my usermanagement page I have enqueued all required javascript libraries, but they do not work on the data loaded by the AJAX call:

functions.php

...

if ( $_GET['page'] == 'test_usermanagement' ) {
  wp_register_script('usermanagement', plugins_url('/js/usermanagement.js', __FILE__), array('jquery') );
        wp_enqueue_script('usermanagement', plugins_url('/js/usermanagement.js', __FILE__), array('jquery') );

        wp_register_script('usermanagement_select', plugins_url('/js/select2.min.js', __FILE__), array('jquery') );
        wp_enqueue_script('usermanagement_select', plugins_url('/js/select2.min.js', __FILE__), array('jquery') );

}

...

add_options_page(
    'User Management',
    'User Management',
    'manage_options',
    'test_usermanagement',
    'test_usermanagement_page'
);

...

function test_usermanagement_page() {

...

}

...

function test_loadUsers() {
   echo "<select name='user_select[]' class='usermanagement_select' multiple='multiple'>";
   $ajaxdata_users_select = $wpdb->get_results("SELECT id as ...
   $count = 0;
   $foreach($ajaxdata_users_select as userdata) {
        echo "<option value='".$ajaxdata_users_select[$count]->user_id ."</option>";
   ...
   echo "</select>";
}

usermanagement.js

jQuery(document).ready(function($) {
    $('.usermanagement_select').select2();
});

...

   var usersStartIndex = 0;

   $.ajax({
       type: 'POST',
        url: ajaxurl,
        data: {
          action: 'test_loadUsers',
          $_usersStartIndex: usersStartIndex,
        },
        success: function(html){
          console.log('success');
          $('#results').html(html);
        }
     });

Unfortunately this way the library "select2" is not working on my select box. If I put the select box directly into the function mpbs_usermanagement2_page(), it does.

What do I have to get it working?

Thanks in advance. Regards Lars

I have written a plugin which has a usermanagement page in the backend. This page loads userdata from the database by an AJAX call. The data returned from this function does contain HTML with class references to a javascript library.

For my usermanagement page I have enqueued all required javascript libraries, but they do not work on the data loaded by the AJAX call:

functions.php

...

if ( $_GET['page'] == 'test_usermanagement' ) {
  wp_register_script('usermanagement', plugins_url('/js/usermanagement.js', __FILE__), array('jquery') );
        wp_enqueue_script('usermanagement', plugins_url('/js/usermanagement.js', __FILE__), array('jquery') );

        wp_register_script('usermanagement_select', plugins_url('/js/select2.min.js', __FILE__), array('jquery') );
        wp_enqueue_script('usermanagement_select', plugins_url('/js/select2.min.js', __FILE__), array('jquery') );

}

...

add_options_page(
    'User Management',
    'User Management',
    'manage_options',
    'test_usermanagement',
    'test_usermanagement_page'
);

...

function test_usermanagement_page() {

...

}

...

function test_loadUsers() {
   echo "<select name='user_select[]' class='usermanagement_select' multiple='multiple'>";
   $ajaxdata_users_select = $wpdb->get_results("SELECT id as ...
   $count = 0;
   $foreach($ajaxdata_users_select as userdata) {
        echo "<option value='".$ajaxdata_users_select[$count]->user_id ."</option>";
   ...
   echo "</select>";
}

usermanagement.js

jQuery(document).ready(function($) {
    $('.usermanagement_select').select2();
});

...

   var usersStartIndex = 0;

   $.ajax({
       type: 'POST',
        url: ajaxurl,
        data: {
          action: 'test_loadUsers',
          $_usersStartIndex: usersStartIndex,
        },
        success: function(html){
          console.log('success');
          $('#results').html(html);
        }
     });

Unfortunately this way the library "select2" is not working on my select box. If I put the select box directly into the function mpbs_usermanagement2_page(), it does.

What do I have to get it working?

Thanks in advance. Regards Lars

• plugin-development
• ajax
• wp-enqueue-script

• 1 When you add select2 to an element it will only add it to elements on the page. Any new elements added later will need select2 added to them after they're added. So you should bind select2 to the results in your success function. – Jacob Peattie Commented May 24, 2019 at 2:06
• Thanks for your answer... So that means that I need to call wp_enqueue_script() from the success function again? – Gardinero Commented May 24, 2019 at 14:45
• Eh? No. The success function is in your JS: success: function(html){ You need to run .select2() on any new items in the resuts. – Jacob Peattie Commented May 24, 2019 at 14:49

1 Answer 1

So, the success function in the ajax function has to look like the following:

success: function(html){
          console.log('success');
          $( '#results' ).html(html);
          $( '#results .usermanagement_select' ).select2({tags: true});
        }