how to update with modal bootstrap and checkbox - php

Question

hey guys how can i update multiple rows with checkbox and display modal bootstrap after pressing update button?
example like this:
I checked the line with the checkbox
After that I press "Pindah Department" or in english "Move Departemen"
actually I do not need the edit book () function, I only need one function and the funtion it can call modal bootstrap pops up, to update from the dropdown menu"
i forgot to change save button to call function prepareData(), pop up appears, but I do not know what it is
I can only edit it one by one, with Modal Bootstrap, how can i be like above that?
this is my view:
<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="1%" align="center">Edit</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[]" id="id" align="center" value="<?php echo $d['emp_id'] ?>" />
</td>
<td width="1%" align="center"><?php echo $d['emp_id']; ?></td>
<td><button class="btn btn-light" onclick="edit_book(<?php echo $d['emp_id'];?>)"><i class="glyphicon glyphicon-pencil"></i></button></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="1%" align="center">Edit</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>
this is my script to bring up modal bootstrap and for checkbox functions:
<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 add_book()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
//$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
function edit_book(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('proses/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="emp_id"]').val(data.emp_id);
$('[name="dept_id_auto"]').val(data.dept_id_auto);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Departemen'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
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: $('#form').serialize(),
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>
and this is my modal bootstrap :
<div id="modal_form" class="modal fade" 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">Tambah Siswa</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 for="colFormLabelLg" class="col-sm-4 col-form-label col-form-label-lg">Pilih Departemen Baru</label>
<div class="col-sm-6">
<select name="dept_id_auto" class="form-control pull-right">
<?php
foreach($groups as $row)
{
echo '<option name="dept_id_auto" value="'.$row['dept_id_auto'].'">'.$row['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>
and this is my controller :
public function book_update()
{
$data = array(
'dept_id_auto' => $this->input->post('dept_id_auto'),
);
$this->Pindah_dept_model->book_update(array('devid_auto' => $this->input->post('devid_auto')), $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);
}
and this is my model :
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 book_update($where, $data)
{
$this->db->update($this->table, $data, $where);
return $this->db->affected_rows();
}
hey Eiji can you modify this code because, if I use this code I can do multiple update rows, but this code does not display modal bootstrap, it's just this code directly call the function in the controller, but have the same concept only this code can not display modal bootstrap, please
function update(id)
{
var list_id = [];
$("#id:checked").each(function() {
list_id.push(parseInt(this.value));
});
console.info(JSON.stringify(list_id));
if(list_id.length > 0)
{
if(confirm('Are you sure update this '+list_id.length+' data?'))
{
$.ajax({
type: 'POST',
data: {'devid_auto': list_id},
url: '<?php echo site_url('setting/mesin_update')?>',
success: function(result)
{
var hasil = result.replace(/\s/g,'');
if(hasil == 'y')
{
alert("Data Berhasil di Update");
location.reload();
}
else
{
alert('Failed.');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error update data');
}
});
}
}
else
{
alert('no data selected');
}
}

Answer 1

Small correction in your html, Please delete the id="id", this is a big mistakes, because the id shoud be unique.
<input class="childbox" width="1%" type="checkbox" name="msg[]" align="center" value="" data-userid="<?php echo $d['emp_id'] ?>"/>
you have to define which of your line has been checked.
var user_id_list = []; //this will be the collection of id
//for each checked checkbox do...
$("input[type=checkbox].childbox").each(function(){
//get the user id value of the line
var the_userid = $(this).data('userid');
//add it to our collection
user_id_list.push( the_userid );
});
you find what is the option selected.
var new_dept = $("#modal_form select[name=dept_id_auto] option:selected").val();
You have to pass all this to your ajax request. So there is your ajax and a new function to add
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(), //<-- here we call it
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');
}
});
}
function prepareData(){
$data = [];
var user_id_list = []; //this will be the collection of id
//for each checked checkbox do...
$("input[type=checkbox].childbox").each(function(){
//get the user id value of the line
var the_userid = $(this).data('userid');
//add it to our collection
user_id_list.push( the_userid );
});
//select the new debt value
var new_dept = $("#modal_form select[name=dept_id_auto] option:selected").val();
//we pass all the data to an array
data.push('user_id_list',user_id_list);
data.push('new_dept', new_dept);
return data;
}
Now, in your controller, you should have two post data :
* new_dept, which content an int of the new dept
* user_id_list, which is an array of id.
So you just need to adapt your model and it's over.
Change the line
<div class="modal-footer">
<!-- change here -->
<button type="button" id="btnSave" onclick="prepareData()" class="btn btn-primary">Save</button>
<!-- end change -->
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
Then, in your javascript function prepareData()
//we pass all the data to an array
data.push('user_id_list',user_id_list);
data.push('new_dept', new_dept);
//add this line for the debugging
alert( JSON.stringify(data) )
//this will display the current data value, even if it's an array/object or whatever
return data;

Answer 2

you can use my code for referenction
<td>
<button class="btn btn-success" data-toggle="modal" data-target="#r<?php echo $rule2->id_forward;?>">Edit </button>
<?=anchor('guru/hapus_rule/'.$rule2->id_forward,'Hapus',['class'=>'btn btn-danger btn-sm'])?>
</td>
<div class="modal modal-success" id="r<?php echo $rule2->id_forward;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<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" align="center">Edit Rule</h4>
</div>
<div class="modal-body">
<?php echo form_open_multipart('guru/ubah_rule/'.$rule2->id_forward);?>
<div class="form-group">
<label for="Kondisi">Kondisi 1</label>
<select class="form-control" name="kondisi">
<option value="">Pilih</option>
<?php foreach ($kondisi as $key) {?>
<option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_1==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="Kondisi_2">Kondisi 2</label>
<select class="form-control" name="kondisi_2">
<option value="">Pilih</option>
<?php foreach ($kondisi as $key) {?>
<option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_2==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="Kondisi_3">Kondisi 3</label>
<select class="form-control" name="kondisi_3">
<option value="">Pilih</option>
<?php foreach ($kondisi as $key) {?>
<option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_3==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="Kondisi_4">Kondisi 4</label>
<select class="form-control" name="kondisi_4">
<option value="">Pilih</option>
<?php foreach ($kondisi as $key) {?>
<option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_4==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="Kondisi_5">Kondisi 5</label>
<select class="form-control" name="kondisi_5">
<option value="">Pilih</option>
<?php foreach ($kondisi as $key) {?>
<option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_5==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="hasil">Hasil</label>
<input type="text" name="hasil" class="form-control" value="<?php echo $rule2->hasil; ?>">
</div>
<div class="form-group">
<label for="artikel">Artikel</label>
<select class="form-control" name="id_artikel">
<option value="">Pilih</option>
<?php foreach ($artikel as $data_rule) { ?>
<option value="<?php echo $data_rule->id_artikel; ?>" <?php if($rule2->id_artikel==$data_rule->id_artikel){echo "selected";} ?> ><?php echo $data_rule->judul; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File Pembelajaran</label>
<input type="file" name="berkas" id="exampleInputFile">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline">Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
</div>