I've found a simple way to doing that, thanks to JQuery Ajax load().
JQuery Ajax load() will load data from the server and place the returned HTML into the matched element (by : JQuery). To doing that, you simply need a <div> element that will be the container of the returned HTML and then define the script that will load the HTML into that <div>.
First, you need the jquery.js.. You can download the newest version of JQuery here.
After that, you must add the jquery.js to your page. Add the script reference into the head part of your page like this :
Then, create a javascript file that will contains the function to change the page asynchronously. In this example, i give it a name myJS.js. Don't forget to add the references for it in the <head> part of your main page.
After that, create the layout for the main page. In this example, i create a simple table that contains two column. The left column contains the navigation and the right column contains a <div> that will act as the container of the page's content. So, when a navigation link in the right column clicked, the container in the right column will change its content based on the pages that the link requested. Here is the code :
Look at the href attribute, i give javascript function that will be called when the link clicked. This function was created inside the myJS.js. Here is the code :
You can see that there are three more HTML pages (Home, About, ContactUs). Yeah, that HTML files contain the content that we want to display in the myContainer <div> inside the index.html (main Page). So when the link clicked, the myContainer <div> will load one of these HTML files based on the request.
Here is the load() syntax explanation :
$("#idOfDivContainer").load("url/name of the files");
Inside the first parenthesis, you must specify the id of the element that will be act as the container. Inside the second parenthesis, you must specify the url that will be loaded or the name of the HTML files. You can also add a query string inside that parenthesis.
That's all we need. The website will be like below :
 |
| Main page that loads Home.html for its content at first. |
 |
| When About link clicked, the right column change its content to About.html |
 |
| When the Contact Us link clicked, the right column change its content to ContactUs.html |
When you click Home link, it will be the same like the main page above. With JQuery Ajax Load, loading a html file inside the HTML element become more easier. You can see that all loading process is asynchronously. There is no full page reloading when any of these link clicked. That was very cool.. ^_^
You can download the full source of the example here. You can also find the complete reference from JQuery site.
Hopefully this post will give you a good understanding of JQuery AJAX load().. If you have more questions, please let me know.. Regards... ^_^
No comments:
Post a Comment