0

This is my code :

<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: "profile",rpp: 4,interval: 30000,width: 650,height: 202,theme: {shell: {background: "#7ee1fc",color: "#2e2e2e"},tweets: {background: "#ffffff",color: "#949494",links: "#009ece"}},features: {scrollbar: true,loop: false,vlive: false,hashtags: true,timestamp: true,avatars: false,behavior: "all"}}).render().setUser("microsoft").start();</script>

which load a twitter plugins (but this, in fact, doesnt matter). Well, now, If I wrote the whole code in a "string" and I append it by jQuery :

var myText='<script src="http://widgets.twimg.com/j/2/widget.js"><\/script><script>new TWTR.Widget({version: 2,type: "profile",rpp: 4,interval: 30000,width: 650,height: 202,theme: {shell: {background: "#7ee1fc",color: "#2e2e2e"},tweets: {background: "#ffffff",color: "#949494",links: "#009ece"}},features: {scrollbar: true,loop: false,vlive: false,hashtags: true,timestamp: true,avatars: false,behavior: "all"}}).render().setUser("microsoft").start();<\/script>'

$('#twitterContent').html(myText);

seems that it can't load it (I get an error, TWTR is not defined).

So why one version should works and the other one not? And how can I fix this trouble?

P.S. If you want test code, this is the fiddle.

markzzz
  • 47,390
  • 120
  • 299
  • 507
  • `<\/script>` ? I don't think you need to escape those in a string... – elclanrs Feb 27 '12 at 09:17
  • 1
    possible duplicate of [jQuery: Can't append – JJJ Feb 27 '12 at 09:17
  • @elclanrs: this is required -- the browser's parser would otherwise treat it as the end of ` – Salman A Feb 27 '12 at 09:23

2 Answers2

5

jQuery version:

$.getScript("http://widgets.twimg.com/j/2/widget.js", function() {
new TWTR.Widget({id: 'twitterContent',version: 2,type: "profile",rpp: 4,interval: 30000,width: 650,height: 202,theme: {shell: {background: "#7ee1fc",color: "#2e2e2e"},tweets: {background: "#ffffff",color: "#949494",links: "#009ece"}},features: {scrollbar: true,loop: false,vlive: false,hashtags: true,timestamp: true,avatars: false,behavior: "all"}}).render().setUser("microsoft").start();
})​;

FIDDLE

Salman A
  • 262,204
  • 82
  • 430
  • 521
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • I was writing exactly the same code but were faster. Congrat! :) – Marc Feb 27 '12 at 09:20
  • I'm getting this weird result where your JSFiddle is constantly erroring `attempt to run compile-and-go script on a cleared scope`. Is this the desired effect? – ShadowScripter Feb 27 '12 at 09:24
  • @Marc is'nt that annoying. Been there, more than once! – adeneo Feb 27 '12 at 09:24
  • This will clear the document content and replace every thing with the twitter content! – Salman A Feb 27 '12 at 09:29
  • @ShadowScripter - Nope, that was not the desired effect, it's working just fine here, and I don't seem to be able to reproduce anything like that in JSFiddle? Can't think of any reasons why it shouldn't work either. – adeneo Feb 27 '12 at 09:30
  • @SalmanA - edited my answer, just missing an attribute in the OP's code (the id attribute to render to). – adeneo Feb 27 '12 at 09:39
  • @adeno: right, I was looking for documentation searching for ways to _attach to element_ instead of document.write. Your example now seems to work. – Salman A Feb 27 '12 at 09:44
  • 1
    @SalmanA - It's a twitter problem, all such widgets needs to have an ID passed, or it will just write to whatever element it is inside, wich when done in an external script will be the document. Also, wrapping it in a window.onload or using a timeout to defer it will keep it from blocking the site load, wich usually is the way to go as this social media crap tends to load way to slow for most sites. – adeneo Feb 27 '12 at 09:54
1

I think you need another way to insert script element

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
script.text = ".............";
$("#twitterContent").append( script );
Chris Li
  • 3,715
  • 3
  • 29
  • 31