Kippschalter basierend auf Zustand auf Seite Last

Question

Hier ist mein Code -

(function() { 
 
     $(document).ready(function() { 
 
      
 
      $('.switch-input').on('change', function() { 
 
       var isChecked = $(this).is(':checked'); 
 
       var selectedData; 
 
       var $switchLabel = $('.switch-label'); 
 
       if (isChecked) { 
 
        selectedData = $switchLabel.attr('data-on'); 
 
       } else { 
 
        selectedData = $switchLabel.attr('data-off'); 
 
       } 
 
       if (selectedData === 'ACTIVE') { 
 
        selectedData = 'A'; 
 
       } else { 
 
        selectedData = 'C'; 
 
       } 
 
       $('#h-status').val(selectedData); 
 
       $('#form_filterBillItems').submit(); 
 
      }); 
 
     }); 
 

 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="switch"> 
 
         <input class="switch-input" type="checkbox"/> 
 
         <span id ="tglInp" class="switch-label" data-on="CANCEL" data-off="ACTIVE"></span> <span class="switch-handle"></span> 
 
        </label>

ich diesen Kippschalter haben, die eine gefilterte Liste zeigt auf dem Schaltwert basiert: ‚ACTIVE‘ oder 'CANCEL'

Dies ist in einer Rasiermesseransicht. Das Raster, das die Liste anzeigt, befindet sich in einer Teilansicht. Aber der Kippschalter ist in der vollen Ansicht.

Das Problem ist, wenn ich zu dieser Ansicht zurückkehren, das Raster wird basierend auf der Bedingung gefiltert, aber der Schalter wechselt in den Standardzustand zurück. Wenn ich zum Beispiel aus dem Umschaltstatus "Abbrechen" in die nächste Ansicht gehe, sollte es bei der Rückkehr immer noch auf "Abbrechen" stehen, aber der Wechselschalter ist aktiv.

Wie mache ich das? Jede Hilfe würde sehr geschätzt werden! Das ist meine erste Frage. Wenn ich also Fehler gemacht habe, entschuldige ich mich.

Vielen Dank!

Answer 1

Ich habe eine weitere JavaScript-Funktion hinzugefügt, um nach dem Wert des Kippschalters zu suchen und ihn je nach Bedingung zu ändern.

Hier ist meine aktualisierte Code -

$(document).ready(function() { 
 
      var data = @Html.Raw(Json.Encode(ViewData["bi_status"])); 
 
      if (data==='A'){ data = 'ACTIVE'; } else{ data = 'CANCEL'; } 
 
      $('.switch-input').on('change', function() {...}); 
 
     }); 
 
    })(); 
 
    
 

 
    function setSwitch(args) { 
 
     var $switchLabel = $('.switch-label'); 
 
     var $switchInput = document.getElementById('tglInp'); 
 
     var dataOn = $switchLabel.attr('data-on'); 
 
     var dataOff = $switchLabel.attr('data-off'); 
 
     if (args === 'CANCEL') { 
 
      $switchInput.checked = true; 
 
      $switchLabel.attr('data-on', dataOn); 
 

 
     } else { 
 
      $switchInput.checked = false; 
 
      $switchLabel.attr('data-off', dataOff); 
 
     } 
 
    }

- Für alle, die eine Antwort auf ein ähnliches Problem suchen. Prost!

Answer 2

Entfernen Sie zunächst den unerwünschten doppelten Code, um das Problem einzugrenzen. Überprüfen Sie, ob die ausgewählten Daten ordnungsgemäß an die Controller-Aktion gesendet wurden, und gefilterte Daten werden an die Ansicht zurückgegeben.

$(document).ready(function() { 

     $('.switch-input').on('change', function() { 

      var isChecked = $(this).is(':checked'); 

      var selectedData; 

      if (isChecked) { 

       selectedData = 'A'; 

      } else { 

       selectedData = 'C'; 

      } 

      $('#h-status').val(selectedData); 

      $('#form_filterBillItems').submit(); 

     }); 
    });