Ajax with method selectpicker('refresh')

[mentrac]

Hi Folks,

I have a little trouble that leave me crazzy, because I dont Know if problem is directly method selectpicker('refresh') or logical programmer.

I have a simple html form with two combobox, Firstly you fill the first combobox (inputESTADO) and dynamiclly the second combobox (inputCIDADE) is filled with values from array php. Both combobox its with class='selectpicker' attribute.

The case is, The 'selectpicker' class in both, the second combobox not load the values. If I remove the class, the form work well with ajax. I searching here about ajax issues, in my javascript, I add the .selectpicker('refresh') to load the new values from first combobox.

Now, the form work partial, because the second combobox just change the values for last choice from combobox one.

Example

// HTML: Estado
echo '<div class="form-group">';
    echo '<label for="inputEstado" class="col-sm-2 control-label">Estado</label>';
        echo '<div class="col-sm-10">';
            $recurso->recBRListaEstado (); /* selectpicker class inside this function */
        echo '</div>';
echo '</div>';                                              

// HTML: Cidade
echo '<div class="form-group">';
    echo '<label for="inputCidade" class="col-sm-2 control-label">Cidade</label>';
        echo '<div class="col-sm-10">';                     
            echo '<select id="inputCIDADE" name="inputCIDADE" data-style="form-control" class="selectpicker">';
                echo '<option value="0">Escolha um Estado</option>';
            echo '</select>'; 
        echo '</div>';
echo '</div>';

My javascript

$(document).ready(function(){
    $('#inputESTADO').change(function(){
        $('#inputCIDADE').load('ajax/cidade.php?estado='+$('#inputESTADO').val());
    });
        $('#inputCIDADE').selectpicker('refresh');
});

This way, the form work partial, because I need choose an value from combo inputESTADO and state of combo inputCIDADE not change, BUT, if I change again combo inputESTADO, the inputCIDADE load the values from first choise. Its leave crazzy...

If I remove class='selectpicker' from inputCIDADE select tag, the form work perfectly.

My doubt is, this problem is direct from my logical in javascript or I need add something on selectpicker to load these values on my second combobox.

The example here in AJAX Form Example

Hugs,
Mentrac

[Rappi]

Hi.
Same here.
Any solution?
Rappi

[leompeters]

I am with the same issue using Angular 2. The values are not loading on select tag but when used with ul > li I got the values on the screen.

[designtoo]

remove the class and attr data-live-search from the code the ajax brings back...
then in the success function, after updating the html, add back class / attr / then refresh the selectpicker
$('#selectID').addClass('selectpicker');
$('#selectID').attr('data-live-search', 'true');
$('#selectID').selectpicker('refresh');
had the same issue - this works for me

[Rappi]

It don't work for me :-(

[fwilmar]

Hi
Same issue.
Any solution?

[muhammedfayazp]

$('#').selectpicker('refresh'); works fine

[onykage]

.selectpicker('refresh') does not always work when your using jquery to add/change elements in the select. They change in the DOM but do not refresh every time, Its hit and miss.

I have tried to refresh the select after each change, tried to render the select after each change, tried to refresh on a DOM change, nothing works perfectly. Obviously this is a large issue, as there are literally hundreds of questions regarding this issue anywhere from git to slack.

#('.selectpicker').selectpicker('refresh'); <-- this should work and only need to be fired at the end of the change to the DOM. It does not work 100% of the time. more like 60/40.

[onykage]

OK, So i don't know about anyone else BUT i found a fix or maybe it what was wrong altogether. I have no idea but this fixed my issues.

make sure the classes"form_control & selectpicker" [class="form_control selectpicker"] are used together.

Hope this works for someone else.

[caseyjhol]

Looking at the original code, it seems the issue is refresh isn't being called from within the change event listener. It should be:

$(document).ready(function(){
    $('#inputESTADO').change(function(){
        $('#inputCIDADE')
            .load('ajax/cidade.php?estado='+$('#inputESTADO').val())
            .selectpicker('refresh');
    });
});

If somebody is actually having an issue with refresh, please send me an example, as I've never found it to be hit or miss. The way the code works, as long as the underlying option elements have been updated when refresh is called, the menu will be updated accordingly.

Please 👍 and follow #899.

[songnghia]

This work for me. Flow this. $('#projectList').selectpicker('refresh').empty().append('sadsadsa').selectpicker('refresh').trigger('change');

[eskarlatalata]

I had the issue too. I solved with the comment of the user "Designtoo" by eliminating the class of the selectpicker and adding it again after the success function with the 'refresh' of the .selectpicker. Here is the relevant piece of the code:

       $("#countryProfile").load('countryselect.php')
		$.ajax({
		  url: 'countryselect.php',
		  success: function(data) {
		    $('#countryProfile').addClass("selectpicker").selectpicker('refresh');  
		  }
});

[kartikgreen]

This work for me. Flow this. $('#projectList').selectpicker('refresh').empty().append('sadsadsa').selectpicker('refresh').trigger('change');

trigger change will call network again

[techwebdev]

I had the issue too. I solved with the comment of the user "Designtoo" by eliminating the class of the selectpicker and adding it again after the success function with the 'refresh' of the .selectpicker. Here is the relevant piece of the code:

       $("#countryProfile").load('countryselect.php')
		$.ajax({
		  url: 'countryselect.php',
		  success: function(data) {
		    $('#countryProfile').addClass("selectpicker").selectpicker('refresh');  
		  }
});

Thanks for sharing your answer I have the same problem and I tried from 3 days. and finally, I find this answer and this work for me
Thanks

[bsuresh584]

I had the issue too. I solved with the comment of the user "Designtoo" by eliminating the class of the selectpicker and adding it again after the success function with the 'refresh' of the .selectpicker. Here is the relevant piece of the code:

       $("#countryProfile").load('countryselect.php')
		$.ajax({
		  url: 'countryselect.php',
		  success: function(data) {
		    $('#countryProfile').addClass("selectpicker").selectpicker('refresh');  
		  }
});

This one is worked for me.Great thanks