Ajax with method selectpicker('refresh')

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
designtoocommented, Dec 4, 2016

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

6reactions
muhammedfayazpcommented, Dec 19, 2017

$(‘#’).selectpicker(‘refresh’); works fine

Read more comments on GitHub >

github_iconTop Results From Across the Web

jquery bootstrap selectpicker refreshing lists based upon ...
I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh'); exactly after adding items to my list did the job.
Read more >
Methods | bootstrap-select - SnapAppointments | Developer
To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the...
Read more >
Add or Remove Selectpicker Dropdown Dynamically in PHP ...
How to Add More Selectpicker Select Box Fields Dynamically using jQuery and insert multiple fields value using PHP with Ajax.
Read more >
Broken Bootstrap selectpicker after AJAX reload - solved
To fix this and to have your select input items behave as expected, add the following code to a javascript file included in...
Read more >
PHP jQuery Dynamic Selectpicker Dropdown box using ...
selectpicker ').selectpicker('refresh'); code. Same way for remove single row of input field and select picker select box, we have to clickm on ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found