Question

I have function:

    function get_playlist(){    

        var result = jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            dataType: 'json',
            data: {
                action: 'getrandommp3',
                nonce:'<?php echo wp_create_nonce( 'randmp3' ); ?>'
            },
            success: function(response) {
                console.log(response); // All OK!
                window.response = response;
                var customvar = response;
                return response;
            }               
        });
        console.log(window.response); // undefined
        console.log(result.responseText); //undefined
        console.log(customvar); //undefined
        return window.response; // returning undefined
    }

I need to return json variable from function. Inside success: function(response) { responce have needed content. But outside of Jquery.ajax i have problems…

This code needed for jquery mp3 player…

var playlist = get_playlist(); 
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options); 
myPlaylist.shuffle(true, true);

Thank you for help!

Answer 1

This is the way AJAX works (asynchronously). The console.log statements outside of the success event handler are executed before the response has been returned (so nothing has been assigned to window.response yet). Put the code that relies on the AJAX response inside the success event handler.

Alternatively, you could make the request synchronous, but that’s usually not what you want as it can lock the browser until the response is returned.

Update (see comments and edit to question)

As I mentioned previously, you need to put all code that relies on the AJAX response inside the ready event handler:

function get_playlist(){    
    var result = jQuery.ajax({
        //Other AJAX options removed
        success: function(response) {
            var myPlaylist = new jPlayerPlaylist(cssSelector, response, options); 
            myPlaylist.shuffle(true, true);
        }               
    });
}