Méthodes de widget Twitter pour la mise à jour dynamique des widgets

Je suis en train d'ajouter une option pour une page de profil pour widget twitter et j'ai un champ où les utilisateurs peuvent ajouter leurs comptes twitter et ci-dessous montre un aperçu du widget. Il fonctionne très bien si je entrer un compte et cliquez sur enregistrer et revenir. Mais ce que j'essaie de faire c'est dynamique, pour actualiser le widget correspondant au compte lors de l' flou événement se produit sur le champ texte.

J'ai le code suivant:

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

Dans ce cas, il fonctionne mal: il ne montre que les plus récents tweets de tous les comptes que je suis entré et en général j'obtiens un vide widget.

Si je supprime l'objet et de créer un nouveau, qu'il rend la page vierge, puis ajoute le widget.

Personne ne sait certaines méthodes publiques pour la TWTR.Widget() comme le re-render() ou quelque chose comme ça?

Grâce.

source d'informationauteur jorjap

  1. 21

    Documentée du widget Twitter le code source est disponible à http://twitter.com/javascripts/widgets/widget.js et la lecture à travers, il vous dira tout ce que vous devez savoir sur la façon de manipuler son comportement. Brièvement, le widget fonctionne comme ceci:

    Lorsque le widget est d'abord créé avec new TWTR.Widget il appelle .init() et prend note de l'endroit où il est intégré dans la page, l'insertion du widget code HTML dans les DOM à cette position. (On suppose toujours que vous êtes l'incorporation, qui est pourquoi si vous créez un nouveau widget dans une tête de script ou dans le cadre de la fenêtre, il finira par incorporation de lui-même à la racine de la fenêtre.)

    Mais, vous pouvez toujours créer le widget à l'aide d'une fonction (tant qu'il est appelé à partir du script intégré) et ensuite conserver une référence à l'widget pour plus tard. Lorsque vous appelez .render() plus tard le widget viens de re-rend lui-même partout où il se trouve.

    Il y a quelques pseudo-méthodes privées sur le TWTR objet que vous pouvez essayer pour le fun, comme _getWidgetHtml() - ce qui est appelé par .render() mais vous ne devriez pas avoir à l'utiliser.

    Je viens d'écrire le code suivant, et il fonctionne bien pour moi. Appeler cette fonction à partir de votre script intégré (comme illustré), puis d'appeler à nouveau plus tard avec un nouveau paramètre de recherche de re-rendre.

    <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;
}
  2. 1

    Vous pouvez simplement recharger le widget en créer une nouvelle instance à l'aide de "id" params html id du widget élément.

    Exemple ci-dessous. (Fonctionne très bien pour moi)

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