Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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)

share|improve this question
    
Is this front-end or back-end? –  helgatheviking Apr 4 at 11:12
    
back-end . admin-use only –  bestprogrammerintheworld Apr 4 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. –  helgatheviking Apr 4 at 12:17
    
I just tried that, but still the same issue (in case it was som weird things going on with authentification) –  bestprogrammerintheworld Apr 4 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 at 17:17

1 Answer 1

up vote 3 down vote accepted

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).

share|improve this answer
    
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! –  bestprogrammerintheworld Apr 4 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. –  bestprogrammerintheworld Apr 4 at 20:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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