Metodi del widget di Twitter per l'aggiornamento dinamico dei widget

Question

Sto cercando di aggiungere un'opzione a una pagina del profilo per il widget di Twitter e ho un campo in cui gli utenti possono aggiungere i loro account Twitter e sotto mostra un'anteprima del widget. Funziona bene se inserisco un account e faccio clic su Salva e ritorno. Ma quello che sto cercando di fare è renderlo dinamico, per aggiornare il widget con l'account corrispondente quando l'evento si verifica nel campo di testo.

Ho il codice seguente:

var twitterWidget = new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 'auto', 
    height: 300, 
    theme: { 
    shell: { 
     background: '#cccccc', 
     color: '#333333' 
     }, 
    tweets: { 
     background: '#ffffff', 
     color: '#333333', 
     links: '#0099cc' 
     } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    behavior: 'all' 
    } 
}); 
twitterWidget.setUser(twitterUser).render().start(); 

    $('#twitter_widget_id').change(function(){   
     twitterWidget.setUser($(this).val()).render().start(); 
    }); 

In questo caso funziona male: mostra solo i nuovi tweet da tutti gli account che sono entrata e in generale che sto ricevendo un widget vuoto.

Se elimino l'oggetto e ne creo uno nuovo, rende vuota la pagina e quindi aggiunge il widget.

Qualcuno conosce alcuni metodi pubblici per il TWTR.Widget() come re-rendering() o qualcosa del genere?

Grazie.

Answer 1

Il codice sorgente del widget Twitter documentato è disponibile al numero http://twitter.com/javascripts/widgets/widget.js e la sua lettura vi dirà tutto ciò che è necessario sapere su come manipolare il suo comportamento. In breve, il widget funziona in questo modo:

Quando il widget viene creato per la prima volta con new TWTR.Widget chiama .init() e prende nota di dove è incorporato nella pagina, inserendo il codice HTML del widget nel DOM in quella posizione. (Si presuppone sempre che tu stia incorporando, ed è per questo che se crei un nuovo widget in uno script principale o nel contesto della finestra finirà per incorporare se stesso nella radice della finestra.)

Ma, tu puoi ancora creare il widget usando una funzione (purché sia ​​chiamata dallo script incorporato) e quindi tieni un riferimento al widget per dopo. Quando chiami .render() in seguito, il widget si ricompone da solo ovunque si trovi.

Esistono alcuni metodi pseudo-privati ​​sull'oggetto TWTR che è possibile provare per divertimento, come ad esempio _getWidgetHtml(), che è chiamato da .render() ma non è necessario utilizzarli.

Ho appena scritto il seguente codice e funziona bene per me. Chiama questa funzione dal tuo script incorporato (come mostrato), quindi richiamalo più tardi con un nuovo parametro di ricerca per ri-renderlo.

<div id="my_widget_region"> 
    <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
    <script>do_twitter_widget('"#winning" or "justin bieber"');</script> 
</div> 

function do_twitter_widget(search_query, title, subtitle) { 
    if (!window.widgetRef) { 
    window.widgetRef = new TWTR.Widget({ 
     version: 2, 
     type: 'search', 
     search: search_query, 
     interval: 6000, 
     title: title || 'Tweets related to', 
     subject: subtitle || search_query, 
     width: 'auto', 
     height: 500, 
     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, 
     behavior: 'default' 
     }, 
     ready: function() { 
     // when done rendering... 
     } 
    }); 

    window.widgetRef 
     .render() 
     .start(); 
    } 
    else { 
    if (search_query != window.old_twitter_search) { 
     window.widgetRef 
     .stop() 
     .setSearch(search_query) 
     .setTitle(title || 'Tweets related to') 
     .setCaption(subtitle || search_query) 
     .render() 
     .start(); 
    } 
    } 

    window.old_twitter_search = search_query; 

    return window.widgetRef; 
} 

Answer 2

È possibile ricaricare il widget solo creando una nuova istanza utilizzando i parametri "id" come id HTML dell'elemento widget.

Esemplare di seguito. (Funziona bene per me)

window.twitterCreateOrUpdateProfile = function (username) { 

    var opts = { 
     version: 2, 
     type: 'profile', 
     rpp: 4, 
     interval: 30000, 
     width: 298, 
     height: 320, 
     theme: { 
      shell: { 
       background: '#86b9d1', 
       color: '#ffffff' 
      }, 
      tweets: { 
       background: '#ffffff', 
       color: '#444444', 
       links: '#0b0d0d' 
      } 
     }, 
     features: { 
      scrollbar: true, 
      loop: false, 
      live: false, 
      behavior: 'all' 
     } 
    }; 

    if (window.twitterCreateOrUpdateProfile.instance) { 
     opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id; 
    } 
    window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts); 
    window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start(); 
} 
window.twitterCreateOrUpdateProfile('evaisse');