I’m have built a DataTable table with an edit button that opens up a bootstrap modal to edit the record. I used the answer from Yevgen Gorbunkov here : Edit DataTables source data, using form inside pop-up window Btw if you happen to read this thread, thank you for this solution!
I can get inputs and textareas to prefill with data but I have stumbled with select values. I can see that it selects a right value but it doesnt appear as selected when I open up the form.(https://www.upload.ee/image/11198680/probleem.PNG). Notice the little tick on the right.
I think that the problem is that my select options doesnt have selected value but I don’t know how to add it? Can someone help me or point out the way to solution?
My select tag:
<select class="form-control kt-selectpicker" data-live-search="true" id="VaruosaSeotudBIDMuuda" name="VaruosaSeotudBIDMuuda" style="width: 100%;" data-src="VaruosaSeotudBID">
<option></option>
<?php
include ("config.php");
$sql = mysqli_query($con, "SELECT varuosad.VaruosaID, varuosad.VaruosaNimetus, varuosad.VaruosaKood from varuosad");
while ($row = $sql->fetch_assoc()){
echo "<option value=" . $row['VaruosaID'] . ">" . $row['VaruosaNimetus'] . ' / '. $row['VaruosaKood'] . "</option>";
}
?>
</select>
Getting the row info from datatable
//edit row handler
table.on('click', '.edit', function(){
//get clicked row
const rowClicked = table.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//$('#VaruosaSeotudBIDMuuda').val('3');
//set modal attribute rowindex to corresponding row index
$('#MuudaSeotudToodeForm').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#SeotudToodeMuudaModal').modal('toggle');
});
//submit edits handler
$('#SeotudToodeMuudaModal').on('click', '#MuudaSeotudToodeBTN', function(){
//grab modified data into object
const modifiedData = {};
$.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});
//send modified data to the backend
$.ajax({
url: 'pages/varuosakataloog/varuosakataloogMuudaSeotudToode.php',
method: 'POST',
data: {id: $('#MuudaSeotudToodeForm').attr('rowindex'), ...modifiedData},
success: () => {
//close the modal
$('#SeotudToodeMuudaModal').modal('hide');
//re-draw datatable
table.ajax.reload();
}
});
});
Advertisement
Answer
I solved my problem. Got help here.
bootstrap-select nothing selected
Adding this solved my problem :
$('#VaruosaSeotudBIDMuuda').selectpicker('refresh');
full code if any beginner finds his way here :
//edit row handler
table.on('click', '.edit', function(){
//get clicked row
const rowClicked = table.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
$('#VaruosaSeotudBIDMuuda').selectpicker('refresh');
//set modal attribute rowindex to corresponding row index
$('#MuudaSeotudToodeForm').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#SeotudToodeMuudaModal').modal('toggle');
});