.toggle() verbirgt Element für Bruchteil einer Sekunde, dann bringt es zurück

Question

Ich habe eine Funktion auf dem Klick auf eine Schaltfläche HTML geschrieben, die wie unten einen ‚lief bereits auf Server‘ asp-Tag auf das vordere Ende hat:

<button id="hidePast" runat="server" visible="True"><i class='fa fa-eye-slash'></i> Hide/Show Past Bookings</button> 

Und ich möchte dies eine Zeile ein- und ausschalten basierend auf einer If-Anweisung. Wenn Sie den Code debuggen, wird der richtige Pfad für den Befehl .toggle() verwendet. Wenn dies jedoch geschieht, können Sie sehen, dass der Bildschirm während eines Postbacks wie erwartet flimmert. Sie können die Zeile verschwinden und neu hinzugefügt sehen.

Bisher habe ich versucht:

• e.preventDefault()
• e.stopImmediatePropagation()
• ein verstecktes Feld Mit einer Sitzung zu aktualisieren, um den Zustand des Knies erinnern

Keine von denen bisher funktioniert haben. Der JS-Code ist:

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

Answer 1

Die am Ende gearbeitet folgen.

Ändern der Taste:

<button id="hidePast" runat="server" onclick="return false;" causesvalidation="false" visible="True"><i class='fa fa-eye-slash'></i> Hide/Show Past Bookings</button> 

Und die JQuery:

$(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 from 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; 
        }); 
     }); 

Die größten Änderungen, die ich auf den Knopf gemacht waren, und das war sowohl onclick="return false;" causesvalidation="false" hinzufügen, wie die oben nicht funktioniert ohne das eine oder das andere.