0

I have the following code. I want to load the content after everything else has loaded. But it seems I can only load html and not javascript:

 $(document).ready(function () {
  $("#twitter_left").html("<p><img align='left' alt='Twitter Bird' src='/sites/all/themes/helixTheme/images/twitter-bird.png' /><strong>&nbsp;&nbsp;Follow Us On Twitter</strong></p><p>&nbsp;</p><p><script charset='utf-8' src='http://widgets.twimg.com/j/2/widget.js'></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 7,interval: 30000,width: 'auto',height: 800,theme: {shell: {background: '#dbe5ff',color: '#333333'},tweets: {background: '#ffffff',color: '#999999',links: '#f26422'}},features: {scrollbar: false,loop: true,live: false,behavior: 'default'}}).render().setUser('helixwebsites').start();</script></p>");});

So my next plan was to put the content in a html file and use the .load handler, but I still want it to load after all of the page has.

2

3 Answers 3

1

You can load all the javascript you want. In between the:

$(document).ready(function(){

});

you can write any javascript you want. It can be jQuery or non jQuery javascript code. Example:

$(document).ready(function(){
    alert("Document is now ready");
});
1

Probably, you shall use JQuery getScript function in order to load JavaScript in a dinamic way and then run it.

1
$(document).ready(function () {
  $("body").append("<h1>insert html dynamically</h1>");

  var script = document.createElement('script');
  script.type = 'text/javascript';
  var code = "alert('insert script dynamically');";
  $(script).append(code);
  $("body").append(script);

  var script2 = document.createElement('script');
  script2.type = 'text/javascript';
  script2.src = 'path/your/javascript.js';
  $("body").append(script2);

});

in your code:

$("#twitter_left").html("<p><img align='left' alt='Twitter Bird' src='/sites/all/themes/helixTheme/images/twitter-bird.png' /><strong>&nbsp;&nbsp;Follow Us On Twitter</strong></p><p>&nbsp;</p>");
$("#twitter_left").append(script2);

Load javascript in new window:

$(document).ready(function () {
  var newPage = window.open('', '_blank');
  newPage.document.write("<h1>insert html dynamically</h1>");
  newPage.document.write("<script>alert(1)</" + "script>");
});
4
  • Using a variation of yours this is what I have: $(document).ready(function () { var script2 = document.createElement('script'); script2.type = 'text/javascript'; script2.src = 'helixwebsites.co.uk/sites/all/themes/helixTheme/twitter.js'; $("#twitter_left").html("<p><img align='left' alt='Twitter Bird' src='/sites/all/themes/helixTheme/images/twitter-bird.png' /><strong>&nbsp;&nbsp;Follow Us On Twitter</strong></p><p>&nbsp;</p><p>" + script2 +"</p>"); }); but where script2 is supposed to be, it outputs: [object HTMLScriptElement]
    – 1321941
    Jul 22, 2012 at 10:01
  • you must use $(selector).append(script2).
    – Morteza
    Jul 22, 2012 at 12:01
  • The issue I am getting is that instead of loading inside the target div it reloads as a new page?
    – 1321941
    Jul 22, 2012 at 18:01
  • You must open new window and write code inside. Note: Instead of "</script>" write: "</" + "script>"
    – Morteza
    Jul 23, 2012 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.