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!

Audio on websites. Boo. Rewriting an entire site to support something that is annoying. Double boo. — random_user_name, Sep 20 '13 at 23:38
Not sure to understand your problem there. WHat links are clicked ? what is the new content and where ? and what is not working ? — Adrien Gorrell, Sep 20 '13 at 23:40
Lyth, The links I mean are the internal navigational links on the site, as the main menu links. The new content is the content of the page the link points to. And, cale_b, I agree with you, but the client asked for it, so... — Rodrigo Balest, Sep 21 '13 at 00:34
Found some other question with interesting answers: http://stackoverflow.com/questions/2238030/trigger-document-ready-so-ajax-code-i-cant-modify-is-executed This answer especially seems to be very good: http://stackoverflow.com/a/8125920/919933 — Rodrigo Balest, Feb 04 '14 at 20:13

score 1 · Accepted Answer · answered Sep 20 '13 at 23:59

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

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

1 Answers1