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');     
    });
});

score 5 · Answer 1 · answered Dec 20 '11 at 11:52

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');     
        });
    }
});

score 4 · Accepted Answer · edited May 23 '17 at 10:27

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;

Your initiating the AJAX request via $.ajax
You're calling e.preventDefault()
You're calling FB.ui
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();
});

ah, that makes sense now. thanks so much for your help. I was going nuts! reasons the variables weren't declared as `vars` was because I was seeing if it made any difference if I took it out but don't need to worry about that now. Great answer. — martincarlin87, Dec 20 '11 at 12:06

jQuery - *variable* is not defined

2 Answers2

jQuery - variable is not defined