How to prevent page reloading after ajax call jquery

Question

I want to stop page reloading after ajax call. Basically i want to show div and populate with partial view having some data. After ajax call my page is start refreshing as shown in image. My code is

    function GetAllSlot(doctorid, schid, dayid) {

       $("#doctorsScheduler").html('');
       $.ajax({
           url: '/Appointment/GetAllSlotsForDoc',
           type: 'GET',
           data: { doctorId: doctorid, schid: schid, dayID: dayid },
           async : true,
           success: function (innerData) {
               $("#doctorsScheduler").slideToggle("slow", function () {
                   $("#doctorsScheduler").html(innerData);
               });
           }
       });
   }

My div

<div class="col-lg-12 col-sm-12 col-md-12">
       <div class="row">
           <div class="card-box" style="display: none;" id="doctorsScheduler">
           </div>
       </div>
   </div>

OnClick Event on Div

<div class="col-sm-2" onclick="GetAllSlot(@item.ID,@items.ID,@items.DayID)">
               <a href="#">
                   <div class="card-box  bg-success">
                       <div class="media">
                           <div class="media-left">
                               <img class="media-object" src="~/Content/Hosiptal-icon/DoctorsApp.png" alt="">
                           </div>
                           <div class="media-right">
                               <h4 class="media-heading" style="text-align: left; width: 500%; color: black">@item.DoctorName</h4>
                           </div>
                       </div>
                   </div>
               </a>
           </div>

server side code:

public ActionResult GetAllSlotsForDoc(long doctorId,long schid, long dayID)
   {

       var roomno = (from p in db.SchedulerSettings where p.FKDoctorID == doctorId && p.DayID == dayID select p.RoonNo).
             Single();
       ViewBag.DayOfWeek = (DayOfWeek)dayID;
       ViewBag.RoomNo = roomno;
       var getslotsfordoct = new GetSlotsForDoctor();
       var appointmentlist = getslotsfordoct.GetSlotsforDoctor(doctorId,schid,dayID);
       return PartialView("~/Views/PartialViews/AppointmentDeskDashBoard/_GetAppointmentSlotsPartailView.cshtml", appointmentlist);
   }

The code you have shown will not refresh the page. If it is refreshing, then its code you have not shown us. — , Feb 24 '16 at 11:55
Ajax will not perform a page refresh thus your code above should not result in a page request. — Bon Macalindong, Feb 24 '16 at 11:57
Thats all i have written in my code. Still it is refreshing my page i don't know why.? please any one can help me with this.Thank you in advance — Nisar Ahmad, Feb 24 '16 at 12:06

score 1 · Accepted Answer · edited Jan 03 '21 at 23:06

1

Please review your console using firebug. Maybe it is calling some of your method of controller from your script maybe it helps you solve your problem. Please let me if there is anything. Please review this image. This is how your ajax calls work as you see in firebug.

edited Jan 03 '21 at 23:06

Jim Simson

2,774
3
22
30

answered Feb 24 '16 at 13:20

Kamran Khan

1,042
10
21

Thank you so much for your answer this helped me to find out what is happening after ajax call.It is calling home index after ajax call this make page reload after ajax call. Firebug is a new addition. Thank you so much – Nisar Ahmad Feb 24 '16 at 13:29

How to prevent page reloading after ajax call jquery

1 Answers1