Introduction:

Here we are going to explain what is ajaxStop() method  or how to use ajaxStop() method or why use ajaxStop() method  or   how to hide loading message on the web page when all ajax request complete  in jQuery with example.

 Description: 

The jQuery ajaxStop() method is used to hide “Loading …” or “Please wait …” type of message on the web page when all ajax request completes.

To register a handler to be called when all ajax request complets, ajaxStop() method can be used.    

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

Index.cshtml:

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> ajaxStop() 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...");        });
 
        $(document).ajaxStop(function() {
   $("#divAjaxStart").text("Loading Stop...");        });
    </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:


In the above code example, when all ajax request complets, “Loading stop …” 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