dynamically load external JS and write response to a div

Question

I'm embedding a delicious feed into my page. When I just add the script tags inside the div it obviously loads before the rest of my JS (at the bottom of the page). I'd like to load this script into the specified div dynamically after all other js has loaded.

I've tried the getscript function, but it definitely breaks the page when I use it with .html():

$('#delicious').html(function(){
$.getScript("http://feeds.delicious.com/v2/js/bayonnebridge?title=My%20Delicious%20Bookmarks&icon=m&count=5&sort=date&tags&extended&name&showadd"); 
});

I can't seem to wrap my head around how I can print the results of that file into the #delicious div.

no.good.at.coding · Accepted Answer · 2011-04-11 20:36:13Z

3

If you want to display the script in the div, shouldn't it be something like this, making use of the callback function?

$.getScript("http://feeds.delicious.com/v2/js/bayonnebridge?title=My%20Delicious%20Bookmarks&icon=m&count=5&sort=date&tags&extended&name&showadd", 
             function(data){
                $('#delicious').html(data);
            });

The result of $.getScript() is the XMLHTTPRequest object and it seems like you want the response text instead.

Also, it looks like the response from the URL you've given attempts to write the script into the document, thus overwriting all your page content. It that is your problem you might consider using an iframe and setting this URL as it's source.

I also seem to get different behaviour depending on whether the script is being loaded cross-domain or from the same domain - I'm not quite sure what to make of that since getScript() is supposed to work cross-domain.

edited Apr 11, 2011 at 20:36

answered Apr 11, 2011 at 20:29

no.good.at.coding

20.4k2 gold badges63 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gregg B Over a year ago

Yea, it has me really confused. Putting the script inline works perfectly fine (doesn't over-ride the whole page), I would assume getscript would perform similarly. I may just have to take the performance hit.

Chocula · Accepted Answer · 2011-04-11 20:54:30Z

1

It sounds like you want to use something like the window load event. Try adding a handler that looks like this:

$(window).load(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "http://feeds.delicious.com/v2/js/bayonnebridge?title=My%20Delicious%20Bookmarks&icon=m&count=5&sort=date&tags&extended&name&showadd";
  $('#delicious').append(script);
});

Check out the jQuery .load() API for more information.

edited Apr 11, 2011 at 20:54

answered Apr 11, 2011 at 17:04

Chocula

1,9461 gold badge16 silver badges21 bronze badges

4 Comments

Gregg B Over a year ago

This produces the same result - the page loads, but when it hits this js it reloads the whole page and tries to fill it with the url. So weird.

Chocula Over a year ago

I overlooked your .html() use; you definitely want the response and could append the script dynamically like the example. (However, no.good.at.coding seems to have your answer.) Good luck!

Chocula Over a year ago

This post may also be helpful to you: stackoverflow.com/questions/4520440/…

Gregg B Over a year ago

Thanks, going to give these a shot in the morning. Appreciate your help!

Collectives™ on Stack Overflow

dynamically load external JS and write response to a div

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related