CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Derex
Derex

Reputation: 59

How can I fetch MySQL datas in bootstrap multiselect?

I created an admin panel for MySQL database, and when I click on the edit button, I want to print all of the datas in Bootstrap multi select. If I didn't use Bootstrap multi select, just the normal multi select, it's working. How can I do this?

This is how it looks like (in the button, it show the current datas, but when I open, it didn't showin the select menu):

enter image description here

index.php

<select name="classification[]" id="classification" multiple="multiple">
   <?php 
      while($row = $classificationResult -> fetch_array()) {
   ?>
   <option value="<?php echo $row['classification_id'];?>"><?php echo $row['name'];?></option>
   <?php
      }
   ?>
</select>

<script>
   // If I didn't add the multi select jquery, it's working
   $('#classification').multiselect({
        nonSelectedText: 'Select Framework',
        maxHeight : 400,
        includeSelectAllOption : false,
        enableFiltering : false,
        buttonWidth : '100%',
        dropRight : true
    });

        $(document).on('click', '.edit_data', function(){
            $("#classification option").prop("selected", false);
            var data_id = $(this).attr("id");  
            $.ajax({  
                url:"fetchRole.php",  
                method:"POST",  
                data:{'data_id':data_id},  
                dataType:"json",  
                success:function(data){  
                    $.each(data.classifications, function(i, e) {
                        $("#classification option[value='" + e + "']").prop("selected", true);
                    });
                    $('#data_id').val(data.id);  
                    $('#insert').val("Edit");  
                    $('#add_data_Modal').modal('show');  
                }  
            });  
        });  
</script>

fetchRole.php

$query2 = $conn -> prepare("SELECT classification.classification_id AS class_id
            FROM classification
            LEFT JOIN role_classification ON classification.classification_id = role_classification.classification_id
            WHERE role_classification.role_id = ?");
        $query2 -> bind_param('i', $role['id']);
        $query2 -> execute();
        $result2 = $query2 -> get_result();
        $query2 -> close();

        while ($classification = $result2 -> fetch_assoc()) {
            $classificationIdList[] = $classification["class_id"];
        }



        $return = array_merge($role, ["classifications" => $classificationIdList]);

    echo json_encode($return);

Upvotes: 0

Views: 758

Answers (1)

Patrick Q
Patrick Q

Reputation: 6393

You need to refresh the multiselect after you set new selected options using .prop("selected", true).

$.each(data.classifications, function(i, e) {
    $("#classification option[value='" + e + "']").prop("selected", true);
});

$('#classification').multiselect('refresh');

Description of the refresh method:

This method is used to refresh the checked checkboxes based on the currently selected options within the select.

You can see the full list of available methods HERE.

Upvotes: 1

Related Questions