Установить тумблер на основе состояния загрузки страницы

Question

Вот мой код -

(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>

У меня есть этот тумблер, который отображает отфильтрованный список на основе значения переключателя: «ACTIVE» или 'CANCEL'

Это вид на бритву. Сетка, отображающая список, находится в частичном представлении. Но тумблер находится на полном экране.

Проблема заключается в том, когда я возвращаюсь к этому представлению, сетка фильтруется на основе условия, но коммутатор возвращается к состоянию по умолчанию. Например, если я перейду к следующему представлению из состояния Toggle switch Cancel, когда я верну его, он должен оставаться на Cancel, но тумблер включен в активном состоянии.

Как это сделать. Любая помощь будет высоко оценен! Это мой первый вопрос, поэтому, если я допустил какие-либо ошибки, при публикации, прошу прощения.

Спасибо!

Answer 1

Я добавил еще одну функцию javascript, чтобы проверить значение переключателя тумблера и изменить его на основе условия.

Вот мой обновленный код -

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

- Для тех, кто ищет ответ на аналогичный вопрос. Ура!

Answer 2

Сначала удалите ненужный дублирующий код, чтобы сузить проблему, как показано ниже. Проверьте, правильно ли выбрана выбранная информация для правильного действия контроллера, и отфильтрованные данные возвращаются в представление.

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

     }); 
    });