Tải tiện ích twitter từ ajax-loaded html?

Question

Tôi đang cố gắng sử dụng một widget tìm kiếm twitter khá chuẩn, trực tiếp từ trang web twitter:

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'search', 
    search: '$AAPL', 
    interval: 6000, 
    title: 'AAPL', 
    subject: '', 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#8ec1da', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#ffffff', 
     color: '#444444', 
     links: '#1985b5' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: true, 
    live: true, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    toptweets: true, 
    behavior: 'default' 
    } 
}).render().start(); 
</script> 

Và nó nhận được nạp như vậy:

$(".linktosymbol").bind("ajax:success", function(event, data, status, xhr) { 
    $(".symboldetails").html(""); 
    var target = $("#" + $(this).attr('data-target')); 
    target.html(data); 
}); 

Nó không bao giờ xuất hiện, mặc dù nó có vẻ chỉ cần bỏ trống màn hình và tiếp tục tải mãi mãi. Ý tưởng?

Answer 1

Đã xảy ra sự cố tương tự. Vấn đề là Twitter JS tạo đánh dấu bằng cách sử dụng document.write, chỉ hoạt động khi tài liệu đang được tạo. Nếu không, nó sẽ tạo một tài liệu mới.

Mẹo: Trong khi gỡ lỗi, việc sử dụng mã ban đầu dễ dàng hơn tại http://twitter.com/javascripts/widgets/widget.js.

<div id="twtr-widget"></div> 
<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 500, 
    height: 300, 
    id: 'twtr-widget', 
    theme: { 
    shell: { 
     background: '#333333', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#000000', 
     color: '#ffffff', 
     links: '#4aed05' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: false, 
    behavior: 'all' 
    } 
}).render().setUser('Znarkus').start(); 
</script> 

Đó là giải pháp của tôi. Thêm thông số id và Twitter sẽ thêm đánh dấu vào phần tử có id đó (đó là số div hàng đầu cho).

Lưu ý: Tôi gặp sự cố với phiên bản rút gọn của tập lệnh, vì vậy tôi đã sử dụng http://twitter.com/javascripts/widgets/widget.js để thay thế.

Answer 2

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#333333', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#000000', 
     color: '#ffffff', 
     links: '#4aed05' 
    } 
    }, 
    features: { 
    scrollbar: true, 
    loop: false, 
    live: true, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    behavior: 'all' 
    } 
}).render().setUser('roby_jazz').start(); 
</script> 

Answer 3

$('#Twitter').click(function (e) { 
    $.getScript 
    (
     "http://widgets.twimg.com/j/2/widget.js", 
     function() { 
     makeTwitterWidget(); 
     } 
    ); 
}); 

function makeTwitterWidget() { 
new TWTR.Widget 
    (
     { 
      version: 2, 
      type: 'profile', 
      rpp: 3, 
      interval: 3000, 
      width: 'auto', 
      height: 300, 
      id: 'twtr-widget', // id of DIV 
      theme: 
     { 
      shell: 
       { 
        background: '#ff0000', 
        color: '#ffffff' 
       }, 
      tweets: 
       { 
        background: '#ffffff', 
        color: '#000000', 
        links: '#ff0000' 
       } 
     }, 
      features: 
      { 
       scrollbar: false, 
       loop: true, 
       live: true, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'default' 
      } 
     } 
    ).render().setUser('sohelelite').start(); 
}