Loading Bootstrap select-picker using AJAX

Question

I have a similar problem to this and this one. I've tried all the solutions that are described in the comments. And got to a point where it sort of works.

My problem, when I select a option from #main_cat the content for .sub_cat is loaded the first time (AJAX is loading correctly). But if I select another option from the #main_cat the content is loaded but not using the select-picker style. It just shows:

glyphicon-sort-by-alphabetOPTION 1 (screenshots below)

HTML

<select id="main_cat" name="main_cat" class="selectpicker">
    <option selected="-1">Kies een thema</option>
    <option value="Actief_Avontuur" data-name="Actie & avontuur" data-icon="glyphicon-sort-by-alphabet" class="special">&nbsp;&nbsp;Actief, sportief en avontuurlijk</option>
    <option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special">&nbsp;&nbsp;Creatief</option>
</select>
<select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat">

jQuery

$(function(){
    $('#main_cat').change(function(){
        var $option = $(this).find('option:selected'),
            id = $option.val(),
            name = $option.data('name');
            // open your browser's console log and ensure that you get the correct values
        console.log(id, name);
            $(".sub_cat").empty();
            // call ajax
        $.ajax({
            url: "<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
            type:'POST',
            data: {
                action: 'my_special_ajax_call',
                main_catid: id,
                main_name: name
            },
            success: function (results) {
                $(".sub_cat").removeAttr('disabled').html(results);
                $('.selectpicker_1').selectpicker(["refresh"]);
            }
        });
    });
});         

I have tried refreshing both selectpickers using:

$('.selectpicker').selectpicker(["refresh"]);
$('.selectpicker_1').selectpicker(["refresh"]);

And this (as was suggested in the question in the link)

$('.selectpicker').selectpicker({});

Here are some screenshots: The first one is when I select the option for the first time and the second one is when I select another option from #main_cat. Do I have to do something with a foreach so that I constantly reloads when AJAX is done? Someone know of a solution?

Selecting an option for the first time

Selecting an option for the second time

Solution 1

I've used like this:

$.ajax({
    url: "yoururl",
    type: 'post',
    data: {data: data},
     success: function(response){
            target.empty();
            target.html(response);
            target.selectpicker('refresh'); // without the []
    }
});

Note that I empty the select, dumbing the response and refreshing after... it worked fine! :D hope this helps...

Solution 2

You need to add the following:

.done(function (msg) {
    $("#models_dropdown").html(msg).selectpicker('refresh');
});