Bootstrap-select with ajax jquery is not working

Question

I'm using bootstrap-select and everything is working fine,until options of my select tag are filled with data from php file. I have seen each post on this topic, but there is no answer. So here is an example: Style:

<link rel="stylesheet" href="dist/css/bootstrap-select.css"><!-- This is from my path-->

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Html:

<!-- This is working -->
<div class="players col col-lg-3">
    <label for='selectPlayer'> Pick the Player: </label>
    <select class='selectpicker' data-style='btn-info'>
        <optgroup id="opt" label='Players'>
            <option>Ronaldo</option>
        </optgroup>
    </select>
</div> <!-- Select Player -->

<!-- This is not working,when using ajax jquery -->
<label for='selectClub'> Tested ajax jquery : </label>
<div id="players1" class="players1" data-container="body"></div> <!-- Jquery-->

Scripts:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="dist/js/bootstrap-select.js"></script> <!-- This is from my path,and must be at the end-->

<script>
/* ---------- References ---------- */
// http://stackoverflow.com/questions/15726411/how-to-use-bootstrap-select
// http://stackoverflow.com/questions/5807565/return-value-from-ajax-call-is-not-shown-in-the-page-source
$(document).ready(function() {
$.ajax({
        type:"GET",
        url:'selectPHP.php',
        data:{},
        success: function (response) {
            alert(response);
            $('#players1').html(response);
            console.log((response));
        },
        error: function () {
            $('#players1').html('There was an error!');
        }
    });

    $('.selectpicker').selectpicker({
        style: 'btn-primary',
        size: 2
    });
});
</script>

php file:

echo "<select class='selectpicker' data-style='btn-primary'>";
echo "<option> data 1 </option>";
echo " </select><!-- select -->";

I'm receiving the data using ajax,but those data are not shown on the page. For example I used bootstrap-table,and it is working, but not in the case of bootstrap-select. Do you have any hints about this topic?

Best regards

Answer 1

you need to refresh the select picker

<script>
/* ---------- References ---------- */
// http://stackoverflow.com/questions/15726411/how-to-use-bootstrap-select
// http://stackoverflow.com/questions/5807565/return-value-from-ajax-call-is-not-shown-in-the-page-source
$(document).ready(function() {
$.ajax({
        type:"GET",
        url:'selectPHP.php',
        data:{},
        success: function (response) {
            alert(response);
            $('#players1').html(response);
            console.log((response));
        },
        error: function () {
            $('#players1').html('There was an error!');
        }
    });

    $( '.selectpicker' ).selectpicker( 'refresh' );;
});
</script>

Answer 2

This will help. Please check your cdns and selecpicker files. If you add options programmatically you need to refresh select picker after added options. Try this;

$('.selectpicker').selectpicker('refresh');

Answer 3

Or this will help:

$('.selectpicker').selectpicker({ // your custom styles});

at the end of the ajax page (selectPHP.php).

Answer 4

You need to initialize selectpicker after you get result from Ajax call successfully:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'selectPHP.php',
        data: {},
        success: function (response) {
            alert(response);
            $('#players1').html(response);
            console.log((response));
            $('.selectpicker').selectpicker({
                style: 'btn-primary',
                size: 2
            });
        },
        error: function () {
            $('#players1').html('There was an error!');
        }
    });
});