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

Solution 1

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!');
        }
    });
});

Solution 2

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>

Comments

[Chitrang]

What happens after you get data from Ajax? Is it showing any "select" element inside "players1" div? Is there any error in console?

[Anel]

No,no,now is fine,but can you explain me why initialization needs to be inside ajax call,and in yours case at the end ?I also have initialize after ajax call(logic: i will have innerhtml and after that i will initialize .selectpicker). In yours case logic is same, but it is inside ajax block. What is the difference?

[Chitrang]

The success callback function of Ajax is only called after your data is loaded from server and then you have html inside DOM. When you initialize selectpicker outside Ajax call, like you did in question, $('.selectpicker') will not give any element from DOM and hence we cannot apply selectpicker on that. (This may help: learn.jquery.com/ajax/key-concepts)

[Anel]

Thank you for your help Chitrang. Cheers

[Dayron Gallardo]

This doesn't answer the question