Develop Reference

Dynamic Loading of Data Via Ajax

I am new to AJAX and I am trying to load some data when clicked on a button to a modal, But the expected result is not being rendered and there are no errors thrown in the Developers Console.
The code AJAX code is as follows,
<script>
$(document).ready(function()
{
$(document).on('click','.edit_data', function(){
var employee_id = $(this).attr("User_ID");
$.ajax({
url:"fetchuser.php",
method:"POST",
data:{employee_id:employee_id},
dataType:"json",
success:function(data){
$('#floatingInputname').val(data.floatingInputname);
$('#add_data_Modal').modal('show');
}
});
});
});
</script>
And the fetchuser.php code is as follows,
<?php
include 'config.php';
if (isset($_POST['employee_id'])) {
$query = "SELECT * FROM gusers WHERE User_ID = '".$_POST['employee_id']."'";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>
The HTML table structure where I have a button to be clicked for the modal with the data to load is as follows,
<table class="table" id="myTable" style="width: 100%;">
<thead>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">NIC</th>
<th scope="col">Contact</th>
<th scope="col">Role</th>
<th scope="col"></th>
</thead>
<tbody>
<?php
$queryguser = "SELECT * FROM `gusers`";
$gusersresult = mysqli_query($conn,$queryguser);
if ($gusersresult->num_rows>0) {
while ($gusersrow = mysqli_fetch_assoc($gusersresult)) {
?>
<tr>
<td scope="row">
<?php
if (empty($gusersrow['Image'])|| $gusersrow['Image']==null) {
?>
<img src="img/question (1).png" alt="No Profile" style="width:75px; height:75px; border-
radius:20px;">
<?php
}
else{
echo '<img src="data:image;base64,'.base64_encode($gusersrow['Image']).'" alt="Profile Image"
style="width:75px; height:75px; border-radius:50%;">';
}
?>
</td>
<td contenteditable="true" data-old_value="<?php $gusersrow['User_Name']; ?>"
onBlur="inlineedit(this,'User_Name','<?php echo $gusersrow["User_ID"]; ?>')"
onClick="highlightEdit(this);">
<?php echo $gusersrow["User_Name"]; ?>
</td>
<td contenteditable="true" data-old_value="<?php $gusersrow['User_NIC']; ?>"
onBlur="inlineedit(this,'User_NIC','<?php echo $gusersrow["User_ID"]; ?>')"
onClick="highlightEdit(this);">
<?php echo $gusersrow["User_NIC"]; ?>
</td>
<td contenteditable="true" data-old_value="<?php $gusersrow['User_Contact']; ?>"
onBlur="inlineedit(this,'User_Contact','<?php echo $gusersrow["User_ID"]; ?>')"
onClick="highlightEdit(this);">
<?php echo $gusersrow["User_Contact"]; ?>
</td>
<td contenteditable="true" data-old_value="<?php $gusersrow['Role']; ?>"
onBlur="inlineedit(this,'Role','<?php echo $gusersrow["User_ID"]; ?>')"
onClick="highlightEdit(this);">
<?php echo $gusersrow["Role"]; ?>
</td>
<td scope="row" class="text-center"><input type="button" name="edit" value="Edit" id="<?php echo
$gusersrow["User_ID"]; ?>" class="btn btn-info btn-xs edit_data" /></td>
</tr>
<?php
}
}else{
echo "No Records Found";
}
?>
</tbody>
</table>
And the Modal i want the data to be displayed
<div class="modal fade" id="exampleModaluserupdate" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update User Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="row" style="width:100%;">
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInputname">
<label for="floatingInputname">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInputnic">
<label for="floatingInputnic">NIC</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Further to this i have the following JS scripts loaded in my <head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Ajax function run multiple times on modal close and open

I have a form in my modal and I submit the form it submits the data and then fetches the saved data using ajax function. The problem is that, When I close the modal and re opens it and submit the form: the ajax call run twice and thrice if close the modal again reopens again submit again and so on so forth. It works fine when the modal is kept open. The ajax calls runs only once no matter how many times the form is submitted.
I have tried resetting the form in modal on close but nothing worked.
// location.reload(true);
$('#custgroupAssign').val('');
$('#varAssign').val('');
$('#assignStock').val('');
$('#assignPrice').val('');
});
<div id="assignment_model" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content ">
<div class="modal-header">
<h4 class="modal-title"><?php echo $this->lang->line('Assign Products') ?></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="assignment_object">
<form method="post" id="assignment_form" enctype="multipart/form-data">
<tr>
<th>Product:</th>
<td colspan="5">
<h3><?php echo $product['product_name']; ?></h3>
<input type="hidden" id="pid" value="<?= $product['pid'] ?>">
</td>
</tr>
<tr>
<?php if ($product_variations){ ?>
<th>Select Variation</th>
<td colspan="4"><select id="varAssign" class="form-control required">
<option value="">Select</option>
<?php
foreach ($product_variations as $product_variation) {
echo "<option value='".$product_variation['vb']."'>".$product_variation['name']." </option>";
}
?>
</select>
<?php
foreach ($product_variations as $product_variation) {
echo "<input type='hidden' id='qty-".$product_variation['vb']."' value='".$product_variation['qty']."'/>";
}
?>
</td>
<input type="hidden" id="pid" value="<?= $product['pid'] ?>">
<?php } ?>
</tr>
<tr>
<th>Customer Group/var </th>
<th></th>
<th>Stock*</th>
<th>Price*</th>
<th></th>
</tr>
<tr>
<td colspan="2"><select id="custgroupAssign" class="form-control required">
<option value="">Select</option>
<?php
foreach ($cust_groups as $cust_group) {
echo "<option value='".$cust_group['id']."'>".$cust_group['title']." </option>";
}
?>
</select>
</td>
<td><input value="" class="form-control required" id="assignStock">
</td>
<td><input value="" class="form-control" id="assignPrice"
placeholder="<?php echo $this->lang->line('Product Price') ?>">
</td>
<td>
<!-- <button class="btn btn-blue tr_delete">Assign</button>-->
<input type="submit" id="assign-product" class="btn btn-blue margin-bottom"
value="Assign" data-loading-text="Adding...">
<input type="hidden" value="products/assignproduct" id="assignment-url">
</td>
</tr>
</form>
</div>
<div class="modal-footer">
<input type="hidden" id="assignment-object-id" value="">
<input type="hidden" id="assignment-action-url" value="products/assign_products">
<button type="button" data-dismiss="modal"
class="btn"><?php echo $this->lang->line('Close') ?></button>
</div>
</div>
</div>
</div>
$(document).on('click', "#assign-product", function (e) {
e.preventDefault();
jQuery.ajax({
url: baseurl + url,
type: 'POST',
cache: false,
data: 'pid=' + pid + '&custgroupAssign=' + custgroupAssign + '&varAssign=' + varAssign + '&assignStock=' + assignStock + '&assignPrice=' + assignPrice + '&' + crsf_token + '=' + crsf_hash,
dataType: 'json',
success: function (data) {
$('#custgroupAssign').val('');
$('#varAssign').val('');
$('#assignStock').val('');
$('#assignPrice').val('');
var assignedproducts = data.products;
$('#assigned-product-list tbody').empty();
for (var key in assignedproducts) {
var currency = '<?= amountExchange('', 0, $this->aauth->get_user()->loc); ?>';
$('#assigned-product-list tbody').append('<tr><td>'+ assignedproducts[key].product_name +'</td><td>'+ assignedproducts[key].variation +'</td><td>'+ assignedproducts[key].name +'</td><td>'+ assignedproducts[key].stock +'</td><td>'+ currency + assignedproducts[key].product_price +'</td><td><a data-product-id="'+ assignedproducts[key].id +'" class="btn btn-sm btn-danger rmAssgined">X</a></td></tr>');
}
},
error: function (xhr, status, error) {
error_div.append('<div class="alert alert-warning alert-dismissible fade show" role="alert">' + xhr.responseText + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
}
});
});

all dataTable pages becomes one when being refreshed via AJAX

I was trying to implement this guide from this page: How to update an HTML table content without refreshing the page?
I somehow managed to implement it, unfortunately the Client-Side dataTable is destroyed when refreshing it.
By destroyed, all the data in the dataTable is in a single page.
This is the table.
<table id="earnings_amendment_account" class="table table-bordered" style="table-layout: fixed; display: none">
<thead>
<th></th>
<th>Account Code</th>
<th>Account Title</th>
<th>Account Type</th>
<th>Tools</th>
</thead>
<tbody id="table-body">
<?php include 'tableBody.php';?>
</tbody>
</table>
This is the tableBody.php
<?php include 'backend/conn.php'; ?>
<?php
$params=array();
$sql = "SELECT accountcode,accounttype,accounttitle,accounttype,postedby,dateposted,approvedby,dateapproved FROM earningsamendmentaccount";
$query = sqlsrv_query($conn, $sql, $params, array("Scrollable" => SQLSRV_CURSOR_KEYSET));
if ($query === false ) { echo "Error (sqlsrv_query): ".print_r(sqlsrv_errors(), true); exit; }
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr data-key-1='".$row['postedby']."' data-key-2='".$row['dateposted']."' data-key-3='".$row['approvedby']."' data-key-4='".$row['dateapproved']."'>
<td class='details-control'></td>
<td>".$row['accountcode']."</td>
<td>".$row['accounttitle']."</td>
<td>".$row['accounttype']."</td>
<td>
<button class='btn btn-default btn-sm view btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-eye'></i> View</button>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-edit'></i> Edit</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-trash'></i> Delete</button>
" ?>
<?php if (empty($row['approvedby'])) { echo " <button class='btn btn-warning btn-sm approve btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-check-square-o'></i> Approve</button> "; } ?>
<?php "
</tr>
";
}
?>
This is my jQuery/AJAX - (earnings_amendment_account.php)
function SubmitFormData() {
var add = $("#add").val();
var add_accountcode = $("#add_accountcode").val();
var accounttitle = $("#accounttitle").val();
var accounttype = $("#accounttype").val();
var postedby = $("#postedby").val();
var dateposted = $("#dateposted").val();
$.post("earnings_amendment_account_add.php",
{
add: add,
add_accountcode: add_accountcode,
accounttitle: accounttitle,
accounttype: accounttype,
postedby: postedby,
dateposted: dateposted
},
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
$.get("tableBody.php", function(data) {
$("#table-body").html(data);
$("#earnings_amendment_account").DataTable().ajax.reload();
});
});
}
This is the modal being called.
<form autocomplete='off' id="myForm" class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">
<!-- Table Loader -->
<div class="form-group" id="earnings_amendment_account_modalload">
<div class="col-sm-9" id= "earnings_amendment_account_modalload" style="width:100%">
</div></div>
<div class="form-group">
<label for="accounttitle" class="col-sm-3 control-label">Account Title</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="accounttitle" name="accounttitle" style="text-transform:uppercase;width:90%" required>
</div>
</div>
<div class="form-group" hidden>
<label for="postedby" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="postedby" name="postedby" value="<?php echo $user['firstname'].' '.$user['lastname']; ?>" required>
</div>
</div>
<div class="form-group" hidden>
<label for="dateposted" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="dateposted" name="dateposted" value="<?php echo gmdate('Y-m-d h:i:s'); ?>" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default info btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="button" onclick="SubmitFormData();" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
<div id="results"></div>
</form>
This is the dataTable.
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-bordered">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
} return html += '</table>'; }
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
// Add event listener for opening and closing details
$('#earnings_amendment_account').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = earnings_amendment_account_table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Posted By : ' : tr.data('key-1'),
'Date Posted : ' : tr.data('key-2'),
'Approved By : ' : tr.data('key-3'),
'Date Approved : ' : tr.data('key-4')
})).show();
tr.addClass('shown');
} });
Is there a way for this to be fixed?

try use your datatable object
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
so on your jQuery/AJAX - (earnings_amendment_account.php) change $("#earnings_amendment_account").DataTable().ajax.reload(); to earnings_amendment_account_table.ajax.reload();

How to multiple update rows with modal bottstrap

hello guys can you help me with my problem, i want to update multiple rows with modal bootstrap
So when I check the line and press the update button, it will appear modal bootstrap and I will update from there
I'm having trouble finding the script, can you help me finish my code?
this is the explanation
I checked the line
After that I press "Pindah Department" or in english "Move Departemen"
this basically updates quickly, just you check the line and press the "Move Departement" button, then bootstrap capital appears and you will select the value in the dropdown to update the line
this is my view :
<div class="row">
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">Data Siswa Departemen ......</div>
<div class="panel-body">
<table id="emp_id" class="table table-bordered dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
<th width="1%" align="center">No.</th>
<th width="20%" align="center">Nama Lengkap</th>
<th width="5%" align="center">No Induk</th>
<th width="10%" align="center">Jenis Kelamin</th>
<th width="5%" align="center">PIN</th>
<th width="20%" align="center">Departemen</th>
</tr>
</thead>
<tbody>
<?php
foreach($data as $d){
?>
<tr>
<td>
<input class="childbox" width="1%" type="checkbox" name="msg[]" align="center" value="" data-userid="<?php echo $d['emp_id'] ?>"/>
</td>
<td width="1%" align="center"><?php echo $d['emp_id']; ?></td>
<td class="data-check"><?php echo $d['first_name']; ?></td>
<td class="data-check"><?php echo $d['nik']; ?></td>
<td class="data-check"><?php echo $d['gender']=='0' ? 'Laki-Laki' : 'Perempuan'; ?></td>
<td class="data-check"><?php echo $d['pin']; ?></td>
<td class="data-check"><?php echo $d['dept_name']; ?></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
<th width="1%" align="center">No.</th>
<th width="20%" align="center">Nama Lengkap</th>
<th width="5%" align="center">No Induk</th>
<th width="10%" align="center">Jenis Kelamin</th>
<th width="5%" align="center">PIN</th>
<th width="20%" align="center">Departemen</th>
</tr>
</tfoot>
</table>
</div>
<div class="panel-footer">
<button class="btn btn-success" onclick="edit_book(<?php echo $d['emp_id'];?>)"> Move Departemen</button>
</div>
</div><!--end panel-->
<script src="<?php echo base_url() ?>assets/baru/jquery-3.2.1.min.js"></script>
<script src="<?php echo base_url() ?>assets/baru/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url() ?>assets/baru/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#emp_id').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
$("input[name='checkAll']").click(function() {
var checked = $(this).attr("checked");
$("#emp_id tr td input:checkbox").attr("checked", checked); });
} );
function toggle(id) {
checkboxes = document.getElementsByName('msg[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = id.checked;
}
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo site_url('proses/book_add')?>";
}
else
{
url = "<?php echo site_url('proses/book_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: prepareData(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
</script>
<!--modal-->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Departemen</h4>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="emp_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Departemen</label>
<div class="col-md-9">
<select name="dept_id_auto" class="form-control pull-right">
<?php
foreach($groups as $c)
{
echo '<option value="'.$c['dept_id_auto'].'">'.$c['dept_name'].'</option>';
}
?>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div><!-- end cols-->
</div><!--end row-->
I have trouble finding the script that will be called in the "Move Departement" button
This is my controller :
public function pindah_departemen()
{
// MASUKKAN PARAMETER DATA DISINI, BIASANYA HASIL DARI QUERY
$data = array(
'title' => 'Pindah Departemen',
'data' => $this->Pindah_dept_model->GetSiswa($this->input->get('filter_departemen'))
);
$data['groups'] = $this->Pindah_dept_model->getAllGroups();
$this->template->load('template','proses/pindah_departemen', $data);
}
public function book_update()
{
$data = array(
'dept_id_auto' => $this->input->post('dept_id_auto'),
);
$this->Pindah_dept_model->update_departemen(array('emp_id' => $this->input->post('emp_id')), $data);
echo json_encode(array("status" => TRUE));
}
public function ajax_edit($id)
{
$data = $this->Pindah_dept_model->get_by_id($id);
echo json_encode($data);
}
This is my Model :
class Pindah_dept_model extends CI_Model
{
var $table = 'emp';
public function GetSiswa($dep=NULL)
{
$this->db->select(array('emp_id', 'first_name', 'nik', 'gender', 'pin', 'dept_name'))
->from('emp AS e')
->join('dept AS d','d.dept_id_auto = e.dept_id_auto', 'left');
if(!empty($dep)) $this->db->where('d.dept_id_auto', $dep);
$data = $this->db->order_by('emp_id','ASC')->get();
return $data->result_array();
}
public function getAllGroups()
{
$query = $this->db->query('SELECT dept_id_auto,dept_name FROM dept');
return $query->result_array();
}
public function get_by_id($id)
{
$this->db->from($this->table);
$this->db->where('emp_id',$id);
$query = $this->db->get();
return $query->row();
}
public function update_departemen($where, $data)
{
$this->db->update($this->table, $data, $where);
return $this->db->affected_rows();
}
please guys help me finish my code, i'm looking for a way out for my code for 2 weeks and still no results
Thanks Before

I don't know if I'm late or not.
You can try do something like below.
HTML
<label>Value 1 <input name='checkme[]' type='checkbox' value='1'></label><br>
<label>Value 2 <input name='checkme[]' type='checkbox' value='2'></label><br>
<label>Value 3 <input name='checkme[]' type='checkbox' value='3'></label><br>
<label>Value 4 <input name='checkme[]' type='checkbox' value='4'></label><br>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_form" >Open Sesame</button>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Departemen</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="emp_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Departemen</label>
<div class="col-md-9">
<select name="dept_id_auto" class="form-control pull-right">
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
Add hidden input, and we will get the checked value and store here later.
JAVASCRIPT
$(document).ready(function(){
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var vals = $('input:checkbox[name="checkme[]"]').map(function() {
return this.checked ? this.value : undefined;
}).get();
var modal = $(this);
modal.find('.modal-title').text("Open Sesame : Most code in here from bootstrap documentation. XD"); // just for fun.
modal.find(".modal-body input[name='list_check']").val(vals);
});
$("form").on("submit",function(x){
var val_submit = $(this).serialize(); // data to be send via ajax
alert("POST DATA : "+val_submit+"\n This is the value you will submit. The rest you can figure it out. Use explode() to split the list_check. And update like you want it.");
x.preventDefault();
});
});
After the button to open the modal. We will get the value from checkbox name checkme[]. This data need to be explode later in your php.
And try submit it.
I'm not going to take all your code. you need to figure out the rest by yourself. I just prepare example code that can be use. Maybe just like you want it. :)
JSFiddle Example : https://jsfiddle.net/synz/pyb7rjdo/

Bootstrap modal does not showing information

I have entered an internship for 6 month and I'm currently developing a web system using Bootstrap modal. I am experiencing an issue where my modal view is failing to show any information. There are no errors in the scripting but I do not know how to fix it. Its just blank. Any suggestion?
This is modal view for staff detail which is showing no information:
Below is the code from the two of files that are being used to show the modal view.
index.html
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_user ORDER BY user_id DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>ADD NEW USER</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Admin Log Site </h3>
<br />
<div class="table-responsive">
<div align="right">
<button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add New User</button>
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%">Staff Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["uname"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["user_id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<!-- modal insert division -->
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADMIN SITE</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Staff Username</label>
<input type="text" name="uname" id="uname" class="form-control" />
<br />
<label>Enter Staff ID</label>
<input type="text" name="staff_number" id="staff_number" class="form-control" />
<br />
<label>Staff Roles</label>
<select name="staff_role" id="staff_role" class="form-control">
<option value="Administration">Administration</option>
<option value="Project Manager">Project Manager</option>
<option value="Staff">Staff</option>
</select>
<br />
<label>Password</label>
<input type="text" name="password" id="password" class="form-control" />
<br />
<input type="submit" name="insert" id="insert" value="Add user" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal view employer -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Staff Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#uname').val() == "")
{
alert("Name is required");
}
else if($('#staff_number').val() == "")
{
alert("Staff id is required");
}
else if($('#staff_role').val() == "")
{
alert("Staff role is required");
}
else if($('#password').val() == "")
{
alert("password is required");
}
else
{
$.ajax({
url:"insertdata.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
}
});
$(document).on('click', '.view_data', function(){
//$('#dataModal').modal();
var user_id = $(this).attr("user_id");
$.ajax({
url:"view.php",
method:"POST",
data:{user_id:user_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
});
});
</script>
For the view inforamtion as follow.
view.php
<?php
//select.php
if(isset($_POST["user_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["user_id"]."'";
//$query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label> Staff Name</label></td>
<td width="70%">'.$row["uname"].'</td>
</tr>
<tr>
<td width="30%"><label>Staff Id</label></td>
<td width="70%">'.$row["staff_number"].'</td>
</tr>
<tr>
<td width="30%"><label>Staff Role</label></td>
<td width="70%">'.$row["staff_role"].'</td>
</tr>
<tr>
<td width="30%"><label>password</label></td>
<td width="70%">'.$row["password"].'</td>
</tr>
';
}
$output .= '</table></div>';
echo $output;
}
?>

Your problem is that your $.ajax POST is sending JSON data but your PHP view is looking for items in $_POST.
To set $_POST values try this:
$.ajax({
url: "view.php",
method: "POST",
data: "user_id="+user_id,
success: function(data) {
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
Note: Typically your input elements would be inside of a <form> tag. When they are you can use $('#formid').serialize() to convert your input elements into a string that you can pass to the ajax call as the data variable.
For example:
<form id="getUserDetails">
<label for="user_id">A bar</label>
<input id="user_id" name="user_id" type="text" value="" />
<input type="submit" value="Send" onclick="PostThis();return false;
/>
</form>
var data = $('#getUserDetails').serialize();
$.ajax({
url: "test.php",
type: "post",
data: data ,
success: function (response) {
$('#employee_detail').html(response);
$('#dataModal').modal('show');
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});