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
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>
My view with checkbox validation script. I want that when I select one checkbox the data related to it should be stored.
<form action="<?php echo site_url('need_assesment/insertservice'); ?>" [enter image description here][1]method="post">
<div class="col-lg-11 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu">
<div class="list-group">
<?php foreach($member_details as $members){?>
<a href="<?php echo base_url('index.php/need_assesment/req_questions/'.$m_id."/".$members->id);?>" class="list-group-item active text-center">
<br/><?php echo $members->member_name; ?>
</a>
<?php }?>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
<!-- flight section -->
<div class="bhoechie-tab-content active">
<center>
<table style="width:100%" id="zero_config" class="table table-striped table-bordered">
<col width="45%">
<col width="30%">
<col width="25%">
<col width="10%">
<tr>
<td>
Requirements
</td>
<td>
Schemes & Solution
</td>
<td>
Process
</td>
<td>
Fees
</td>
</tr>
<?php foreach ($requirement_details as $details) { ?>
<tr>
<td>
<?php echo $details->Question ?>
</td>
<td>
<input type="hidden" value="<?php echo $member_details[0]->id ?>" name="member_id[]">
<input type="hidden" value="<?php echo $m_id ?>" name="membership_id[]">
<input type="hidden" value="1" name="service_id[]">
b
</td>
<td>
c
</td>
<td>
<label class="checkbox-inline" data-id="1" ><input type="checkbox" name="a-1" value="A1">Rs=100</label><br><br>
</td>
</tr>
<?php } ?>
</table>
<div class="act"><p><b>TOTAL =</b></p>
<p><b>GRAND TOTAL=</b></p>
</div>
</center>
</div>
<!-- train section -->
</div>
</div>
<div class="card-body">
<input type="submit" name="submit" value="PROCEED" id="checkBtn" style="margin-left:40%;" class="btn btn-success">
</div>
</div>
</div>
</div>
</form>
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
Controller
public function insertservice(){
$mid=$this->input->post('membership_id');
$data =array();
$id=$this->input->post('member_id');
$service_id=$this->input->post('service_id');
for ($i = 0; $i < count($this->input->post('member_id')); $i++) {
$data[$i] = array(
'member_id'=>$id[$i],
'service_id'=>$service_id[$i]
);
}
$this->db->insert_batch('selected_services',$data);
$this->req_questions($mid[0],$data[0]['member_id']);
}
Image:
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 } ?>
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>