AJAX लोड लोड एचटीएमएल से ट्विटर विजेट लोड करें?

Question

मैं एक सुंदर मानक चहचहाना खोज विजेट का उपयोग करने की कोशिश कर रहा हूँ सीधे चहचहाना साइट से:

<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

एक ही समस्या थी। समस्या यह है कि ट्विटर जेएस 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 पैरामीटर जोड़ें, और ट्विटर उस आईडी के साथ तत्व को मार्कअप जोड़ देगा (यही वह है जो शीर्ष 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(); 
}