Twitter Bootstrap Question posted in

Bootstrap Multi-select not working in a POST dropdown? – Twitter bootstrap

I’ve got the following pre-requisites for initializing multi-select.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap core and multiselect JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

It doesn’t appear to be working as expected as shown here:
enter image description here

Now what I have as a second dropdown ‘Name’ is an AJAX-type dropdown based from the value of the first dropdown ‘Select Integration’.

<tr>
<td>Select Integration: </td> <td>
    <select name="new_src_type_id" id="integration-list" class="form-control" onChange="getState(this.value);">
            <option value="">Select Integration</option>
        <?php
            foreach ($integration_id as $index_integ => $integ_id) {
                echo "<option value='$integ_id'>".$integration[$index_integ]." </option>";
            }
        ?>
    </select>
</td>
</tr>
<tr>
<td>Name: (The changes made will be applied to the ff:)</td> <td>
    <select name="element[]" id="element-list" class="form-control" multiple="multiple">
</select>
</td>
</tr>

called by:

<script>
function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_element.php",
    data:'src_type_id='+val,
    success: function(data){
        $("#element-list").html(data);
    }
    });
}
</script>

I’d like to be able to initialize the second dropdown ‘Name’ as a multi-select dropdown but it doesn’t work like how the docs showed it.
http://davidstutz.github.io/bootstrap-multiselect/

And this doesn’t seem to work when I call it like this:

<script>
$(document).ready(function() { 
        $('#element-list').multiselect({
            includeSelectAllOption: true
        });
    });
</script>
Tags:

2

Answers


  1. 0

    Sometimes you can’t initialize element after loaded using ajax, you need to re-initialize again after that ajax finish loaded.

    <script>
    function getState(val) {
        $.ajax({
        type: "POST",
        url: "get_element.php",
        data:'src_type_id='+val,
        success: function(data){
            $("#element-list").html(data);
            $('#element-list').multiselect({ includeSelectAllOption: true });
        }
        });
    }
</script>
    Login or Signup to reply.
  2. 0

    You need to initialize your multiselect like below (Assuming your ajax call is returning values correctly as you want).

    function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_element.php",
    data:'src_type_id='+val,
    success: function(data){
        $("#element-list").append($('<option></option>').val(data).html(data)).multiselect("destroy").multiselect({
            includeSelectAllOption: true,          //For SelectAll Option
            enableFiltering: true,                 //For Search Option
         });
    }
}

    I have written 

    .multiselect("destroy")

    to destroy the previous instance of multiselect as you are going to change values of multiselect depending on dropdown.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search