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);
   }

Answer 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.