2

I'm trying how to figure out how to use AJAX correctly with Wordpress: (I've used it on other sites, but not in WP)

I have this code in functions.php of a theme:

function jquery_stuff() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('scriptname', get_bloginfo('template_url') . '/wibergsweb.js');
}
add_action( 'init', 'jquery_stuff');

//AJAX
add_action('wp_ajax_locationContent', 'locationContent');

function locationContent() {
    echo 'batman returns';
    die();
}

and this is what the jQuery looks like:

function loadLocationInfo(clickedOn) {   
        var locationId = clickedOn.next().attr('id');


        var locationContent = $.ajax({            
            type: 'POST',
            data:{
                action: 'locationContent',
                location_id: locationId
            },
            url: "/wp-admin/admin-ajax.php",
            dataType: 'json'
        });

        locationContent.done(function(data) {  
            alert('DONE');    
        });                        

        locationContent.fail(function(ts) {           
            alert('ERROR');
            clickedOn.next('.location-info').html(ts.responseText);
            $('body').css('cursor', 'pointer');
            clickedOn.css('cursor', 'pointer');
       });
    } 

    $(document).on('click', 'h3', function(e) {
        var tClicked = $(this);
        loadLocationInfo(tClicked);
    });

Why is the actual response returned in the fail-function? (Yes, the data is correctly returned. That's the weird part of it).

This is what happens:

1. ERROR is shown in alert-dialog. 
2. The .location-info div is set to 'batman returns'

If I don't have die() in the php like this:

function locationContent() {
    echo 'batman returns';    
}

Then a 0 is returned BUT that 0 is returned in the done()-function (incorrect data returned at expected place)

Why is the actual response returned in the fail-function and how do I solve this issue? (I can't figure out what's going on here)

6
  • Is this front-end or back-end? Apr 4 '14 at 11:12
  • back-end . admin-use only Apr 4 '14 at 11:47
  • 2
    Well there goes my theory that maybe you needed to be using wp_ajax_nopriv_. On occasion, I have had to go into admin-ajax.php and change the die() messages to give me more of a clue as to where they are failing. Don't forget to undo your changes though as that caused me a major headache once. Apr 4 '14 at 12:17
  • I just tried that, but still the same issue (in case it was som weird things going on with authentification) Apr 4 '14 at 12:18
  • Check tutorial for Wordpress: loading more posts via AJAX. Here is the link: github.com/tokmak/wp-load-more-ajax
    – tokmak
    Apr 4 '14 at 17:17
3

You are specifying the data type returned from the AJAX call to be JSON. However, the string you're returning ("batman begins") is not in JSON-format. Thus, the jQuery ajax-call will fail. Try passing your data as JSON using json_encode:

function locationContent() {
    echo json_encode( 'batman returns' );
    die();
}

This will fix your issue.

Furthermore, I can advise you to prefix your functions and adhere to the WordPress PHP Coding Standards (myplugin_locationcontent instead of locationContent, for example).

2
  • YES, thank you. It was as simple as that!!! :-) I thought the ajax-hooks were handling this automatically because some tutorials I have read did just put echo 'string' and did not do any json-encoding on the serverside. Thanks a lot! Apr 4 '14 at 20:03
  • I actually used json_encode in my first attempt, but then I didn't have die() in the end of the ajax-function... therefore the confusion. Apr 4 '14 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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