2

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?

3 Answers 3

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();
}
7
  • Thanks heaps Jacob. It works now. One small thing it still response with the '0'. It displays: function is loading in div0. Any ideas why the '0' is there?
    – aido14
    Jul 26, 2017 at 3:45
  • Make sure to include wp_die() in your callback once everything has finished. I left that out. I've updated my answer with it. Jul 26, 2017 at 3:47
  • Hope on not push it, but how would I pass a value form the link to the function. For example I wanted to pass the title to the link to a vlue in function?
    – aido14
    Jul 26, 2017 at 3:55
  • You would need to put the value in the data object in the ajax request, 'next to' the 'action', then it will be available in the $_POST variable in your hook. Jul 26, 2017 at 5:37
  • Thanks for that, yes I worked it out. But I user $_REQUEST. Seems to be working OK. But I just realized that I can't load any styles or scripts into my div.user_response. Could this be reason? Do you know how I could load styles and scripts into my ajax div. Going a bit mad here trying. First time using AJAX never knew it wouldn't load styles/scripts.
    – aido14
    Jul 26, 2017 at 12:12
1

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.

3
  • 1
    Thank you Jack, I just tested and it works too. I'm actually only requiring for logged in users but I can see the advantage.
    – aido14
    Jul 26, 2017 at 4:04
  • You're welcome :) Just in case you need Ajax search or login in the future ;)
    – Johansson
    Jul 26, 2017 at 4:05
  • I actually have to do this soon,so cheers. One thing how would pull a parameter from the link in function? example:<a class="mylink" title="the title of page">link</a>. How to get the title(variable) in function?
    – aido14
    Jul 26, 2017 at 4:13
0

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

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.