Ajax with method selectpicker('refresh')
See original GitHub issueHi 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:
- Created 7 years ago
- Reactions:2
- Comments:14 (1 by maintainers)
Top Related StackOverflow Question
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
$(‘#’).selectpicker(‘refresh’); works fine