Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jquery ajax load

Suggested Videos
Part 50 - jquery show hide password
Part 51 - Increase decrease font size using jquery
Part 52 - jquery floating div



In this video we will discuss how to load HTML data from the server using jquery AJAX load function.



What is AJAX
AJAX stands for Asynchronous JavaScript and XML, and allow parts of the page to be updated without having to reload the entire page. 

Syntax 
load( url [, data ] [, complete ] )

Parameter Description
url Required. URL to which the request is sent
data Optional. A JSON object or string that is sent to the server along with the request
complete A callback function that is called when the request completes

The following example loads HTML data from the server. When a text box receives focus, the help text associated with that field is loaded from the server and displayed. When the focus is lost the help text disappears.

jquery ajax load

HtmlPage1.html
<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.focus(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).load('Help.html #' + helpDiv);
            });

            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
</body>
</html>

Help.html
<div id="firstNameHelpDiv">
    Your fisrt name as it appears in passport
</div>

<div id="lastNameHelpDiv">
    Your last name as it appears in passport
</div>

<div id="emailHelpDiv">
    Your email address for communication
</div>

<div id="incomeHelpDiv">
    Your annual income
</div>

jQuery tutorial for beginners

4 comments:

  1. How can we implement Angular Js

    ReplyDelete
    Replies
    1. jQuery is a library whereas Angular JS is a framework.

      Delete
  2. Hi Vankat
    I have been using notepad ++ as it is light and quicker than VS but when it came to 53 jquery ajax load it either did not work for textBoxes.focus() Or for $('#' + helpDiv).load('Help.html #' + helpDiv); > I used VS 2013 and it worked fine. My question is is there a way to make it work using notepad ++? Thank you

    ReplyDelete
  3. $(document).ready(function(){
    $('input[type="text"]').on({
    'mouseover' : function(){
    var DivId = $(this).attr('id') + 'Div';
    $('#'+DivId).load('testing1.html #'+DivId);
    },
    'mouseout' : function(){
    var DivId = $(this).attr('id') + 'Div';
    $('#'+DivId).html('');
    }
    });
    });

    ReplyDelete

It would be great if you can help share these free resources