Tutorials, Web Design and Coding » Blog Archive » How to load content via AJAX in jQuery. Ey guys! We want to share with you a new tutorial called How to load content via AJAX in jQuery and as you may suppose it will be focused in learn how to load content from other files by using jQuery. It’s a simple but useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX. I have decided to write it because Cyanade ( an user from our forums) asks some questions about dynamic content and ajax in their post Here is a preview image: You can try the living example before continue reading the tutorial. Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome. A little Introduction So We will create a minimalist page with a loading bar that is displayed only when the selected section is loading via AJAX. All sections are in the same external file, organized in different divisions.All sections in different external files (just load the entire file).
Let’s dive into the tutorial guys! Step 1: The layout Here is the layout code: Home. Ajax Jquery Tutorial: ajaxify your web pages. This simple tutorial example will show you how to dynamically load your web content via ajax instead of default behaviour HTTP request (full round trip), before we continue you may want to have a look at the demo page. To run this example you need to download jquery library or you can use Google Ajax Libraries API, Next create an HTML page name it “index.html” copy paste the codes below, and change the codes as neccesary: 01.
<html> 02. 03. 04. 05. 06.// javascript codes goes here 07. 08. 09./* CSS goes here */ 10./* keep this! 12. 13. 14. 16. 17. 19. 20. 21. 22. 23. 25. 26. 27. In this example assumed your website contain of 3 contents homepage, services and about, so here we need to create those pages, simply copy paste the codes below, add the content, and gve a name: homepage.html,about.html, and services.html 1. 3. No head, no body tags because we already put those tags in index.html and we are simply load these pages into wrapper div at index.html. 02. 04.function ajaxify(file){ 06. 10. 12. 14. 21. 23. 25. Tutorials. Tutorials.