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

`$('.selectpicker').selectpicker(["refresh"]); $('.selectpicker_1').selectpicker(["refresh"]);` remove `[`,`]` square brackets `$('.selectpicker').selectpicker("refresh"); $('.selectpicker_1').selectpicker("refresh");` if still not work also check your console for any errors ? — Curiousdev, Apr 20 '17 at 09:49
Funny, I cant remember using `[`,`]` but I removed them and it didn't solve the problem. and checked console, nothing there. — Jay-oh, Apr 20 '17 at 09:54
I've added this `error:function(exception){alert('Exeption:'+exception);}` but nothing? — Jay-oh, Apr 20 '17 at 10:02
@elforna, added `dataType : "html",` to the $.ajax function. Did not solve the problem. Still getting the second screenshot when I select another option from `#main_cat`. — Jay-oh, Apr 20 '17 at 10:10

score 11 · Accepted Answer · answered Jul 12 '17 at 15:14

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...

score 2 · Answer 2 · edited Feb 17 '18 at 08:15

2

You need to add the following:

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

edited Feb 17 '18 at 08:15

Mohammad Usman

37,952
20
92
95

answered Feb 17 '18 at 08:11

ibrahim barada

111
2

Loading Bootstrap select-picker using AJAX

2 Answers2