Any hints on how to 'ajaxify' a website this way?

Question

We built a website with different pages, and some of these pages have features that other pages don't have. Eg: The galleries page uses jQuery Colorbox for opening photos. So, some pages load some jQuery plugins, and some other pages don't (the 'About Us' page don't need a Colorbox plugin).

Now, the client asked us to put a persistent audio player at the top of the page. We have two alternatives: using frames (too bad!) or using ajax calls to update content and the History API to update the url/browser history.

Ok, we attached the click event to links. The event requests the new page using ajax, and then the page content is replaced. The problem is: and the js files/jQuery plugins? When the requested page's js files are loaded, the $(document).ready(); event was already fired.

Also, some pages may contain non-external javascript, like

<script type="text/javascript">
...some code here...
</script>

Any hints on how to do it the best way? Thanks!

Answer 1

The external JS files should be loaded once in the parent file, so that all the dependencies are satisfied when the ajax success callback fires.

Ex:

$.get('/someUrl',function(newHtml){

  //process the newly fetched html
  $("#someParent").html(newHtml);

  //apply whatever JQuery plugins you need at this point.
});