<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Resident Information</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="resident_information.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php>">Barangay Awit Sayo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Log Out</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Dashboard <span class="sr-only">(current)</span></li>
<li>Barangay Officials</li>
<li>Resident Information</li>
<li>Mision & Vision</li>
</ul>
<ul class="nav nav-sidebar">
<li class="active">Documents</li>
<li>Barangay Clearance</li>
<li>Certificate of Residency</li>
<li>Certificate of Indigency</li>
</ul>
<ul class="nav nav-sidebar">
<li class="active">Reports and Schedules</li>
<li>Blotter Records</li>
<li>Settlement Schedules</li>
</ul>
</div>
<!-- aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Resident Information</h1>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-13">
<i class="material-icons"></i> <span>Add New Resident</span>
</div>
</div>
</div>
<?php
require "config.php";
$sql="SELECT * FROM resident";
$sql_run= mysqli_query($conn, $sql);
?>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Gender</th>
<th>Age</th>
<th>Civil Status</th>
<th>Address</th>
<th>Contact No.</th>
<th>Action</th>
</tr>
</thead>
<?php
if ($sql_run) {
foreach ($sql_run as $row) {
?>
<tbody>
<tr>
<td><?php echo $row['user_id']; ?></td>
<td><?php echo $row['user_lname']; ?></td>
<td><?php echo $row['user_fname']; ?></td>
<td><?php echo $row['user_gender']; ?></td>
<td><?php echo $row['user_age']; ?></td>
<td><?php echo $row['user_cstat']; ?></td>
<td><?php echo $row['user_address']; ?></td>
<td><?php echo $row['user_contactno']; ?></td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</tbody>
<?php
}
}else {
echo "No Record Found";
}
?>
</table>
<div class="clearfix">
<div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
<ul class="pagination">
<li class="page-item disabled">Previous</li>
<li class="page-item">1</li>
<li class="page-item">2</li>
<li class="page-item active">3</li>
<li class="page-item">4</li>
<li class="page-item">5</li>
<li class="page-item">Next</li>
</ul>
</div>
</div>
</div>
<!-- add Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Resident</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="insertcode.php" method="POST">
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" name="txtfname" class="form-control" placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="txtlname" class="form-control" placeholder="Enter Last Name" required>
</div>
<div class="form-group">
<label>Gender</label>
<input type="text" name="txtgender" class="form-control" placeholder="Enter Gender" required>
</div>
<div class="form-group">
<label>Age</label>
<input type="text" name="txtage" class="form-control" placeholder="Enter Age" required>
</div>
<div class="form-group">
<label>Civil Status</label>
<input type="text" name="txtcstat" class="form-control" placeholder="Enter Civil Status" required>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" name="txtaddress" placeholder="Enter Address" required></textarea>
</div>
<div class="form-group">
<label>Contact No.</label>
<input type="text" name="txtcontactno" class="form-control" placeholder="Enter Contact No." required>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="insertdata" class="btn btn-success" value="Add" >
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Resident</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="updatecode.php" method="POST">
<div class="modal-body">
<input type="hidden" name="update_id" id="update_id">
<div class="form-group">
<label>First Name</label>
<input type="text" name="txtfname" id="txtfname" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="txtlname" id="txtlname" class="form-control">
</div>
<div class="form-group">
<label>Gender</label>
<input type="text" name="txtgender" id="txtgender" class="form-control">
</div>
<div class="form-group">
<label>Age</label>
<input type="text" name="txtage" id="txtage" class="form-control">
</div>
<div class="form-group">
<label>Civil Status</label>
<input type="text" name="txtcstat" id="txtcstat" class="form-control">
</div>
<div class="form-group">
<label>Address</label>
<input type="text" name="txtaddress" id="txtaddress" class="form-control">
</div>
<div class="form-group">
<label>Contact No.</label>
<input type="text" name="txtcontactno" id="txtcontactno" class="form-control">
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="updatedata" class="btn btn-info editbtn" value="Save">
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Resident</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="deletecode.php" method="GET">
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="deletedata" class="btn btn-danger" value="Delete">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.editbtn').on('click', function() {
$('#editEmployeeModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#txtlname').val(data[1]);
$('#txtfname').val(data[2]);
$('#txtgender').val(data[3]);
$('#txtage').val(data[4]);
$('#txtcstat').val(data[5]);
$('#txtaddress').val(data[6]);
$('#txtcontactno').val(data[7]);
});
});
</script>
</body>
</html>
THIS IS THE PHP EDIT/UPDATE CODE
<?php
require "config.php";
if (isset($_POST['updatedata'])) {
$id=$_POST['update_id'];
$fname=$_POST['txtfname'];
$lname=$_POST['txtlname'];
$gender=$_POST['txtgender'];
$age=$_POST['txtage'];
$cstat=$_POST['txtcstat'];
$address=$_POST['txtaddress'];
$contactno=$_POST['txtcontactno'];
$sql="UPDATE resident SET user_fname='$fname',user_lname='$lname',user_gender='$gender',user_age='$age',user_cstat='$cstat',user_address='$address',user_contactno='$contactno' WHERE user_id='$id' ";
$sql_run=mysqli_query($conn,$sql);
if ($sql_run) {
header("location: resident_information.php");
}else {
echo $conn->error;
}
}
?>
THIS IS THE PHP DELETE CODE
<?php
require "config.php";
if (isset($_GET['deletedata'])) {
$id=$_GET['deletedata'];
$sql="DELETE FROM resident WHERE user_id=$id";
$sql_run=mysqli_query($conn,$sql);
if ($sql_run) {
header ('location: resident_information.php');
}
}
?>
THIS IS THE DATABASE:
The problem of this code is that the update and delete function is not working. I did not include the create PHP code because it is working as it used to be. I only include the update and delete code because they are the one that is no working. Thanks for the help.
THIS IS THE OUTPUT:
Related
I am having a problem getting back to my page with a unique id after processing a data
this first part of the code is redirecting into the page getting the unique id of the folder
<img src="<?= $row['folderimage'];?>" onerror="this.src='images/folder.png'" class="card-img-top" height="160" >
<div class="card-img">
<h6 style="text-align: center;"><?= $row['foldername'];?></h6>
this is the folder.php with unique id
<?php
require'config.php';
session_start();
if(isset($_GET['fldid'])){
$folder_id=$_GET['fldid'];
$sql="SELECT * FROM file_folder WHERE id='$folder_id'";
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_array($result);
$folder_name=$row['foldername'];
}
?>
<!DOCTYPE html>
<html>
<head>
<title>BSU</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="file.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" ><!-- FOR FONT AWESOME ICON-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><!-- for css bootsrap 4 -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="bdy">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<hr>
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<button class="btn btn-primary btn-lg btn-block" onclick="openFormfld()">Add Folde with Link</button>
</div>
</li>
<!-- para mag pop up ang add file form-->
<div class="form-popup" id="myFolderForm">
<form action="process.php" method="POST" enctype="multipart/form-data" class="form-container">
<!-- para ma notify if success or may error sa pag add ng file-->
<div style="display:<?php if(isset($_SESSION['showFilerror'])){echo $_SESSION['showFilerror'];}else { echo'none'; } unset($_SESSION['showFilerror']); ?>"
class="alert alert-danger alert-dismissible text-center mt-3">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php if(isset($_SESSION['filemess'])){echo $_SESSION['filemess'];} unset($_SESSION['showFilerror']); ?></strong>
</div>
<!-- end of notif -->
<input type="hidden" name="folderid" value="<?= $folder_id; ?>">
<label for="folder"><b>Folder</b></label>
<input type="text" placeholder="Enter Folder Name" name="fldname"required>
<label for="link"><b>Link</b></label>
<input type="text" placeholder="Enter Link" name="link" required>
<label for="image"><b>Image For Folder</b></label>
<input type="file" name="image">
<button style="margin-top: 15px;" type="submit" name="folderlinkbtn" class="btn btnsub">Save</button>
Close
</form>
</div>
</ul>
</div>
<!-- para ma display ang folders -->
<div class="col-lg-9">
<!-- para ma notify pag successfull pag update-->
<div style="display:<?php if(isset($_SESSION['showAlert'])){echo $_SESSION['showAlert'];}else { echo'none'; } unset($_SESSION['showAlert']); ?>"
class="alert alert-success alert-dismissible text-center mt-3">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php if(isset($_SESSION['message'])){echo $_SESSION['message'];} unset($_SESSION['showAlert']); ?></strong>
</div>
<!-- para ma notify pag hinde successfull pag update-->
<div style="display:<?php if(isset($_SESSION['showError'])){echo $_SESSION['showError'];}else { echo'none'; } unset($_SESSION['showError']); ?>"
class="alert alert-danger alert-dismissible text-center mt-3">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php if(isset($_SESSION['error'])){echo $_SESSION['error'];} unset($_SESSION['showError']); ?></strong>
</div>
<!-- end of notif -->
<h5 class="text-center" id="textChange"><?= $folder_name; ?> Folder</h5>
<hr>
<div class="row" id="result">
<?php
$sql="SELECT * FROM folder_link WHERE folder_id='$folder_id'";
$result=$conn->query($sql);
while($row=$result->fetch_assoc()){
?>
<div class="col-md-3 mb-2">
<div class="card-deck">
<div style="background-color:#f3f4ed " class="card border-secondary">
<div class="btn-group">
<button style="float: right;" class="btn btn-success dropdown-toggle" id="showhidereply" data-toggle="dropdown" aria-haspopup="true" data-id="<?= $row['id'];?>"></button>
<div class="dropdown-menu" id="replycomment-<?= $row['id'];?>">
<a class="dropdown-item refold" data-id="<?= $row['id'];?>" >Rename Folder</a>
<a class="dropdown-item chgimg" data-id="<?= $row['id'];?>" >Change Folder Picture</a>
Delete Folder
</div>
</div>
<img src="<?= $row['folder_image'];?>" onerror="this.src='images/folder.png'" class="card-img-top" height="160" >
<div class="card-img">
<h6 style="text-align: center;"><?= $row['folder_name'];?></h6>
<!-- para sa update folder name pop up-->
<div class="pop-up" id="upd-<?= $row['id'];?>">
<div class="popup-content">
<form action="process.php" method="POST">
<p style="text-align: center;">Rename Folder</p>
<input type="hidden" name="idd" value="<?= $row['id'];?>">
<input class="newfold" type="text" name="updatefolder" placeholder="Enter New Folder Name" required>
Close
<button type="submit" name="updatebtnfld" class="btn popbtn">Update</button>
</form>
</div>
</div>
<!-- end sa update folder name pop up-->
<!-- para mapalitan ang image folder pop up-->
<div class="pop-up" id="img-<?= $row['id'];?>">
<div class="popup-content">
<form action="process.php" method="POST" enctype="multipart/form-data">
<p style="text-align: center;">Change Folder Iamge</p>
<input type="hidden" name="idd" value="<?= $row['id'];?>">
<input type="file" name="image" required>
Close
<button type="submit" name="updimgfld" class="btn popbtn">Update</button>
</form>
</div>
</div>
<!-- end sa update link pop up-->
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<!-- end sa folders display-->
</div>
</div>
this code below is my problem I don't what should I add in header to get me back in the page with unique id
if(isset($_POST['folderlinkbtn'])){
$fldid = $_POST['folderid'];
$fol = $_POST['fldname'];
$lin = $_POST['link'];
$image='images/'.$_FILES['image']['name'];
$target_dir="images/";
$target_file=$target_dir.basename($_FILES['image']['name']);
move_uploaded_file($_FILES['image']['tmp_name'],$target_file);
$sql="SELECT folder_id FROM folder_link WHERE folder_name ='$fol' LIMIT 1";
$check_query =mysqli_query($conn,$sql);
$count_folder = mysqli_num_rows($check_query);
if($count_folder>0){
$_SESSION['showFilerror']= 'block';
$_SESSION['filemess']="Sorry Folder Name Already Exist";
header('location:folder.php');}
else{
$sql ="INSERT INTO folder_link (folder_id,folder_links,folder_name,folder_image)VALUES('$fldid','$lin','$fol','$target_file')";
$run_query=mysqli_query($conn,$sql);
if($run_query){
$_SESSION['showAlert']= 'block';
$_SESSION['message']="Add File Successful";
header('location:folder.php');
}
else{
$_SESSION['showFilerror']= 'block';
$_SESSION['filemess']="ERROR</strong>";
header('location:folder.php');
}
}
}
if the processing requires redirecting to another page then include the unique ID in the url using GET method then include it in header function on php
I already fix the problem thanks in giving me an idea i just put
header( "Location: folder.php?fldid={$fldid}" );
First Image to show all data in card view
second image for pop up modal
What I want is when I clicked the View button, it will get all the data and display in the modal. The data can be display in the inputbox, textarea and image.
This is the code to row all the data in a card view
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#viewmodal" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
This is the modal code
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web ID : </b></label> <span class="validation">*</span>
<input name="w_id" id="w_id" value="" type="text" class="form-control input-box" readonly>
</div>
<div class="form-group">
<label><b>Web Name : </b></label> <span class="validation">*</span>
<input name="w_name" id="w_name" type="text" class="form-control input-box" required>
</div>
<div class="form-group">
<label><b>Web Address : </b></label> <span class="validation">*</span>
<input name="w_address" id="w_address" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Description : </b></label> <span class="validation">*</span>
<input name="w_description" id="w_description" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img src='images/".$row["web_image"]. "'width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
As i can see you are looping through the panel and you have only one modal in there, what you can do is use data property and JS/Jquery combination to do this.
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-img="<?=$row['img']?>" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
Now a little bit of jQuery to assign values in the modal fields and open the modal,when view button is clicked
$(function(){
$(".viewbtn").click(function(){
var img = $(this).data("img")
$("#w_image").attr("src",img)
$("#viewmodal").modal()
})
})
So, this is the basic idea of it, you can add other data props and assign the values to the fields accordingly
I create a laravel destroy function and i use a modal to delete data. but i cannot delete all data in my database. last one cannot be deleted. i think it cause in view.
this is my modal popup in view
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="post">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
And my destroy controller
public function destroy(Account $account)
{
$findAccount = Account::find($account->id);
if($findAccount->delete()){
return redirect()->route('account.index')->with('success', 'Account details delete successfully!');
}
return back()->withInput()->with('error', 'Account details could not be deleted.');
}
i cannot delete all data in table. they keep one data and it cannot be deleted.
Try this:
#extends('template.app')
#section('content')
<div class="col-md-9">
<!-- table content -->
<div class="card">
<div class="card-header main-color-bg">
<h3 class="card-title">Account Details</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input class="form-control rounded-corner" type="text" placeholder="Search Member Here" style="margin-bottom: 20px;">
</div>
</div>
<!-- success message -->
#include('inc.message')
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Account Number</th>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#if(is_empty($accounts))
<tr><td>NO DATA</td></tr>
#else
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#endif
</tbody>
</table>
<!-- pagination -->
<nav id="pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link"><span class="fa fa-arrow-circle-left"></span></span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><span class="fa fa-arrow-circle-right"></span></a>
</li>
</ul>
</nav>
<!-- end pagination -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> Add Account</button>
</div>
</div>
<!-- end table content -->
</div>
<!-- delete modal -->
<!-- Modal -->
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="delete">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- end delete modal-->
<!-- modal popup -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #309fe2; color: #fff;">
<h5 class="modal-title" id="exampleModalLabel">Account Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{!! Form::open(['url' => '/account', 'id' => 'eventForm', 'data-toggle' => 'validator', 'role' => 'form']) !!}
{{ csrf_field() }}
<div class="modal-body">
<!-- modal form -->
<div class="form-group">
<label for="acc_no">Account Number</label>
<input type="number" class="form-control" name="acc_no" id="acc_no" maxlength="20" placeholder="Enter your account number" required>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" maxlength="30" name="name" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="id_no">Identity No</label>
<input type="number" class="form-control" maxlength="9" name="id_no" id="id_no" placeholder="Enter your identity no" required>
</div>
<div class="form-group">
<label for="bank_id">Bank</label>
<select class="form-control" name="bank_id">
#if(!empty($banks))
#foreach($banks as $bank)
<option value="{{ $bank->id }}">{{ $bank->name }}</option>
#endforeach
#endif
</select>
</div>
<div class="form-group">
<label for="acc_type">Account Type</label>
<select class="form-control" id="acc_type" name="acc_type">
<option value="Saving">Saving</option>
<option value="Current">Current</option>
<option value="Deposite">Deposite</option>
</select>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="text" pattern="[0-9.]" class="form-control" maxlength="15" name="amount" id="amount" placeholder="Enter your amount" required>
</div>
<!-- end modal form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fa fa-times-circle"></span> Close</button>
<button type="submit" class="btn btn-primary pull-right"><span class="fa fa-money"></span> Save changes</button>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<!-- end modal -->
#endsection
On your delete form change method from POST to DELETE.
I think may be Account::find($account->id); did not get the right Account object. use findOrFail to have another shot:
public function destroy(Account $account)
{
$findAccount = Account::findOrFail($account->id);
...
}
this is my table view. where i put if statement
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#extends('template.app')
#section('content')
<div class="col-md-9">
<!-- table content -->
<div class="card">
<div class="card-header main-color-bg">
<h3 class="card-title">Account Details</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input class="form-control rounded-corner" type="text" placeholder="Search Member Here" style="margin-bottom: 20px;">
</div>
</div>
<!-- success message -->
#include('inc.message')
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Account Number</th>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#if(!empty($accounts))
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#endif
</tbody>
</table>
<!-- pagination -->
<nav id="pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link"><span class="fa fa-arrow-circle-left"></span></span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><span class="fa fa-arrow-circle-right"></span></a>
</li>
</ul>
</nav>
<!-- end pagination -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> Add Account</button>
</div>
</div>
<!-- end table content -->
</div>
<!-- delete modal -->
<!-- Modal -->
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="delete">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- end delete modal-->
<!-- modal popup -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #309fe2; color: #fff;">
<h5 class="modal-title" id="exampleModalLabel">Account Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{!! Form::open(['url' => '/account', 'id' => 'eventForm', 'data-toggle' => 'validator', 'role' => 'form']) !!}
{{ csrf_field() }}
<div class="modal-body">
<!-- modal form -->
<div class="form-group">
<label for="acc_no">Account Number</label>
<input type="number" class="form-control" name="acc_no" id="acc_no" maxlength="20" placeholder="Enter your account number" required>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" maxlength="30" name="name" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="id_no">Identity No</label>
<input type="number" class="form-control" maxlength="9" name="id_no" id="id_no" placeholder="Enter your identity no" required>
</div>
<div class="form-group">
<label for="bank_id">Bank</label>
<select class="form-control" name="bank_id">
#if(!empty($banks))
#foreach($banks as $bank)
<option value="{{ $bank->id }}">{{ $bank->name }}</option>
#endforeach
#endif
</select>
</div>
<div class="form-group">
<label for="acc_type">Account Type</label>
<select class="form-control" id="acc_type" name="acc_type">
<option value="Saving">Saving</option>
<option value="Current">Current</option>
<option value="Deposite">Deposite</option>
</select>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="text" pattern="[0-9.]" class="form-control" maxlength="15" name="amount" id="amount" placeholder="Enter your amount" required>
</div>
<!-- end modal form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fa fa-times-circle"></span> Close</button>
<button type="submit" class="btn btn-primary pull-right"><span class="fa fa-money"></span> Save changes</button>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<!-- end modal -->
#endsection
if i click on view button in my table it should open an modal form and
display all table values to view it.But i'm getting error as undefined
variable in the textbox inside of location,where i called only location
in the table.kindly help out me with how to get datas from dbs as php
code.thanks in advance.
UPDATE: I had updated my code.Kindly check it out,as i called ajax ,but modal box open with empty ,no informations loaded.kindly help it out.
<!-- Main content -->
<div class="main-content">
<h1 class="page-title">OUR POP DETAILS</h1>
<!-- Breadcrumb -->
<ol class="breadcrumb breadcrumb-2">
<li><i class="fa fa-home"></i>Home</li>
<li>Metro Pop</li>
<li class="active"><strong>Action</strong></li>
</ol>
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-4">
<?php $apage = array('id'=>'','name'=>'');?>
<script>var page_0 = <?php echo json_encode($apage)?></script>
<h3><a data="page_0" class="model_form btn btn-sm btn-danger" href="#"><span class="glyphicon glyphicon-plus"></span> Add new record</a></h3>
</div>
</div>
<div id="table-container">
<div class="row">
<div class="col-md-12">
<table id="table" class="table table-striped table-sortable table-condensed " cellspacing="0" width="100%"
data-show-columns="true"
>
<tbody>
<?php if(isset($result) && ($data_record) > 0) : $i=1; ?>
<?php while ($users = mysqli_fetch_object($result)) { ?>
<tr class="<?=$users->id?>_del">
<td><?=$i;?></td>
<td><?=$users->zonee;?></td>
<td><?=$users->location;?></td>
<td><?=$users->pop_type;?></td>
<td><?=$users->switch_name;?></td>
<td><?=$users->switch_ip;?></td>
<td><?=$users->switch_make;?></td>
<td><?=$users->switch_serial;?></td>
<td><?=$users->switch_model;?></td>
<td> <i class="material-icons"></i></td>
<script>var page_<?php echo $users->id ?> = <?php echo json_encode($users);?></script>
<td><a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm" href="#"> <span class="glyphicon glyphicon-pencil"></span></a>
<a data="<?php echo $users->id ?>" title="Delete <?php echo $users->name;?>" class="tip delete_check btn btn-info btn-sm "><span class="glyphicon glyphicon-remove"></span> </a>
<button data-toggle="modal" data-target="#view-modal" data-id="<?php echo $users->id; ?>" class=" view_check btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i></button>
</td>
</tr>
<?php $i++;
} ?>
<?php else : echo '<tr><td colspan="8"><div align="center">-------No record found -----</div></td></tr>'; ?>
<?php endif; ?>
</tbody>
</table>
<?php
if(isset($_SESSION['flash_msg'])) :
$message = $_SESSION['flash_msg'];
echo $error= '<div class="alert alert-success" role="alert">
<span class="glyphicon glyphicon-envelope"></span> <strong>'.$message.'</strong> </div>';
unset($_SESSION['flash_msg']);
endif;
?>
</div>
</div>
</div>
<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-user"></i> POP Information
</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>
<!-- Form modal -->
<div id="form_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i><span id="pop_title">ADD</span> POP INFORMATION</h4>
</div>
<!-- Form inside modal -->
<form method="post" action="add_edit.php" id="cat_form">
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>zonee :</label>
<input type="text" name="zonee" id="zonee" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>location :</label>
<input type="text" name="location" id="location" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>pop_type :</label>
<input type="text" name="pop_type" id="pop_type" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>switch_name:</label>
<input type="text" name="switch_name" id="switch_name" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>switch_ip :</label>
<input type="text" name="switch_ip" id="switch_ip" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>switch_make :</label>
<input type="text" name="switch_make" id="switch_make" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>switch_serial :</label>
<input type="text" name="switch_serial" id="switch_serial" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>switch_model :</label>
<input type="text" name="switch_model" id="switch_model" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Latitude:</label>
<input type="text" name="latitude" id="latitude" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Longitude:</label>
<input type="text" name="longitude" id="longitude" class="form-control required" >
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<span id="add">
<input type="hidden" name="id" value="" id="id">
<button type="submit" name="form_data" class="btn btn-primary">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
<!-- /form modal -->
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.model_form',function(){
$('#form_modal').modal({
keyboard: false,
show:true,
backdrop:'static'
});
var data = eval($(this).attr('data'));
$('#id').val(data.id);
$('#zonee').val(data.zonee);
$('#location').val(data.location);
$('#pop_type').val(data.pop_type);
$('#switch_name').val(data.switch_name);
$('#switch_ip').val(data.switch_ip);
$('#switch_make').val(data.switch_make);
$('#switch_serial').val(data.switch_serial);
$('#switch_model').val(data.switch_model);
$('#latitude').val(data.latitude);
$('#longitude').val(data.longitude);
if(data.id!="")
$('#pop_title').html('Edit');
else
$('#pop_title').html('Add');
});
$(document).on('click','.delete_check',function(){
if(confirm("Are you sure to delete data")){
var current_element = $(this);
url = "add_edit.php";
$.ajax({
type:"POST",
url: url,
data: {ct_id:$(current_element).attr('data')},
success: function(data) { //location.reload();
$('.'+$(current_element).attr('data')+'_del').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
}
});
}
});
$(document).on('click', '.view_check', function(){
//$('#dataModal').modal();
var employee_id = $(this).attr("id");
$.ajax({
url:"view.php",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#view-modal').modal('show');
}
});
});
});
});
</script>
**view.php**
<?php
include("config.php");
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "mine");
$query = "SELECT * FROM user WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_object($result))
{
$output .= '
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%">'.$users["location"].'</td>
</tr>
<tr>
<td width="30%"><label>Address</label></td>
<td width="70%">'.$users["zonee"].'</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">'.$users["pop_type"].'</td>
</tr>
';
}
$output .= '</table></div>';
echo $output;
}
?>
Add quota('') like $row['location'] , you are using $row[location]
Or use below code
<div class="col-sm-12">
<label>location :</label>
<input type="text" name="location" id="location" value="<?php
echo $row['location'];?>" />
</div>
Your variable name is $users not $row so you can write this
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>location :</label>
<input type="text" name="location" id="location" value="<?php
echo $users['location'];?>" />
</div>
Try this Code
<tbody>
<?php if(isset($result) && ($data_record) > 0) : $i=1; ?>
<?php while ($users = mysqli_fetch_object($result)) { ?>
<tr class="<?=$users->id?>_del">
<td><?=$i;?></td>
<td><?=$users->zonee;?></td>
<td><?=$users->location;?></td>
<td><?=$users->pop_type;?></td>
<td><?=$users->switch_name;?></td>
<td><?=$users->switch_ip;?></td>
<td><?=$users->switch_make;?></td>
<td><?=$users->switch_serial;?></td>
<td><?=$users->switch_model;?></td>
<td> <a href="http://maps.google.com/?q=<?=$users-
>latitude;?>,<?=$users->longitude;?>" target=\"_blank\"><i
class="material-icons"></i></a></td>
<script>var page_<?php echo $users->id ?> = <?php
echo json_encode($users);?></script>
<td><a data="<?php echo 'page_'.$users->id ?>"
class="model_form btn btn-info btn-sm" href="#"> <span
class="glyphicon glyphicon-pencil"></span></a>
<a data="<?php echo $users->id ?>" title="Delete <?
php echo $users->name;?>" class="tip delete_check btn btn-info
btn-sm "><span
class="glyphicon glyphicon-remove"></span> </a>
<button data-toggle="modal" data-target="#view-
modal" data-id="<?php echo $users->id; ?>" id="getUser"
class="btn btn-sm
btn-info"><i class="glyphicon glyphicon-eye-open"></i>
</button>
</td>
</tr>
<?php $i++;
echo "<div class='modal-body'>
<div id='dynamic-content'>
<div class='form-group'>
<div class='row'>
<div class='col-sm-12'>
<label>location :</label>
<input type='text' name='location' id='location' value='$users->location' />
</div>
</div>
</div>
</div>
</div> "
} ?>
<?php else : echo '<tr><td colspan="8"><div align="center">-------No
record found -----</div></td></tr>'; ?>
<?php endif; ?>
</tbody>
On Click Call Function
<script>
function launch_modal(id)
{
//Store id in variable
var newId = id;
//Ajax Start
$.ajax({
type: "POST",
url: "your_php_page.php",
//send id to php page
data: {theId:newId},
success: function(data){
//to display data in paragraph of Modal
$('.modal-body').html(data);
//to display modal
$('#myModal').modal("show");
},
});
}
</script>
your_php_page.php
<?php
$theId = $_POST['theId'];
if($theId){
$output = '';
$sql = $conn->query("select * from table where id = '$theId'");
$fetch = $sql->fetch_object();
//Append
$output .= '<table class="table table-bordered">
<tr>
<td>Name :</td>
<td>'.$fetch->name.'</td>
</tr>
<tr>
<td>Number :</td>
<td>'.$fetch->number.'</td>
</tr>
';
echo $output;
}
?>
So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multiple way but I still can't show the selected data;
So here is the trigger for the modal:
<?php while($row = mysqli_fetch_array($adm_query)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>" class="btn btn-outline btn-info"><i class="fa fa-search-plus"></i></a>
</td>
<?php }?>
Then this is the modal content:
<!-- Modal -->
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<?php $sel_query=mysqli_query($conn, "select * from admin where admin_id='$idmodal'")or die(mysql_error($conn)); $selrow=mysqli_fetch_array($sel_query);?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
The problem is nothing works, and i don't know where to start.
Appreciate for the help.
Create one class openModal in <a></a>. Use this class in <script></script> to get data-id
<?php while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
<i class="fa fa-search-plus"></i>
</a>
</td>
</tr>
<?php }?>
Place this code in the same page below.
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
JS (data-id=.. is passed here.)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
// Get `id` from `<script></script>`
$id = $_GET['id'];
$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn));
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
Write below line in your code:-
$selrow=mysqli_fetch_assoc($sel_query);
OR
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
instead of
$selrow=mysqli_fetch_array($sel_query);
Also it is bad practice to write query directly into modal.
You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.