Загрузка твиттеров через jquery ajax - PullRequest
Новая
       0

Загрузка твиттеров через jquery ajax

2 голосов
/ 28 октября 2011

Как загрузить щебет ниже на странице, загруженной AJAX?

У меня есть виджет щебета на странице с именем twitter.php

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 455,
  height: 563,
  theme: {
    shell: {
      background: '#e70e6f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ccc8cc',
      color: '#ffffff',
      links: '#08a9cd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('gtteam').start();
</script>

html, 

<a href="#" class="load">click to load</a> 

<div id="container"></div>

jquery, 

$(document).ready(function(){

        $('.load').click(function(){

             $('#container').load('twitter.php');
             return false;
        });

    });

сообщение об ошибке в firebug,

TWTR не определено [Break On This Error] (17 вне диапазона 16)

Как мне обойти это?

Ответы [ 4 ]

5 голосов
/ 24 декабря 2011

Если вы хотите избежать использования iframe, вы можете добавить вызов widget.js на свою главную страницу, а затем добавить удерживающий div и параметр id в вызов twitter, и он должен работать. 

// stick this in your index.html page <head>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

// on the page called via ajax

<div id="twtr-widget"></div>
<script type="text/javascript">
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 6,
  interval: 6000,
  width: 300,
  height: 'auto',
  id: 'twtr-widget',
  theme: {
1 голос
/ 28 октября 2011

iframe - это решение, которое я думаю:

iframe.php 

<iframe src="twitter.php" marginheight="0" marginwidth="0" frameborder="0" 
style="border:0;height:600px;width:600px;" scrolling="no"   ></iframe>

twitter.php 

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 455,
  height: 563,
  theme: {
    shell: {
      background: '#e70e6f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ccc8cc',
      color: '#ffffff',
      links: '#08a9cd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('gtteam').start();
</script>

JQuery 

$(document).ready(function(){

    $('.load').click(function(){
        $('#container').load('iframe.php');
        return false;
    });

});

Отлично работает.

0 голосов
/ 10 апреля 2012

Загрузите ваш твиттер-асинхронный виджет, используя jQuery; загрузите и запустите скрипт 'widget.js', используя getScript () jQuery API как ... давайте сделаем асинхронный виджет красного твиттера готовым? 

$.getScript
(
    "http://widgets.twimg.com/j/2/widget.js",
    function () 
        {
            makeTwitterWidget();
        }
);

'makeTwitterWidget ()' - ваша функция для создания экземпляра Twitter в виде: 

function makeTwitterWidget() {
new TWTR.Widget
    (
        {
            version: 2,
            type: 'profile',
            rpp: 3,
            interval: 3000,
            width: 'auto',
            height: 300,
            id: 'twtr-widget',
            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('gtteam').start();

}

Вы можете создать собственный твиттер-виджет на http://twitter.com/about/resources/widgets/widget_list

0 голосов
/ 28 октября 2011

Похоже, та же политика происхождения . Ваш скрипт не может загружать другие скрипты из другого домена.

Чтобы обойти это, вы можете просто переместить загрузку твиттера на страницу, а не как часть Ajax. 

// stick this in your page <head>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

// then this can be loaded via Ajax.
<script>
new TWTR.Widget({
  // ...
}).render().setUser('gtteam').start();
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...