DotNetStories
Importing html from the server using JQuery Ajax functions
In this post I would like to talk about the various Ajax features-functions available to us when incorporating JQuery into our applications.We are going to investigate how we can use those JQuery Ajax functions to get data from the server.
This post will not be an introduction to Ajax.If you want to see some other posts of mine regarding Ajax have a look here.
In order to follow what I am about to say in this post, I assume that you know what JQuery is and have a basic understanding of how to traverse the DOM or handle events with JQuery.
You can find more posts regarding JQuery by clicking here.
JQuery has Ajax features built-in out of the box. Another point to remember is that JQuery allows Ajax requests to be made from a page.
I will start with a simple example. I will show
1) Launch Visual Studio 2010 (express edition will also work) and create a new website.Choose a suitable name for your website
2) Inside the Scripts folder you can see the Jquery files
3) Add a new item to your web site, an html page.Name it appropriately. I have named it LoadHtmlFromServer.htm.Inside this page we will call another html page that also resides from the server.
4) The html markup for my html page is following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Load HTML Content from the Server using JQuery</title> </head> <body> <h1>Load HTML Content from the Server using JQuery</h1> <br /> <button id="niceButton">Click here to load HTML from the Server!!!!</button> <div id="maindiv"></div> </body> </html>
5) Add another item to your website, an html page. I have named mine jqueryintro.htm. The html markup for my html page is following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing,
event handling, animating, and Ajax interactions for rapid web development. <strong>
jQuery is designed to change the way that you write JavaScript.</strong> </div> <div id="new"> <p><h3>Download jQuery</h3> This is the recommended version of jQuery to use for your application. The code in
here should be stable and usable in all modern browsers. </p> </div> </body> </html>
6) I want to load the contents of the jqueryintro.htm in the "maindiv" ID, when the user clicks the button.I will do that by using the load() JQuery Ajax function.We will use this function to make a request to the server.
7) We have to add the following javascript/jquery code to the head section of the LoadHtmlFromServer.htm
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#niceButton').click(function () { $('#maindiv').load('jqueryintro.htm'); }); }); </script>
You can donwload a newer version of the JQuery library if you want. I am using 1.4.1 in this example.
8) View your page on the browser and click the button. When you do that you will see the contents of the jqueryintro.htm injected to the maindiv ID. So we loaded HTML content from the server and placed it inside a DOM element on another page.
I am using the .load() method in this example. Have a look at the official documentation for the definition of this method.
Basically this function adds the specified file from the server and returns its HTML contents. We assign those contents to the maindiv ID.This method executes when I click the button. As you see I attach the click event to the button of ID niceButton. As you type this code you will notice that you have full Intellisense.
9) Now let's assume that we wanted to get only part of the HTML page (queryintro.htm) and place it in the DOM element - maindiv ID of another page.Let's say we want to get only the data inside the div with the ID = new from the jqueryintro.htm and still place it in the maindiv ID of the LoadHtmlFromServer.htm.We have to make a tiny little change in our JQuery code.Instead of this line
$('#maindiv').load('jqueryintro.htm');
we replace it with this one
$('#maindiv').load('jqueryintro.htm #new');
10) View again your page (LoadHtmlFromServer.htm) on the browser and click the button. When you do that you will see the only the contents of the <div id ="new"> injected to the maindiv ID of the LoadHtmlFromServer.htm page.The way it works is that it downloads the whole html file and then applies the filter for only the part of the html file that we are interested in.