Dynamic Loading of Data Via Ajax - javascript

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>

Related

how to post data from a php consult to a modal and generate a UPDATE

I am trying to pass data from an external query to a modal to be able to generate an update, but I notice that the variable of said query is not being passed to me, could you help me in what I am wrong, I am starting, my modal
<div id="content">
<button type="button" class="btn btn-danger" id= "hide" onclick="hide()">Close</button>
<form action="addcredits.php" method="POST" id="form1">
<input class="form-control" placeholder="Ingresa el total de efectivo" name="username" id="username">
<input type="button" name="btn" value="Ingresar" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirmar
</div>
<div class="modal-body">
¿La cantidad ingresada es correcta?
<table class="table">
<tr>
<th>Efectivo</th>
<td id="uname"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input class="form-control" type="text" name="business_name" value="<?php echo $consult["id_students"]; ?>" placeholder="<?php echo $consul['id_students']; ?>">
<p><?php echo $consult["id_students"]; ?></p>
<p><?php echo $consult["id_students"]?></p>
Submit
</div>
</div>
</div>
</div>
</form>
and this is my extern consult
<?php
include("conection.php");
echo
'
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover">
<tr >
<th scope="col">Grupo</th>
<th scope="col">Nombre</th>
<th scope="col">Créditos</th>
</tr>
';
$accion = mysqli_real_escape_string($con,$_POST['accion']);
if($accion == 4)
{
$mi_busqueda = mysqli_real_escape_string($con,$_POST['mi_busqueda']);
$resultados = mysqli_query($con,"SELECT * FROM students WHERE
student_qr LIKE '%$mi_busqueda%'");
while($consult = mysqli_fetch_array($resultados))
{
echo
'
<tr >
<td>'.$consult["student_group"].'</td>
<td>'.$consult["student_name"]." " .$consult["student_secondname"]. " ". $consult["student_lastname"]. " ".'</td>
<td>'.$consult["student_credits"].'</td>
<td><button type="button" class="btn btn-warning" id= "show" onclick="show()" >Añadir Creditos</button></td>
</tr>
</div>
</div>
</div>
';
}
}
?>
I tried doing an echo but I don't see results, I suppose that the data remains from the external query, I don't know how I could generate said query on the same page by calling the modal instead of sending the data with javascript through JSON

Append values are not fetching

The div appended value is not getting in controller but the appended thing is visible on the view page correctly and i had gone through several ways but couldn't reach to the correct point.
Here is my view section please have a look
<script type="text/javascript">
var maxAppends = 0;
function add_field(id)
{
var update_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Documentsss</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
maxAppends++;
$(".update_new_"+id).append(update_new);
}
</script>
<div class=" table-responsive div1" id="EmpprintReport">
<table id="myTable" class="table table-bordered table-striped table2excel">
<thead>
<tr>
<th>Document Name</th>
<th>Documents</th>
<th>Number</th>
<th>Expiry Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
if(!empty($details))
{
foreach ($details as $value) {
?>
<tr>
<td nowrap><?= $value->service_name;?></td>
<td nowrap>
<?php if (!empty($value->documents)): ?>
<div class="form-group">
<!-- <label class="col-sm-4 control-label"><?= ('Documents') ?>
: </label> -->
<div class="col-sm-8">
<?php
$uploaded_file = json_decode($value->documents);
if (!empty($uploaded_file)):
foreach ($uploaded_file as $sl => $v_files):
if (!empty($v_files)):
?>
<p class="form-control-static">
<a href="<?php echo base_url() . 'uploads/documents/' . $v_files; ?>"
target="_blank"
style="text-decoration: underline;"><?= $sl + 1 . '. ' . ('view') . ' ' . ('other_document') ?></a>
</p>
<?php
endif;
endforeach;
endif;
?>
</div>
</div>
<?php endif; ?>
</td>
<td nowrap><?= $value->service_number;?></td>
<td nowrap><?= $value->expiry_date;?></td>
<td>
<textarea id="<?php echo $value->id;?>" hidden> <?php echo $value->documents;?></textarea>
<a href="" data-toggle="modal" data-target="#edit_<?php echo $value->id;?>" id="Button3" id="Button3" class="btn btn-sm btn-warning" style="margin-top:5px;">
<i class="far fa-edit text-white" title="Edit"></i></a>
<a data-toggle="modal" data-target="#confirm_delete" name="delete" id="title" c-d-id="<?php echo $value->id;?>" clientid="<?= $id; ?>" class="btn btn-sm btn-danger deletedocument" style="margin-top:5px;">
<i class="fa fa-trash text-white" data-toggle="tooltip" data-placement="bottom" title="Delete"></i></a></td>
</tr>
<div class="modal fade edit" id="edit_<?php echo $value->id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="padding:20px !important;">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit Document</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<?php
$result=$this->Admin_model->get_services_by_id($value->id);
//var_dump($value->id);
?>
<form method="post" class="form_<?php echo $value->id;?>" action="<?php echo base_url();?>admin/edit-client-registration-details/<?= $value->id; ?>/<?= $id; ?>" enctype="multipart/form-data">
<div class="form-group">
<div class="control-group">
<label>Service Name</label>
<input type="text" name="service_name" class="form-control" placeholder="Enter service name" style="width: 100%" value="<?= $value->service_name; ?>" /> </div>
<div class="control-group">
<label>Number</label>
<input type="text" name="service_no" class="form-control" placeholder="Enter number" style="width: 100%" value="<?= $value->service_number; ?>" />
</div>
<div class="control-group">
<label>Expiry Date</label>
<input type="text" name="date" id="date_<?= $value->id; ?>" class="form-control input-sm datepick" data-bind="datePicker: StartDate" value="<?= $value->expiry_date; ?>" />
</div>
<div id="update_new_<?php echo $value->id;?>" class="update_new_<?php echo $value->id;?> item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1"
class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<?php
if (!empty($value->documents)) {
$uploaded_file = json_decode($value->documents);
}
if (!empty($uploaded_file)):foreach ($uploaded_file as $v_files_image): ?>
<div class="">
<input type="hidden" name="fileName[]"
value="<?php echo $v_files_image ?>">
<span class=" btn btn-default btn-file">
<span class="fileinput-filename"> <?php echo $v_files_image ?></span>
×
</span>
<strong>
<a href="javascript:void(0);" class="RCF"><i
class="fa fa-times"></i> Remove</a></strong>
<p></p>
</div>
<?php endforeach; ?>
<?php endif; ?>
<!-- Here i want the appended result and the result is coming but the values selected here is not passing to the controller while submitting-->
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong><a href="javascript:void(0);" id="update_more" onclick="add_field('<?php echo $value->id;?>');" u_id="<?php echo $value->id;?>" class="addCF item-row-click update_more"><i
class="fa fa-plus"></i> Add More
</a></strong>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
<input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>

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/

how to echo the data of a table row in a modal?

what I want to do is that the table( in perfiles.php) is related to the modal, when pressing the edit button in a row, the modal opens with their respective data already loaded from the DB and echo in each input
if you need more details please tell me, do not class it as bad, cause im not the best to clarify my questions and i try
//perfiles.php
<?php
include 'api/conexion.php';
$perfil = mysqli_query($conexion, "SELECT * FROM perfil where usuario = '$_SESSION[usuario]'");
?>
<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nombre</th>
<th>Cuit</th>
<th>Tipo Persona</th>
<th class="text-right">Cierre de ejercicio</th>
<th class="text-right">Acciones</th>
</thead>
<tbody>
<?php while($reg = mysqli_fetch_array($perfil)) { ?>
<tr id="<?php echo " tr_ ".$reg['id']; ?>">
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['id']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['nombre']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['cuit']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['tipo_persona']; ?>
</td>
<td class="row_factura text-right" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['cierre_ejercicio']; ?>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info" data-original-title="" title="ver/editar perfil" data-toggle="modal" data-target="#modal_ajustes_perfil" href="#">
<i class="material-icons">person</i>
</button>
<button type="button" rel="tooltip" class="btn btn-success" data-original-title="" title="ver/editar impuestos" data-toggle="modal" data-target="#modal_ajustes_impuestos" href="#">
<i class="material-icons">edit</i>
</button>
<button id="<?php echo $reg['id'] ?>" type="button" rel="tooltip" class="btn btn-danger" onclick="mod('<?php echo $reg['id']; ?>', 'perfiles');" data-original-title="" title="eliminar perfil">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
//modal
<div class="modal fade" id="modal_ajustes_perfil" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="card">
<div class="card-header card-header-icon" data-background-color="blue">
<i class="material-icons">perm_identity</i>
</div>
<div class="card-content">
<h4 class="card-title">Datos del Perfil -
<small class="category">Completar perfil</small>
</h4>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Nombre</label>
<input type="text" class="form-control" disabled>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Cuit</label>
<input type="text" class="form-control" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Tipo persona</label>
<input type="email" class="form-control" disabled>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Cierre del ejercicio</label>
<input type="text" class="form-control" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group label-floating">
<label class="control-label">Dirección</label>
<input type="text" class="form-control" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Email</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Telefono</label>
<input type="text" class="form-control">
</div>
</div>
</div>

If you have issues in Getting all rows for each username from mysql Database? I have re written the code, Kindly replace it.
//perfiles.php
<?php
include 'api/conexion.php';
$perfil = mysqli_query($conexion, "SELECT * FROM `perfil` WHERE `usuario` = '$_SESSION[usuario]'");
?>
<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nombre</th>
<th>Cuit</th>
<th>Tipo Persona</th>
<th class="text-right">Cierre de ejercicio</th>
<th class="text-right">Acciones</th>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($perfil, MYSQLI_ASSOC)) {
foreach($row as $reg){
?>
<tr id="<?php echo " tr_ ".$reg['id']; ?>">
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['id']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['nombre']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['cuit']; ?>
</td>
<td class="row_factura" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['tipo_persona']; ?>
</td>
<td class="row_factura text-right" data-id="<?php echo $reg['usuario'] ?>">
<?php echo $reg['cierre_ejercicio']; ?>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info" data-original-title="" title="ver/editar perfil" data-toggle="modal" data-target="#modal_ajustes_perfil" href="#">
<i class="material-icons">person</i>
</button>
<button type="button" rel="tooltip" class="btn btn-success" data-original-title="" title="ver/editar impuestos" data-toggle="modal" data-target="#modal_ajustes_impuestos" href="#">
<i class="material-icons">edit</i>
</button>
<button id="<?php echo $reg['id'] ?>" type="button" rel="tooltip" class="btn btn-danger" onclick="mod('<?php echo $reg['id']; ?>', 'perfiles');" data-original-title="" title="eliminar perfil">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<?php } } ?>
</tbody>
</table>
Below is for Modal... You need to provide your Db Structure to Edit the rest of things.. what are the fields to be filled for what with the screenshot
//modal
<?php
include 'api/conexion.php';
$perfil = mysqli_query($conexion, "SELECT * FROM `perfil` WHERE `usuario` = '$_SESSION[usuario]'");
?>
<?php while($row = mysqli_fetch_array($perfil, MYSQLI_ASSOC)) { ?>
<div class="modal fade" id="modal_ajustes_perfil" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="card">
<div class="card-header card-header-icon" data-background-color="blue">
<i class="material-icons">perm_identity</i>
</div>
<div class="card-content">
<h4 class="card-title">Datos del Perfil -
<small class="category">Completar perfil</small>
</h4>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Nombre</label>
<input type="text" class="form-control" value="<?php echo $reg['nombre']; ?>" disabled>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Cuit</label>
<input type="text" class="form-control" value="<?php echo $reg['cuit']; ?>" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Tipo persona</label>
<input type="email" class="form-control" value="<?php echo $reg['tipo_persona']; ?>" disabled>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Cierre del ejercicio</label>
<input type="text" class="form-control" value="<?php echo $reg['cierre_ejercicio']; ?>" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group label-floating">
<label class="control-label">Dirección</label>
<input type="text" class="form-control" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Email</label>
<input type="text" class="form-control" value="<?php echo $reg['email']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Telefono</label>
<input type="text" class="form-control" value="<?php echo $reg['telefono']; ?>">
</div>
</div>
</div>
<?php } ?>

php bootstrap error with modal

I have the below scripts running but once I add a remote file link for the modal, it will not update.
I want to edit from a modal
within that modal window, confirm the data was submitted successfully
on close, refresh the crud.
Any help will be appreciated.
I'm modifying the class.crud.php file to include this line
removing
<i class="glyphicon glyphicon-edit"></i>
replacing with
<a data-toggle="modal" class="btn btn-info" href="edit-data.php?edit_id=<?php print($row['id']); ?>" data-target="#myModal"><i class="glyphicon glyphicon-edit"></i></a>
INDEX.PHP
<?php include_once 'dbconfig.php'; ?>
<?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
<table class='table table-bordered table-responsive'>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>E - mail ID</th>
<th>Contact No</th>
<th colspan="2" align="center">Actions</th>
</tr>
<?php
$query = "SELECT * FROM tblUsers";
$records_per_page=10;
$newquery = $crud->paging($query,$records_per_page);
$crud->dataview($newquery);
?>
<tr>
<td colspan="7" align="center">
<div class="pagination-wrap">
<?php $crud->paginglink($query,$records_per_page); ?>
</div>
</td>
</tr>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<?php include_once 'footer.php'; ?>
CLASS.CRUD.PHP
public function update($id,$fname,$lname,$email,$level_id)
{
try
{
$stmt=$this->db->prepare("UPDATE tblUsers SET firstname=:fname,
lastname=:lname,
email=:email,
level_id=:contact
WHERE id=:id ");
$stmt->bindparam(":fname",$fname);
$stmt->bindparam(":lname",$lname);
$stmt->bindparam(":email",$email);
$stmt->bindparam(":contact",$level_id);
$stmt->bindparam(":id",$id);
$stmt->execute();
return true;
}
catch(PDOException $e)
{
echo $e->getMessage();
return false;
}
}
public function delete($id)
{
$stmt = $this->db->prepare("DELETE FROM tblUsers WHERE id=:id");
$stmt->bindparam(":id",$id);
$stmt->execute();
return true;
}
/* paging */
public function dataview($query)
{
$stmt = $this->db->prepare($query);
$stmt->execute();
if($stmt->rowCount()>0)
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<tr>
<td><?php print($row['id']); ?></td>
<td><?php print($row['firstname']); ?></td>
<td><?php print($row['lastname']); ?></td>
<td><?php print($row['email']); ?></td>
<td><?php print($row['level_id']); ?></td>
<td align="center">
<i class="glyphicon glyphicon-edit"></i>
</td>
<td align="center">
<i class="glyphicon glyphicon-remove-circle"></i>
</td>
</tr>
<?php
}
}
else
{
?>
<tr>
<td>Nothing here...</td>
</tr>
<?php
}
}
EDIT-DATA.PHP
<?php
include_once 'dbconfig.php';
if(isset($_POST['btn-update']))
{
$id = $_GET['edit_id'];
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email = $_POST['email'];
$level_id = $_POST['level_id'];
if($crud->update($id,$fname,$lname,$email,$level_id))
{
$msg = "<div class='alert alert-info'>
<strong>WOW!</strong> Record was updated successfully <a href='index.php'>HOME</a>!
</div>";
}
else
{
$msg = "<div class='alert alert-warning'>
<strong>SORRY!</strong> ERROR while updating record !
</div>";
}
}
if(isset($_GET['edit_id']))
{
$id = $_GET['edit_id'];
extract($crud->getID($id));
}
?>
<?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
<?php
if(isset($msg))
{
echo $msg;
}
?>
</div>
<div class="clearfix"></div>
<br />
<div class="modal-header" id="myModal">
<form method='post'>
<div class="form-group">
<label for="email">First Name:</label>
<input type='text' name='firstname' class='form-control' value="<?php echo $firstname; ?>" required>
</div>
<div class="form-group">
<label for="email">Last Name:</label>
<input type='text' name='lastname' class='form-control' value="<?php echo $lastname; ?>" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type='text' name='email' class='form-control' value="<?php echo $email; ?>" required>
</div>
<div class="form-group">
<label for="email">Level ID:</label>
<input type='text' name='level_id' class='form-control' value="<?php echo $level_id; ?>" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
</div>
</form>
</div>

Try this method.
Load a bootstrap modal through ajax
Wrap your a tag inside div for easy visibility.
<div id="edit_btn">
<a data-toggle="modal" id="modal-<?php print($row['id']);?> " class="btn btn-info" href="#"><i class="glyphicon glyphicon-edit"></i></a>
</div>
index.php
<?php include_once 'dbconfig.php'; ?>
<?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
<table class='table table-bordered table-responsive'>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>E - mail ID</th>
<th>Contact No</th>
<th colspan="2" align="center">Actions</th>
</tr>
<?php
$query = "SELECT * FROM tblUsers";
$records_per_page=10;
$newquery = $crud->paging($query,$records_per_page);
$crud->dataview($newquery);
?>
<tr>
<td colspan="7" align="center">
<div class="pagination-wrap">
<?php $crud->paginglink($query,$records_per_page); ?>
</div>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#edit_btn a").click(function() {
var Id = jQuery(this).attr("id");
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : "edit-data.php?edit_id=<?php print($row['id']); ?>",
success: function(response) {
if(response) {
$('body').append(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
});
});
</script>
Shift modal and insert it inside EDIT-DATA.PHP
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<?php
include_once 'dbconfig.php';
if(isset($_POST['btn-update']))
{
$id = $_GET['edit_id'];
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email = $_POST['email'];
$level_id = $_POST['level_id'];
if($crud->update($id,$fname,$lname,$email,$level_id))
{
$msg = "<div class='alert alert-info'>
<strong>WOW!</strong> Record was updated successfully <a href='index.php'>HOME</a>!
</div>";
}
else
{
$msg = "<div class='alert alert-warning'>
<strong>SORRY!</strong> ERROR while updating record !
</div>";
}
}
if(isset($_GET['edit_id']))
{
$id = $_GET['edit_id'];
extract($crud->getID($id));
}
?>
<?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
<?php
if(isset($msg))
{
echo $msg;
}
?>
</div>
<div class="clearfix"></div>
<br />
<div class="modal-header" id="myModal">
<form method='post'>
<div class="form-group">
<label for="email">First Name:</label>
<input type='text' name='firstname' class='form-control' value="<?php echo $firstname; ?>" required>
</div>
<div class="form-group">
<label for="email">Last Name:</label>
<input type='text' name='lastname' class='form-control' value="<?php echo $lastname; ?>" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type='text' name='email' class='form-control' value="<?php echo $email; ?>" required>
</div>
<div class="form-group">
<label for="email">Level ID:</label>
<input type='text' name='level_id' class='form-control' value="<?php echo $level_id; ?>" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
</div>
</form>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap</title>
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<h1>nav bar</h1>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<table class='table table-bordered table-responsive'>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>E - mail ID</th>
<th>Contact No</th>
<th colspan="2" align="center">Actions</th>
</tr>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>james#gmail.com</td>
<td>1</td>
<td align="center">
<div id="edit_btn">
<a data-toggle="modal" id="modal-1 " class="btn btn-info" href="edit-data.php?edit_id=1">test</i></a>
</div>
</td>
<td align="center">
<i class="glyphicon glyphicon-remove-circle"></i>
</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td>admin#gmail.com</td>
<td>2</td>
<td align="center">
<div id="edit_btn">
<a data-toggle="modal" id="modal-2 " class="btn btn-info" href="edit-data.php?edit_id=2">test</i></a>
</div>
</td>
<td align="center">
<i class="glyphicon glyphicon-remove-circle"></i>
</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td>james.Smith#gmail.com</td>
<td>3</td>
<td align="center">
<div id="edit_btn">
<a data-toggle="modal" id="modal-3 " class="btn btn-info" href="edit-data.php?edit_id=3">test</i></a>
</div>
</td>
<td align="center">
<i class="glyphicon glyphicon-remove-circle"></i>
</td>
</tr>
<tr>
<td colspan="7" align="center">
<div class="pagination-wrap">
<ul class="pagination">
<li><a href='/test/index.php?page_no=1' style='color:red;'>1</a></li>
</ul>
</div>
</td>
</tr>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type='text/javascript'>
$(document).ready(function() {
$("#edit_btn a").on('click',function() {
var Id = jQuery(this).attr("id");
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : "edit-data.php?edit_id=",
success: function(response) {
if(response) {
$('body').append(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
});
});
</script>
<div class="container">
<div class="alert alert-info">
</div>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
edit-date.php
<!-- Modal -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PDO OOP CRUD using Bootstrap</title>
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<h1>nav bar</h1>
</div>
</div>
</div>
<div class="modal-header" id="myModal">
<div class="modal-body">
<form method='post'>
<div class="form-group">
<label for="email">First Name:</label>
<input type='text' name='firstname' class='form-control' value="Phil" required>
</div>
<div class="form-group">
<label for="email">Last Name:</label>
<input type='text' name='lastname' class='form-control' value="Smith" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type='text' name='email' class='form-control' value="phil#gmail.com" required>
</div>
<div class="form-group">
<label for="email">Level ID:</label>
<input type='text' name='level_id' class='form-control' value="6" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
</div>
</form>
</div>
</div>

Categories

Resources