Métodos de widget de Twitter para la actualización dinámica de widgets

Question

Estoy tratando de agregar una opción a una página de perfil para widget de Twitter y tengo un campo donde los usuarios pueden agregar sus cuentas de twitter y debajo muestra una vista previa del widget. Funciona bien si ingreso una cuenta y hago clic en guardar y volver. Pero lo que estoy tratando de hacer es hacerlo dinámico, para actualizar el widget con la cuenta correspondiente cuando ocurra el evento blur en el campo de texto.

Tengo el siguiente código:

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

En este caso funciona mal: sólo se muestran las más recientes tweets de todas las cuentas que entré y, en general, que estoy recibiendo un widget de vacío.

Si borro el objeto y creo uno nuevo, deja la página en blanco y luego agrega el widget.

¿Alguien conoce algunos métodos públicos para TWTR.Widget() como re-render() o algo así?

Gracias.

Answer 1

El código fuente del widget de Twitter documentado está disponible en http://twitter.com/javascripts/widgets/widget.js y leerlo le dirá todo lo que necesita saber sobre cómo manipular su comportamiento. En resumen, el widget funciona así:

Cuando el widget se crea por primera vez con new TWTR.Widget llama al .init() y toma nota de dónde está incrustado en la página, insertando el código HTML del widget en el DOM en esa posición. (Siempre asume que está incrustando, por lo que si crea un nuevo widget en un script principal o en el contexto de la ventana, terminará incrustándose en la raíz de la ventana.)

Pero, usted todavía puede crear el widget utilizando una función (siempre que se invoque desde el script incrustado) y luego retener una referencia al widget para más adelante. Cuando llamas al .render() más tarde, el widget simplemente se renueva donde sea que esté.

Existen algunos métodos pseudo-privados en el objeto TWTR que puede probar por diversión, como _getWidgetHtml(), que se llama por .render() pero no debería necesitar usarlos.

Acabo de escribir el siguiente código, y me funciona bien. Llame a esta función desde su script incrustado (como se muestra), luego llámelo de nuevo más tarde con un nuevo parámetro de búsqueda para volver a procesarlo.

<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

Puede volver a cargar el widget creando una nueva instancia utilizando params "id" como id. Html del elemento del widget.

ejemplo a continuación. (Funciona bien para mí)

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');