php bootstrap error with modal - javascript

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>

Related

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>

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>

document.getElementById is undefined. Please look

I sit at the computer all day and can not find the reason for the error.
My problem is that I can not get the values from the field.
I need a modal window to display data from the line.
Then he wants to send it to the base, but it's a different story
Please, look at my code and say what's wrong.
<?php
session_start();
require_once "db.php";
?>
<html>
<head>
<title>Lista użytkowników</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>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="row" method='POST'>
<h3 align="center">Lista użytkowników</h3><br />
<form action="" method="post">
<table id="editable_table" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Login</th>
<th>Imię</th>
<th>Nazwisko</th>
<th>Email</th>
<th>Telefon</th>
<th>Stanowisko</th>
<th>NR_pracownika</th>
<th>Upranienia</th>
<th>Opcje</th>
</tr>
</thead>
<tbody>
<?php
if ($mysqli->connect_errno!=0){
echo "Error".$mysqli->connect_errno;
}else{
$sql ="SELECT * FROM uzytkownicy ORDER BY id ";
if ($result = #$mysqli->query($sql)){
$_SESSION['zalogowany'] = true;
while($row = mysqli_fetch_array($result))
{
$_SESSION['log_'. $row['id']] = $row['login'];
?>
<tr>
<td method='POST' name ="id_<?=$row['id']?>" id="id_<?=$row['id']?>" value="<?=$row['id']?>" class=" orm-control"/> <?=$row['id']?></td>
<td method='POST' name="log_<?=$row['id']?>" id="log_<?=$row['id']?>" value="<?=$row['login']?>" class=" orm-control"/> <?=$row['login']?></td>
<td method='POST' name="imi_<?=$row['id']?>" id="imi_<?=$row['id']?>" value="<?=$row['imie']?>" class=" orm-control"/> <?=$row['imie']?></td>
<td method='POST' name="naz_<?=$row['id']?>" id="naz_<?=$row['id']?>" value="<?=$row['nazwisko']?>" class=" orm-control"/> <?=$row['nazwisko']?></td>
<td method='POST' name="ema_<?=$row['id']?>" id="ema_<?=$row['id']?>" value="<?=$row['email']?>" class=" orm-control"/> <?=$row['email']?></td>
<td method='POST' name="tel_<?=$row['id']?>" id="tel_<?=$row['id']?>" value="<?=$row['telefon']?>" class=" orm-control"/> <?=$row['telefon']?></td>
<td method='POST' name="sta_<?=$row['id']?>" id="sta_<?=$row['id']?>" value="<?=$row['stanowisko']?>" class=" orm-control"/> <?=$row['stanowisko']?></td>
<td method='POST' name="nr_<?=$row['id']?>" id="nr_<?=$row['id']?>" value="<?=$row['nr_pracownika']?>" class=" orm-control"/> <?=$row['nr_pracownika']?></td>
<td method='POST' name="ran_<?=$row['id']?>" id="ran_<?=$row['id']?>" value="<?=$row['ranga']?>" class=" orm-control"/> <?=$row['ranga']?></td>
<td>
<button type="button" id="<?=$row['id']?>" onClick="reply_click()" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#myModalEdit" ></button>
</td>
</tr>
</form>
<?php ;
}
//header('Location: ../workshop.php');
}
else{
// header('Location: ../index.php');
}
}
?>
<!-- Modal -->
<div id="myModalEdit" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<h4 align="center">Zmiana danych dla </h4> <h3 id="dozmiany" align="center"> dfhdyjd</h3>
<div class="form-group">
<label for="id"><span class="glyphicon glyphicon-user"></span> id</label>
<input type="text" class="form-control" id="usrname" value='<?php $aaaa ?>'>
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" value='name'>
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-pencil"></span> Zmien</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</tbody>
</body>
</html>
<script language="javascript">
function reply_click()
{
var rrr = event.srcElement.id;
alert(document.getElementById("log_1").value);
var ll = "echo $_SESSION['log_" + rrr +" '];";
document.getElementById("usrname").value = "<?php echo $_SESSION['log_1'];?>";
document.getElementById("dozmiany").innerHTML = document.getElementById("log_1").value;
}
</script>
Please, look at my code and say what's wrong.

I found the answer myself
I wanted to download data from the table so I use the query ....
document.getElementById("log_1").value;
is wrong,
and the wording should be so ...
document.getElementById("myTable_U").rows[rrr].cells.item(1).innerHTML

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 } ?>

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);
}
});

Categories

Resources