CODEWITHSUNDEEP
ajaxpromisejquery-deferredbootstrap-selectpicker
Beengie
Beengie

Reputation: 1608

Bootstrap Selectpicker not refreshing

When a user clicks the edit icon the contents of a selectpicker are updated then refreshed. Then the selectpicker's value is updated, then refreshed again, but for some reason it is not updating with the selected value.

Everything works fine when I manually enter in the the same code in the console.

$('#IncWidgetId').val(864)// the value used when breaking in console
$('#IncWidgetId').selectpicker('refresh')

I have ensured that the selectpicker is updated with the new option values along with confirming the deferred is firing in the proper order. As a double check, I also have separated the .selectpicker('refresh') to make sure it didn't try to fire before the option was selected due to async, but it is still not updating the selectpicker with the selected value.

$(document).on('click', '[id^=EditWidgetId-]', function () {
  var id = $(this).attr('id').split('-')[1];
  var mfg = $(this).data('mfg');
  var widgetid = $(this).data('widgetid ');
  var mfgSelect = $('input[name=mfg][value="' + mfg + '"]');
  mfgSelect.prop('checked', true);

  $.when(LoadWidgets(mfg)).then(function () {
      console.log('then function');
      $('#IncWidgetId').val(widgetid );
  }).done(function () {
      console.log('done function');
      $('#IncWidgetId').selectpicker('refresh');
  });

  $('#modalWidgetNew').modal('show');
});

function LoadWidgets(mfg) {
  var r = $.Deferred();
  console.log('before ajax');

  r.resolve($.ajax({
      url: '/Widgets/FilterWidgetsDropdown',
      type: 'GET',
      cache: false,
      data: { mfg: mfg },
      success: function (partial) {
          $('#IncWidgetDDArea').html(partial);
          $('#IncWidgetId').selectpicker('refresh')
      },
      error: function (x, e) {
          if (x.status == 0) {
              alert('You are offline!!\n Please Check Your Network.');
          } else if (x.status == 404) {
              alert('Requested URL not found.');
          } else if (x.status == 500) {
              alert('Internel Server Error.');
          } else if (e == 'parsererror') {
              alert('Error.\nParsing JSON Request failed.');
          } else if (e == 'timeout') {
              alert('Request Time out.');
          } else {
              alert('Unknow Error.\n' + x.responseText);
          }
      }
  })).done(function () {
      console.log('after ajax');
      return r.promise();
  });
}

What am I missing?

Upvotes: 1

Views: 5195

Answers (1)

Denis Khakimov
Denis Khakimov

Reputation: 76

There was such an issue in old versions of this plugin.
Try to destroy it and initialize again. Something like this:

$('#IncWidgetId').selectpicker('destroy');
$('#IncWidgetId').selectpicker();

Upvotes: 2

Related Questions