Выбранный плагин Jquery не работает на AJAX Call - PullRequest
Новая
       8

Выбранный плагин Jquery не работает на AJAX Call

0 голосов
/ 15 октября 2018

У меня есть два выпадающих списка.Первая содержит мобильные сети MTN, VODACOM, TELKOM, а вторая представляет собой выбранный выпадающий список с несколькими выборками, который должен содержать данные (номера ячеек), заполненные через AJAX на основе мобильной сети выше.но он не запускается после вызова AJAX. 

     <div id="network" class="form-group required">
      <label class="control-label">Mobile Network</label>
        <select class="form-control" id="network" name="network">  
         <option id="MTN" value="MTN">MTN</option>
         <option id="VODACOM" value="VODACOM">VODACOM</option>  
         <option id="TELKOM" value="TELKOM">TELKOM</option>       
       </select>
     </div>

А второй содержит номера ячеек, основанные на том, что выбрано из выше.и выпадающий использует Chosen Plugin 

     <div id="cellNumber" class="form-group required">
      <label class="control-label">Select SIMs</label>
        <select multiple class="chosen-select form-control" id="cellNumber" name="cellNumber[]">
       </select>
     </div>

На странице я делаю это 

<script>   
  $("select.chosen-select").chosen(); //Initializing the plugin

     $('select#network').change(function () {
       var id = $('select#network').children(':selected').attr('id');

         if(id != " "){
          localStorage.clear();
           AJAXCallNumbersByCarrier(id);   //AJAX Call
          }
        });

</script>

И это AJAX 

 function AJAXCallNumbersByCarrier(data) {
   var url = "/number/" + encodeURI(data) + "/carrier";
   var type = "GET";

   jQuery.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"').attr('content')
  }
});
jQuery.ajax({
url: url,
type: type,
data: {
  "_token": $('meta[name="csrf-token"').attr('content')
},
beforeSend: function () { },
success: function (data) {
  try {
    var count = data.length;
    if (count > 0) {
      var id = $('#cellNumber').attr('id');

      $('select#cellNumber').empty();

      var numbers = "<option value='' hidden=''>[Select SIMs]</option>";
      for (var index = 0; index < count; index++) {
        details = data[index];
        id = details['cellnumber'];
        cellnumber = details['cellnumber'];
        simserial = details['simserial'];
        realm = details['apnname'];
        numbers += '<option id="' + id + '" value="' + cellnumber + '">'+'[ '+ cellnumber + ' ] [ ' + simserial + ' ] [ ' + realm + ' ]' + '</option>';

      }
      $('select#cellNumber').append(numbers);
      $('div#cellNumber').show();
    }else{

      $('div#ErrorMessage').empty();
      $('div#ErrorMessage').append("No numbers available for the selected customer");
      $('div#ErrorMessage').show();
      $('div.alert').not('.alert-important').delay(3000).fadeOut(350);
      $('select#cellNumber').empty();
      $('select#cellNumber').append("<option value'' hidden=''>[No numbers available for the selected customer]</option>");
      $('div#cellNumber').show();
    }
  } catch (err) {
    alert("Error running JS code from module: AJAXCallNumbersByCarrier");
  }
},
error: function (url, jqXHR, textStatus, errorThrown) {
  alert("url: " + url + " error: " + jqXHR.responseText + " status: " + textStatus + " errorThrown: " + errorThrown);
},
complete: function () { }
});
   }

Когда я удаляю $( "select.chosen-выбрать"), выбранный ().он отлично работает как обычный мультиселектор HTML.Вопрос выбран.Это не стрельба.Данные пусты.Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Я использовал Select2 вместо этого.хорошо работает.

0 голосов
/ 15 октября 2018

попытаться повторно инициализировать выбранную в функции успеха, как 

success:function(data){
   // your code here
   $('select#cellNumber').append(numbers);
   $("select.chosen-select").chosen(); 
   $('div#cellNumber').show();
}

, она решена, как только я столкнулся с той же проблемой.Надеюсь, это поможет.

...