Загрузить твиттер-виджет из ajax-загруженного html?

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

Была такая же проблема. Проблема в том, что 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 добавит разметку к элементу с этим идентификатором (для этого и предназначен верхний div).

Примечание: у меня были проблемы с минимизированной версией их скрипта, поэтому я использовал http://twitter.com/javascripts/widgets/widget.js.

Answer 2

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

Answer 3

<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>