I am trying to display a function using AJAX using a custom plugin. But doesn't seem to work.

My Javascript

(function($) {
$(document).on( 'click', 'a.mylink', function( event ) {
    $.ajax({
    url: testing.ajax_url,
        data : {
        action : 'diplay_user_table'
    },
    success : function( response ) {
        jQuery('#user_reponse').html( response );
    }


})
})
})(jQuery);

My PHP

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'test', 'testing', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}

add_action('wp_ajax_my_action', 'diplay_user_table');

function diplay_user_table() {
    echo "function is loading in div";
}

When I click on link it just displays '0'. Any ideas?

I am trying to display a function using AJAX using a custom plugin. But doesn't seem to work.

My Javascript

(function($) {
$(document).on( 'click', 'a.mylink', function( event ) {
    $.ajax({
    url: testing.ajax_url,
        data : {
        action : 'diplay_user_table'
    },
    success : function( response ) {
        jQuery('#user_reponse').html( response );
    }


})
})
})(jQuery);

My PHP

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'test', 'testing', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}

add_action('wp_ajax_my_action', 'diplay_user_table');

function diplay_user_table() {
    echo "function is loading in div";
}

When I click on link it just displays '0'. Any ideas?

• functions
• jquery
• ajax

Share Improve this question edited Jul 26, 2017 at 3:35 Johansson 15.4k1111 gold badges4343 silver badges7979 bronze badges asked Jul 26, 2017 at 2:42 aido14aido14 11722 silver badges1515 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 3

You're not hooking the function to wp_ajax correctly. You need to replace the my_action part with your action name that you're using the in AJAX request. In your case it's display_user_table. You also need to hook it on to wp_ajax_nopriv so that it works for logged out users. Here's your hook with those changes:

add_action('wp_ajax_diplay_user_table', 'diplay_user_table');
add_action('wp_ajax_nopriv_diplay_user_table', 'diplay_user_table');
function diplay_user_table() {
    echo "function is loading in div";
    wp_die();
}

You can use a faster and quicker method, to get rid of the annoying 0 that is chasing every AJAX request to the end. By using a REST API endpoint, you don't need to write different actions for logged-in and non-logged-in users.

Here is a quick example:

add_action( 'rest_api_init', function () {
    register_rest_route( 'aido14', '/my_path/', array(
            'methods' => 'GET', 
            'callback' => 'diplay_user_table' 
    ) );
});
// Callback function
function diplay_user_table() {
    $data['test1'] = "function is loading in div";
}
add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'test', 'testing', array(
        'ajax_url' => site_url()
    ));
}

And your JavaScript:

(function($) {
    $(document).on( 'click', 'a.mylink', function( event ) {
        $.ajax({
            url: testing.ajax_url + '/wp-json/aido14/my_path',
            data : { parameter-here : value-here 
        },
        success : function( response.test1 ) {
            jQuery('#user_reponse').html( response );
        }
    });
})
})(jQuery);

Now, you get the same result by visiting /wp-json/aido14/my_path. A neat JSON response which you can use even in mobile apps.

And, as you can see, you can pass several responses in a single request by storing them in an array. This will come in handy for example in contact and login forms.

Try running this code

add_action('wp_ajax_diplay_user_table', 'diplay_user_table');
add_action('wp_ajax_nopriv_diplay_user_table', 'diplay_user_table');
function diplay_user_table() {
    ob_start();
    echo "function is loading in div";
    $data = ob_get_clean();
    echo $data;
    die();

}