Bootstrap-Select: get comma values from a Mysql column and display them automaticly inside bootstrap-select as checked
I'm working with Bootstrap-Select and I would like that some options inside this multiple dropdown list, would it be checked based on comma values from a Mysql column. I found one similar question, but I didn't find a correct way to solve my question:
Bootstrap select - Get selected Value
Below are two tables that describe my question:
colors_tbl
colorID | color |
--------+-------+
01 | Blue |
02 | Black |
03 | Green |
04 | Red |
05 | White |
-----------------
And below is the table that storage the values with comma inside column Color. The color column is a foreign key of Colors table above.
cars_tbl
carID | car | colors
------+------+------------------
01 | BMW | Red,Blue,Green
02 | GM | Red,Black,White
03 | FORD | Green,Gray,Black
--------------------------------
Based on the information above, I would like to get color values from cars_tbl on colors column (ID 03), for example, and display these values inside Bootstrap select as checked when a bootstrap modal is open.
Below is an image that show what has been described:
Below is the html code of bootstrap modal that display Bootstrap-Select inside and a jQuery function that open modal and display data using ajax results:
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Car</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" id="user_form" enctype="multipart/form-data">
<div class="row">
<div class="col">
<label>Car</label>
<input type="text" name="car" id="car" class="form-control"/>
</div>
<div class="col">
<div class="form-group">
<label>Colors</label>
<?php
include 'pdo_connection.php';
$stmt = $connection->prepare('SELECT * FROM colors_tbl');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<select class="selectpicker form-control" name="colors[]" id="colors" data-actions-box="true" multiple>
<?php foreach($results as $row): ?>
<option value="<?= $row['colorID']; ?>"><?= $row['color']; ?></option>
<?php endforeach ?>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="user_id" id="user_id" />
<input type="hidden" name="operation" id="operation" />
<input type="submit" name="action" id="action" class="btn btn-warning" value="" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).on('click', '.update', function(){
var user_id = $(this).attr("id");
$.ajax({
url:"fetch_single.php",
method:"POST",
data:{user_id:user_id},
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#car').val(data.car);
$('#colors').val(data.colors);
$('#user_id').val(user_id);
$('#action').val("Edit Car");
$('#operation').val("Edit");
}
})
});
</script>
And a php script (fetch_single.php) that fetch data when modal above is open:
<?php
include 'pdo_connection.php';
if(isset($_POST["user_id"]))
{
$output = array();
$statement = $connection->prepare(
"SELECT * FROM cars = '".$_POST["user_id"]."'
LIMIT 1"
);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output["car"] = $row["car"];
$output["colors"] = $row['colors'];
}
echo json_encode($output);
}
?>
To try to solve this doubt, i tried to put this code below after variable $output = array(); of fetch_single script above:
$array = array($row['colors']);
$colors = implode(",", $array);
And replace this line:
$output["colors"] = $row['colors'];
to this:
$output["colors"] = $color;
But no success.
UPDATED
I found a method that Bootstrap-select use to get values and display inside dropdown list. The method is:
$('.selectpicker').selectpicker('val', ['value 1','value 2']);
In this case, i put this selectpicker method inside ajax success and i dont know how can i get colors values from my php script that send results in JSON format to Ajax. If i replace the values 'value 1' and 'value 2' to 'data.colors' inside brackets above, i didn't get nothing when modal is opened:
$.ajax({
url:"fetch_single.php",
method:"POST",
data:{user_id:user_id},
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#car').val(data.car);
$('#colors').selectpicker('val', [data.colors]);
$('#user_id').val(user_id);
$('#action').val("Edit Car");
$('#operation').val("Edit");
}
})
How can i put colors values from JSON format and put indide selectpicker.('val', [])?
I dont understand the method of some moderators. I found a solution myself to solve my doubt and probably hundreds of doubts of programmers who might have the same doubt. Less bureaucracy, please.
To be more specific, according to some incomprehensible moderators:
I solve my question using javascript string split() method. The split() method is used to split a string into an array of substrings, and returns a new array.
Tip: If an empty string ("") is used as the separator, the string is split between each character.
Note: The split() method does not change the original string.
$('.selectpicker').selectpicker('val', data.color.split(','));
Is that good now? Free hugs for all lords of stackoverflow!!!