javascript - .toggle() hides element for split second then brings it back -


i've wrote function on click of html button has 'run @ server' asp tag on front end below:

<button id="hidepast" runat="server" visible="true"><i class='fa fa-eye-slash'></i> hide/show past bookings</button> 

and want toggle row on , off based on if statment. debugging code takes correct path hit .toggle(), when can see screen flicker expected during postback , can see row disappear , set re-added.

so far i've tried:

  • e.preventdefault()
  • e.stopimmediatepropagation()
  • using hidden field update session remember state of toggle

none of have worked far. js code is:

$(document).on('click','#ctl00_content_hidepast',function (e) {     e.stopimmediatepropagation();     var dt = new date($.now() - 30 * 60000);     var time = dt.gethours() + ":" + dt.getminutes() + ":" + dt.getseconds();     var state = $("#ctl00_content_hdnpastbookingtoggle").val();     $("td.bgtime").each(function() {          var bookingtime = ($(this).text().split(':'));          var d = new date();          d.sethours(+bookingtime[0]);          d.setminutes(bookingtime[1]);           if ($(d) > time) {              var timerow = $(this).parent();              $(timerow).toggle();          };     });     if (state === "0") {        $("#ctl00_content_hdnpastbookingtoggle").val("1");     }      else if (state === "1") {        $("#ctl00_content_hdnpastbookingtoggle").val("0");     };     return false;  }); }); 

the following worked in end.

changing button to:

<button id="hidepast" runat="server" onclick="return false;" causesvalidation="false" visible="true"><i class='fa fa-eye-slash'></i> hide/show past bookings</button> 

and jquery to:

$(function togglepast () {             $(document)                 .on('click',                     '#ctl00_content_hidepast',                     function (e) {                         e.preventdefault();                         var dt = new date($.now() - 30 * 60000);                         var time = dt.gettime();                         var state = $("#<%= hdnpastbookingtoggle.clientid %>").val();                         $("td.bgtime")                             .each(function() {                                 var bookingtime = ($(this).text().split(':'));                                 var d = new date();                                 d.sethours(parseint(bookingtime[0]));                                 d.setminutes(parseint(bookingtime[1]));                                 var rowtime = d.gettime();                                  console.log("now: " + time + " time row: " + rowtime);                                  if (rowtime < time) {                                     var timerow = $(this).parent();                                     $(timerow).toggle("slow");                                 };                             });                         if (state === "0") {                             $("#<%= hdnpastbookingtoggle.clientid %>").val("1");                         } else if (state === "1") {                             $("#<%= hdnpastbookingtoggle.clientid %>").val("0");                         };                         return false;                     });         }); 

the biggest changes made button , add both onclick="return false;" causesvalidation="false" above did not work without 1 or other.


Comments