jquery ajax load

this is part 53 of jQuery tutorial in this video we'll discuss how to load a HTML data from the server using jQuery AJAX load function first let's understand what is Ajax Ajax stands for asynchronous JavaScript and XML Ajax allow parts of the page to be updated without having to reload the entire page let's understand what we mean by this statement with an example here we have a web page that captures first name last name email and income now next to every textbox we also have a development whenever a textbox receives focus we want to display the help text associated with that text box next to the development that is present next to that field so here income field has the focus so the help text associated with the income field is displayed in the development that's present next to that fear now all this help text is present on the server so at any time when a field receives focus we want to load that help text associated with that field from the server if we have to achieve this without using Ajax then we will have to do a full page post back to the server so the server is going to process the request and send the entire page HTML back to the client now just because we want to display the help text associated with a specific field look at the amount of data that is exchanged between the client and the server the server is sending the entire page HTML to the client so the amount of data that is exchanged is more and another problem as this full page refreshes cause screen flicker with Ajax this server is not going to send the entire HTML back instead it is going to send just the help text and the client is going to receive that help text and it is going to update the development without having to reload the entire page so let's see how to you know load this data from the server using this jquery ajax load function so if you look at this load function it has got three parameters URL data and complete out of these three parameters URL is the only required parameter the other two are optional so this URL parameter specifies the URL to which the request is sent data parameter specifies a JSON object or a string that is sent to the server along with the reguar with the request and this complete parameter specifies a callback function that is called when the request completes in our upcoming videos we'll look at an example of using data and complete parameters in this video let's look at an example of using this URL parameter so the first thing to do here is to design a web page that looks like this so let's flip to visual studio so within the body section we need a table and this table is going to have at TR and this TR is going to contain three PDS so here we want to display this literal text first name and then we need a text box so let's use an input element so input type equals text and let's give it an ID so let's call this first name and then we need a development in the third TD so there and let's give this development an ID let's actually call this first name help deaf okay similarly we need TRS for last name email and income in the interest of time I have already typed the required HTML so let's copy that from the notepad and paste it right here now if you look at this HTML it's it's very much similar to what we have here in the first name TR so last name and then a text box and look at the IDs so here the ID of the textbox is first name and the ID of the div is first name help div and for last name the ID of the textbox is last name and the ID of the development is last name help dip so the div elements have got an ID and that is equal to you know the ID of the input field that is the text box Plus this little text help div I have intentionally named them that way and in a bit you will understand why so for email the IDS email and the device email help there similarly for income it is income for text box and income help do for the development okay so if we view this page in the browser this is how it looks like so we have all the fields and next to those fields we have the developments now the next step is to include the help text right so the help text is going to be present in another HTML file and obviously that file will be present on the server so to our project let's go ahead and add an HTML file and let's call this help dot HTML okay so we don't require all this HTML here we just need a development so I'm going to give this div an ID and the idea of this div I'm going to intentionally match that with you know this divided e and again in a bit you'll understand why is that okay so div ID equals first name out there and this div is going to contain the help text for first name field so you are first name as it appears in a sport okay so similarly we need to have you know how text for last name email and income and in the interest of time I have already typed the required HTML so let's copy it from here and paste it there okay so our help text is present in this HTML file that is help dot HTML and this is our page way we want to display the health text okay and so now all that is left is to write the jQuery code to load the health text from that health dot HTML file right so the first thing is we want you know associate focus events for all these textboxes so we want to find all these text boxes and I'm going to use this jQuery selector to find all the text boxes so give me all input elements where type attribute equals text so this is going to give us all the text boxes and I'm going to store these text boxes in a variable let's call this text boxes all right so we have all the text boxes now now with each text box we want to associate focus event handler so when the focus event is raised we want to call this function so what do we want to do whenever a text box it receives focus so when for example first name textbox receives focus we want to display the health text associated with the first name field within the development that is present next to the first name field right so we need to find the ID of the development and look at the way we have named them the idea of this div is first name help though the idea of last name help device last name help there so the ID is equal to the ID of the input field plus this little text help div right so I'm going to create a variable here and let's call this help there and this variable is going to contain the ID of this help Dave and we are going to compute that programmatically okay so to get that ID I'm going to get the ID of the textbox itself so how do we get the idea of the textbox in our this focus whenever the first name textbox receives focus you know this function will be called and at that point when we use this keyword this represents the control that has received focus right and we want to retrieve the ID attribute value so I am going to use a TDR function so this is going to give us the ID of the text box that has received focus for example first name textbox has received focus this expression is going to give us first name and to that if we append this little text help there then we are going to get the ID that is associated with that input field right so what's the next thing to do within this help div we want to load the help text from this help dot HTML file right so to do that we are going to make use of this load function so where do we want to load that help text into this div element so this is the ID of the development so I'm going to use the jQuery ID selector so hash is the ID selector and then to that lets append helped if that's the ID and on this development i am going to call the load function so we want to load the help text from the server into this development so here we are going to just specify the URL so what is the URL of the page the URL of the page is help dot HTML so help dot HTML okay so when the text box receives focus it's going to load that HTML into this development okay now not only that when the text box loses focus what do we want to do we want to empty the development right so I'm actually going to make a copy of this and when the text box loses focus blur event is raised so when blur event is raised we want to handle that find the help div you know of the text box that has just lost focus and what do we want to do we want to empty that div element and to do that I'm going to use HTML and then pass an empty string okay all right so let's save the changes let's go ahead and reload this page and look at this when a text box which receives focus look at that we get the help text your first name as it appears in passport your last name you know basically whenever a text box receives focus look at that next to each development we are getting the entire health text I mean the entire content of this help dot html' okay that's because here we have specified a help dot HTML so what is this going to do this is going to load the entire content you know from this page help dot HTML and that will be loaded into this development but that's not what we want we want to load the help text you know when first name text box receives focus we want to load only the help text that is associated with that first name field okay so to do that what I'm going to do is give a space here and then I'm going to use the ID selector again pound and if you look at this help dot HTML look at the idea of the development that contains the help text for the first name field it is intentionally named first name help there and you know that matches with the ID of this div okay and we have you know this help div for example when first name text box receives focus you know this variable is going to contain first name help div you know that string which matches with the ID of this development okay so here I'm going to pass the ID of this development okay and this variable contains that ID right so to that I'm going to append help dev okay so basically what we are saying here is within help dot HTML file we have an element with ID for example when first name text box receives focus this help div will contain first name how div right that's the ID so basically we are saying here with in help dot HTML there is an element with ID first name help div so from that element you know load that HTML into this element whatever this selector returns okay now but keep in mind whether you do this or whether you load the you know whether you specify just help dot HTML in both the cases the entire HTML content of help dot HTML will be loaded you know from the server to the client so on the client it's going to find the element and then retrieve its content and then load that into this stiff okay so let's save the changes let's go ahead and reload this page and look at this and the first name textbox receives focus your first name as it appears in a passport and when the textbox loses focus look at that it goes away similarly your last name and email and annual income okay and look at how you know fast it happens so here is the HTML of help dot HTML page here is the HTML of our HTML page 1 and here is the jQuery code thank you for listening and have a great day

Channel: kudvenkat

Views: 112,408

Keywords: jquery ajax tutorial, jquery ajax tutorial for beginners, jquery ajax load html page into div, jquery ajax load html page, jquery ajax load html example, jquery ajax load part of page, jquery ajax get data server, jquery tutorial, jquery tutorial for beginners

Id: nm211NaGEmk

Length: 14min 7sec (847 seconds)

Published: Thu May 28 2015