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

您需要將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。

僅供參考，你也應該聲明你是變量;否則你正在使他們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(); 
}); 

Answer 2

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