jQuery - *variable* is not defined

Question

I was wondering if anyone could help clear up this issue I am having.

I have been trying all morning to get a Facebook share button to work with dynamic parameters unique to the video that was being played on the page at the time.

I think the following should work but I am getting the error: share_title is not defined.

I then tried setting the contents of a div to the contents of the ajax response and then setting the params variable to the contents of that div so that the variables would be accessible within the FB.ui function but that didn't seem to work either.

Does anyone have any ideas?

$('.share_button').live('click', function(e){
    $('#player').fadeOut('slow');
    var share_id = $(this).attr('id');

    $.ajax({
        type: 'GET',
        url: '/youtube.php',
        data: 'share='+ share_id,
        success: function(data) {
            //$('#params').html(data);
            //params = $('#params').html();
            param = data.split('--');
            share_title = param[0];
            share_description = param[1];
            share_picture = param[2];
            share_views = param[3];
        }
    });
    e.preventDefault();
    FB.ui(
    {       
        method: 'feed',
        name: share_title,
        link: 'http://www.facebook.com',
        picture: share_picture,
        caption: share_views,
        description: share_description
    },
    function(response) {
        $('#player').show('slow');     
    });
});

Answer 1

The $.ajax call is asynchronous. You should make the call to FB.ui in the success callback, which is called when the AJAX request has succeeded:

$.ajax({
    type: 'GET',
    url: '/youtube.php',
    data: 'share='+ share_id,
    success: function(data) {
        param = data.split('--');
        share_title = param[0];
        share_description = param[1];
        share_picture = param[2];
        share_views = param[3];

        FB.ui({       
            method: 'feed',
            name: share_title,
            link: 'http://www.facebook.com',
            picture: share_picture,
            caption: share_views,
            description: share_description
        },
        function(response) {
            $('#player').show('slow');     
        });
    }
});

Answer 2

You need to put the FB.ui call in the AJAX callback.

$('.share_button').live('click', function(e) {
    $('#player').fadeOut('slow');
    var share_id = $(this).attr('id');

    $.ajax({
        type: 'GET',
        url: '/youtube.php',
        data: 'share=' + share_id,
        success: function(data) {
            //$('#params').html(data);
            //params = $('#params').html();
            param = data.split('--');
            share_title = param[0];
            share_description = param[1];
            share_picture = param[2];
            share_views = param[3];

            FB.ui({
                method: 'feed',
                name: share_title,
                link: 'http://www.facebook.com',
                picture: share_picture,
                caption: share_views,
                description: share_description
            }, function(response) {
                $('#player').show('slow');
            });
        }
    });
    e.preventDefault();
});

AJAX is asynchronous. The call to $.ajax returns before the HTTP request has completed (i.e. before the success callback has executed), and the program flow continues. This means that, in this situation;

1. Your initiating the AJAX request via $.ajax
2. You're calling e.preventDefault()
3. You're calling FB.ui
4. Sometime later, the AJAX request completes, and the share_title is populated.

FYI, you should also declare you're variables; otherwise you're making them implicit globals, which are bad;

$('.share_button').live('click', function(e) {
    $('#player').fadeOut('slow');
    var share_id = $(this).attr('id');
    var share_title;
    var share_... // do all your other share_*'s here as well.

    $.ajax({
        type: 'GET',
        url: '/youtube.php',
        data: 'share=' + share_id,
        success: function(data) {
            //$('#params').html(data);
            //params = $('#params').html();
            param = data.split('--');
            share_title = param[0];
            share_description = param[1];
            share_picture = param[2];
            share_views = param[3];

            FB.ui({
                method: 'feed',
                name: share_title,
                link: 'http://www.facebook.com',
                picture: share_picture,
                caption: share_views,
                description: share_description
            }, function(response) {
                $('#player').show('slow');
            });
        }
    });
    e.preventDefault();
});