single-page website with jquery load()

Question

I want to crate a single-page website (top navigation, left sidebar, and a #content div for exchanging content).

$(document).ready(function() { // or click on a button
$('#content').load('somepage.php');
});

<script src="jquery-1.9.1.min.js"></script>
<script src='index.js'></script>

scripts are outside loaded page, i.e. inside main page.

Two questions:

1. Is there any issue or downside of this approach ?
2. Why jquery works inside loaded #somepage.php BUT index.js doesn't work ? I must write its code inside loaded page.

For example:

$("#stick").click(function() {
    $(this).hide();
});

this code is inside index.js. stick is inside somepage.php. The code doesn' work till I write them inside somepage.php

Answer 1

If you refactor your code from

$("#stick").click(function() {
    $(this).hide();
});

to

$(document).on('click', "#stick", function() {
    $(this).hide();
});

..etc. for all of the your other elements.

This will just work as is. No need to callbacks, etc. and will enable you to put the js file in the loading page, not the loaded page.

The answer from ImShogun will be very inefficient and will constantly re-bind your events and result in spaghetti code, etc.

Read the jQuery docs on .on

---

On, attaches the event to the document and listens for events based on the selector("#stick"), because the document never goes out of context, neither do the event handlers so this will work with dynamic code without rebinding.

Answer 2

1. If user has turned of JS, the site wont work. Use fallback (site reload with the new content)

2. What is index.js? Do you mean you write a javascript that is loaded in index.php that do something with the DOM, then load a page (insert into #content), and that JS doesnt work on the loaded page?

To handle this with jQuery, see this documentation.

Answer 3

First, you are showing a bit of code with mixed html and javascript, so it is hard to assume what's loaded first in your web page, maybe you should give the complete code.

But assuming you are loading jquery script then index script then running the load code, then there should be either:

• a callback in your load that would trigger the execution of something that you wrote in index.js
• a script tag in somepage.php that would trigger something in your index.js (less recommended, loading mixed html and javascript through ajax can be confusing both for the mind and for the javascript engines!)
• Switch from jquery load() to jquery ajax() who can be configured with "async:false", which is even less recommended than the previous solution, because If read at many places that syncrhonous requests are evil, and also because it is true.

Because right now, probably, your index.js script is trying to do stuff with your html page that is not loaded yet, your page loading being asynchronous, meaning that the execution of whatever is writen in index.js will likely occur before the loading is finished.

So I would do this:

1) Concentrate any execution code you have in index.js into a "afterLoad" function

index.js content:

afterLoad=function(){
   alert('Hello World');
}
otherStuff1=function(){
...
}
...

2) Modify the load script accordingly so the callback will be executed once the page is loaded:

$(document).ready(function() { // or click on a button
    $('#content').load('somepage.php',function(){
        afterLoad();
    });
});

And... yes there may be a downside to this approach, with search engines trying to navigate your website and finding only one page. There should be a "fallback" so robots (without a javascript engine) can still browse the pages through classic hyperlinks.