ajax-loaded htmlからtwitterウィジェットをロードしますか？

Question

私はストレートTwitterのサイトから、かなり標準の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> 

をそして、それはそうのようにロードされたばかりだ：それはしかし表示されません

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

、それがいるようです画面を空白にして永久にロードしてください。アイデア？

Answer 1

同じ問題がありました。問題は、Twitter JSがdocument.writeを使用してマークアップを作成することです。これはドキュメントの生成中にのみ機能します。それ以外の場合は、新しい文書が作成されます。

ヒント：デバッグ中に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> 

これは私のソリューションです。 idパラメータを追加すると、TwitterはそのIDを持つ要素にマークアップを追加します（これはトップdivのものです）。

注：スクリプトの縮小版に問題がありましたので、代わりにhttp://twitter.com/javascripts/widgets/widget.jsを使用しました。

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