Question

How can I load the twitter below on via AJAX loaded page?

I have the twitter widget on a page called 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>

the html,

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

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

the jquery,

$(document).ready(function(){

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

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

    });

the error message on firebug,

TWTR is not defined [Break On This Error] (17 out of range 16)

How can I get around to this?

Answer 1

iframe is the solution I think:

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

});

Works perfectly.