Introduction:

Here we are going to explain what is ajaxStart() method  or how to use ajaxStart() method or why use ajaxStart () method  or how to show loading message on the web page while the ajax request is being processed  in jQuery with example.

Description: 

The jQuery ajaxStart() method is used to show “Loading …” or “Please wait …” type of message on the web page while the ajax request is being processed.

To register a handler to be called when first ajax request start, ajaxStart() method can be used.    

Let’s see a demonstration example of ajaxStart() method 

Index.cshtml:

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> ajaxStart() Method</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <input type="button" id="btnpost" value="Load Data" />
    <div id="divAjaxStart" style="font-size:14px; font-weight:bold;"></div>
    <div id="divResult">
        <table id="student">
            <thead>
                <tr>
                    <th>ID</th>
                     <th>Name</th>
                     <th>Marks</th>
                </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>    </div>        <script>
        $("#btnpost").click(function () {
     $.post("/Tutorials/GetJsonData",
         function (data) {
            for (var i = 0; i < data.length;i++) {
              var row = "<tr><td>" + data[i].StudentId + "</td><td>";               row = row +data[i].Name + "</td><td>" + data[i].Marks + "</td></tr>";
                 $('#student tbody').append(row);
               }
        });        });
        $(document).ajaxStart(function() {
   $("#divAjaxStart").text("Loading Start...");
 });
    </script>
</body>
</html>

 

TutorialsController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Jquery.Controllers
{
    public class TutorialsController : Controller    {
        public ActionResult Index()        {
  return View();        }
        [HttpPost]        public JsonResult GetJsonData()        {
    Students[] obj = new Students[]  
        {
          new Students()  
             {    
               StudentId = 1, 
               Name = "NitinTyagi"
               Marks = 400 
             }, 
          new Students()  
             { 
               StudentId = 2, 
               Name = "AshishTripathi"
               Marks = 500 
             } 
         };
   return Json(obj, JsonRequestBehavior.AllowGet);
         } 
    }
 
    public class Students    {            public int StudentId { get; set; }            public string Name { get; set; }            public int Marks { get; set; }    }
}

 

Output:

 Use ajaxStart() method to register a handler to be called when first ajax request begins in jQuery

In the above code example, when ajax request starts, “Loading Start …” is written inside “divAjaxStart” element of the page.


I hope it will help to you.


0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like