jQuery - * переменная * не определена

Question

Мне было интересно, может ли кто-нибудь помочь разобраться с этой проблемой.

Я все утро пытался заставить кнопку «Поделиться» на Facebook работать с динамическими параметрами, уникальными для видео, на котором воспроизводился фильм.страница в то время.

Я думаю, что должно работать следующее, но я получаю сообщение об ошибке: share_title не определено.

Затем я попытался установить содержимое div в содержимоеответа ajax, а затем установив переменную params для содержимого этого div, чтобы переменные были доступны в функции FB.ui, но это тоже не сработало.

У кого-нибудь естьесть идеи?

$('.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

Вызов $.ajax является асинхронным.Вы должны сделать вызов FB.ui в обратном вызове success, который вызывается при успешном выполнении запроса AJAX:

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

Вы должны поместить вызов FB.ui в обратный вызов AJAX.

$('.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 асинхронный. Вызов $.ajax возвращает до выполнения HTTP-запроса (т.е. до выполнения обратного вызова success), и выполнение программы продолжается. Это означает, что в этой ситуации

1. Ваш инициирует запрос AJAX через $.ajax
2. Вы звоните e.preventDefault()
3. Вы звоните FB.ui
4. Через некоторое время позже AJAX-запрос завершается, и share_title заполняется.

К вашему сведению, вы также должны объявить, что вы переменные; иначе вы делаете их неявные глобалы, которые являются плохими ;

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