I have put together a webpage which has a top fixed navbar and a CRUD datatable with pagination which has buttons to open up modals. The issue that I seem to be having is that when I click the delete button the modal pops up and I am able to delete the record however the modal does not close unless I click somewhere else outside the modal and to add to this the total records "Showing 10 of 12" is incorrect until I refresh the page then the correct value is shown.
`
I have included all my code below. I am not sure how to solve this problem any assistance would be highly appreciated.
//AJAX CODE
//ADD
$(document).on('click','#btn-add',function(e) {
var data = $("#user_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#addEmployeeModal').modal('hide');
alert('Data added successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var code=$(this).attr("data-code");
var regno=$(this).attr("data-regno");
var vatno=$(this).attr("data-vatno");
var name=$(this).attr("data-name");
var address=$(this).attr("data-address");
var phone=$(this).attr("data-phone");
var email=$(this).attr("data-email");
var person=$(this).attr("data-person");
$('#id_u').val(id);
$('#code_u').val(code);
$('#regno_u').val(regno);
$('#vatno_u').val(vatno);
$('#name_u').val(name);
$('#address_u').val(address);
$('#phone_u').val(phone);
$('#email_u').val(email);
$('#person_u').val(person);
});
//Update
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on("click", ".delete", function() {
var id=$(this).attr("data-id");
$('#id_d').val(id);
});
$(document).on("click", "#delete", function() {
$.ajax({
url: "backend/save.php",
type: "POST",
cache: false,
data:{
type:3,
id: $("#id_d").val()
},
success: function(dataResult){
$('#deleteEmployeeModal').modal('hide');
$("#"+dataResult).remove();
}
});
});
$(document).on("click", "#delete_multiple", function() {
var user = [];
$(".user_checkbox:checked").each(function() {
user.push($(this).data('user-id'));
});
if(user.length <=0) {
alert("Please select records.");
}
else {
WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
var checked = confirm(WRN_PROFILE_DELETE);
if(checked == true) {
var selected_values = user.join(",");
console.log(selected_values);
$.ajax({
type: "POST",
url: "backend/save.php",
cache:false,
data:{
type: 4,
id : selected_values
},
success: function(response) {
var ids = response.split(",");
for (var i=0; i < ids.length; i++ ) {
$("#"+ids[i]).remove();
}
}
});
}
}
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function(){
if(this.checked){
checkbox.each(function(){
this.checked = true;
});
} else{
checkbox.each(function(){
this.checked = false;
});
}
});
checkbox.click(function(){
if(!this.checked){
$("#selectAll").prop("checked", false);
}
});
});
//MY php CODE
<?php
session_start();
if (!isset($_SESSION["user_email"])) {
header('location: login.html');
}
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
PHP
</title>
<!-- favicon -->
<link rel="icon" href="/assets/img/favicon.ico">
<!-- ===== DATATABLE ===== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- ===== DATATABLE STYLE ===== -->
<link rel="stylesheet" href="http://localhost/PHP/assets/style.css">
<!-- Style -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- BOOTSTRAP MODAL -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- AJAX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ajax/ajax.js"></script>
</head>
<body class="home">
<!-- Navbar -->
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">LIMA RDF <i>Engineering</i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav" style="margin-left: auto;text-align: center;">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="http://localhost/PHP/index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Setup
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="http://localhost/PHP/partner.php">Business Partner</a></li>
<li><a class="dropdown-item" href="#">Project</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<button class="btn btn-outline-danger" type="button" onclick="window.location.href='./login/logout.php';">Log Out</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- DATATABLE START-->
<div class="container">
<div>
<a href="#addClientModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i>
<span>Add New Client</span></a>
</div>
<div class="row">
<div class="col-md-12">
<div class="datatable">
<table id="example" class="content-table table-hover" style="width:100%">
<thead>
<tr>
<th style="text-align: center;">CLIENT NO</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>PHONE NO</th>
<th>EMAIL</th>
<th>CONTACT PERSON</th>
<th style="text-align: center;">ACTION</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn, "SELECT * FROM tbl_client");
$i = 1;
while ($row = mysqli_fetch_array($result)) {
?>
<tr id="<?php echo $row["id"]; ?>">
<td style="text-align: center;"><?php echo $row["code"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["person"]; ?></td>
<td style="text-align: center;">
<a style="padding-left:5px;padding-right:5px;" href="#editClientModal" class="edit" data-toggle="modal">
<i class="material-icons update" data-toggle="tooltip" data-id="<?php echo $row["id"]; ?>" data-code="<?php echo $row["code"]; ?>" data-regno="<?php echo $row["regno"]; ?>" data-vatno="<?php echo $row["vatno"]; ?>" data-name="<?php echo $row["name"]; ?>" data-address="<?php echo $row["address"]; ?>" data-phone="<?php echo $row["phone"]; ?>" data-email="<?php echo $row["email"]; ?>" data-person="<?php echo $row["person"]; ?>" title="Edit"><span class="fa fa-pencil"></span></i>
</a>
<a style="padding-left:5px;padding-right5px;" href="#deleteClientModal" class="delete" data-id="<?php echo $row["id"]; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"><span class="fa fa-trash"></span></i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<!-- Add Modal HTML -->
<div id="addClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="user_form">
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>CLIENT CODE</label>
<input type="text" id="code" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>BUSINESS REGISTRATION NO.</label>
<input type="text" id="regno" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT REGISTRAION NO.</label>
<input type="text" id="vatno" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>NAME</label>
<input type="text" id="name" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>ADDRESS</label>
<input type="textarear" rows="4" cols="50" id="address" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
<input type="phone" id="phone" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>EMAIL</label>
<input type="email" id="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>CONTACT PERSON</label>
<input type="text" id="person" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Code</label>
<input type="text" id="code_u" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>Buiness Registration No.</label>
<input type="text" id="regno_u" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT Registration No.</label>
<input type="text" id="vatno_u" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" id="name_u" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="address" id="address_u" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>Phone No.</label>
<input type="phone" id="phone_u" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email_u" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Contact Person</label>
<input type="text" id="person_u" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_d" name="idd" class="form-control">
<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">
<button type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>
<style>
.pagination {
float: right;
text-align: right;
}
.pagination .page-item.active .page-link {
background-color: #0A2558;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
background-color: #0A2558;
}
.pagination .page-item.active .page-link:hover {
background-color: #0A2558;
}
.content-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background-color: #0A2558;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 8px 8px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.dataTables_filter {
float: right;
text-align: right;
}
</style>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
</html>
//MY SAVE PHP
<?php
include 'database.php';
if(count($_POST)>0){
if($_POST['type']==1){
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "INSERT INTO `tbl_client`( `code`, `regno`, `vatno`, `name`, `address`, `phone`, `email`,`person`)
VALUES ('$code','$regno','$vatno','$name','$address','$phone','$email','$person')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==2){
$id=$_POST['id'];
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "UPDATE `tbl_client` SET `code`='$code',`regno`='$regno',`vatno`='$vatno',`name`='$name',`address`='$address', `phone`='$phone', `email`='$email', `person`='$person' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==3){
$idd=$_POST['id'];
$sql = "DELETE FROM `tbl_client` WHERE id=$idd ";
if (mysqli_query($conn, $sql)) {
echo $idd;
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
?>
Review all the bootstrap data- attributes to be sure all of them are using data-bs- prefix.
I have found several in your code without it. In bootstrap 5 your bootstrap attributes should contain data-bs- instead data- to be executed correctly.
If you are migrating from bootstrap 4 check the list of migration changes here.
Related
<!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:
I currently have this code that post for only one user and i want to know if it's possible, that the ajax response can be posted as an update to all logged in users as an update on the website. I appreciate all efforts.
<form method="post" action="" id="postForm">
<input type="hidden" name="userId" id="userId" value="<?php echo $_SESSION['USERID']; ?>" />
<select name="type" class="form-control" style="border:1px solid #eee; border-radius:5px; width:auto !important;">
<option value="">select type of post</option>
<option value="default">Normal Post</option>
<option value="Testimonies">Testimonies</option>
<option value="Prayer">Prayer Request</option>
<option value="counselling">Counselling</option>
<option value="Dreams">Dreams Interpretation</option>
</select>
<textarea class="form-control" style="border:none; resize:none;" rows="1" name="post" id="post" placeholder="What's God saying through you today? <?php $text = explode(' ', $_SESSION['NAME']); echo $text[0]; ?>"></textarea>
<button type="submit" value="postForm" class="submitIt btn btn-info btn-flat">Post</button>
</form>
The AJAX Part
<script>
$(document).ready(function(){
$( "body" ).delegate( ".submitIt", "click", function(e) {
e.preventDefault();
e.stopPropagation();
//the button value
$url = "http://localhost/christ/ajaxPages/";
var buttonValue = $(this).val();
//alert(buttonValue);
if(buttonValue == "postForm") {
var formdata = $('#postForm').serialize();
//alert(formdata);
$.ajax({
type: "POST",
url: $url + "addit.php",
data: formdata,
success: function(data){
$("#discuss").append(data);
$("#post").each(function(){autosize.destroy(this);});
$("#post").val("");
}
})
});
</script>
This is the addit.php file called by above ajax
<?php
include '.././config.php';
//waste in dispose
$arr[] =0;
$db_con = connect();
$sect = $_POST['post'];
$type = $_POST['type'];
$userId = $_POST['userId'];
$date = date('Y-m-d H:i:s');
//time of psoidting
$time = strtotime($date);
$sql = "insert into post(post_body,userId,post_type,date) values(:data,:userId,:type,:dateposted)";
$bio = $db_con->prepare($sql);
$bio->bindParam('data', $sect);
$bio->bindParam('type', $type);
$bio->bindParam('userId', $userId);
$bio->bindParam('dateposted', $date);
$bio->execute();
$arr = $bio->errorInfo();
if($arr[2] == "") {
$disc = $db_con->prepare("select * from post where post_body = :text and userId = :userId");
$disc->bindParam("text", $sect);
$disc->bindParam('userId', $userId);
$disc->execute();
$row = $disc->fetch();
$_SESSION['postId'] = $row['post_id'];
//let us retrive
echo '<!-- Box Comment -->
<div class="box box-widget" id="lofty-'.$row['post_id'].'">
<div class="box-header with-border" style="border-radius:5px 5px 0 0;">
<div class="user-block">
<img class="img-circle" src="'.$url.'/'.userName('icon', $_SESSION['USERID']).'" alt="User Image">
<span class="username"><a style="color:#1da1f2;" href="#">'.ucfirst($_SESSION['NAME']).'</a></span>
<span class="description">Shared - ';
echo humanTiming($time);
echo '</span>
</div>
<!-- /.user-block -->
<div class="box-tools">';
if($row['userId'] == $_SESSION['USERID']) {
echo '<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span style="color:#fff">Dropdown Example</span>
<span class="caret"></span></a>
<ul class="dropdown-menu shadow">
<li><a href="#"><button type="button" data-toggle="modal" data-target="#editModal" class="btn btn-box-tool edit" id="edit-post-'.$row['post_id'].'"><i class="fa fa-edit"></i> Edit</button></li>
<li><button type="button" class="btn btn-box-tool submitIt" value="delete" name="del-'.$row['post_id'].'-'.$_SESSION['USERID'].'-post"><i class="fa fa-trash-o"></i> Delete</button></li>
</ul>
</div>';
}
echo '</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<p style="white-space:pre-wrap";><span id="replace-'.$row['post_id'].'">'.$sect.'</span></p>
<div style="margin-left:-10px; margin-right:-10px; padding:4px 4px 0 4px;">
<div class="col-lg-6" style="text-align:left">
<span class="text-muted">
<button style="background:none; border:none;" class="btn btn-box-tool BigLike" name="like-'.$row['post_id'].'-'.$_SESSION['USERID'].'">
<i class="fa fa-thumbs-o-up"></i> <span id="change'.$row['post_id'].'"></span></button>
<span id="seeIt'.$row['post_id'].'"></span><span id="seeItbefore'.$row['post_id'].'"></span></span>
</div>
<div class="col-lg-6" style="text-align:right">
<span class="text-muted">
<span id="seeIt2'.$row['post_id'].'"></span><span id="seeItbefore2'.$row['post_id'].'"></span>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer box-comments" style="background:none; margin:0;" id="comment'.$row['post_id'].'"></div>
<!-- /.box-footer -->
<div class="box-footer" style="border:none; padding-top:1px;">
<form action="." method="post">
<img class="img-responsive img-circle img-sm" src="'.$url.'/'.userName('icon', $_SESSION['USERID']).'" alt="user image">
<!-- .img-push is used to add margin to elements next to floating images -->
<div class="img-push">
<textarea type="text" style="border-radius:20px; background:#eee; border:none; resize:none; overflow:hidden" rows="1" class="form-control input-sm comment-'.$_SESSION['USERID'].'" name="comment-'.'3-'.$row['post_id'].'-'.$_SESSION['USERID'].'" placeholder="Press enter to post comment"></textarea>
</div>
</form>
</div>
<!-- /.box-footer -->
</div>
<!-- /.box-widget -->
<!-- /.box -->';
} else {
echo 'Failed';
}
?>
I want to know if it's possible to modify this code to post the ajax response to all logged in users on the website rather than just the user that made the post. Forgive my English
I want to delete user with bootbox dialog window but when i click remove button the bootbox dialog window doesn't show. I wrote a simple program. Here is my codes:
Before i confirm in libraries:
<head>
<title>Adminstration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
My html code like this:
<form id="form1" action="footer.php">
<div class="body-wrap" id="wrapper" style="overflow: auto;">
<div class="container" id="container" style=" margin-top: 40px;">
<div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" id="well">
<?php $arr = array(1, 2, 3, 4); foreach ($arr as $value)
{ $value = $value * 2;
?>
<div class="row user-row" style="border-bottom: 1px solid #ddd;">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong><?php echo $value ?></strong><br>
<span class="text-muted">Value: <?php echo $value; ?> </span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user pull-right" data-for=".<?php echo $value; ?>">
<i class="glyphicon glyphicon-chevron-down text-muted "></i>
</div>
</div>
<div class="row user-infos <?php echo $value; ?>" id="user-infos">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1" id="col-xs">
<div class="panel panel-primary" id="panel">
<div class="panel-heading">
<h2 class="panel-title" style="text-align: center;">user info</h2>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span6">
<h3> <?php echo $value ?> </h3><br>
</div>
</div>
</div>
<div class="panel-footer clearfix" id="footer">
<span>
<a class="delete_user btn btn-danger btn-sm pull-right" id="del" href="" data-toggle="tooltip" title="Delete user"><span class="glyphicon glyphicon-remove"></span></a>
</span >
</div>
</div>
</div>
</div><?php } ?>
</div>
</div>
</div>
</form>
And js code:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
/************************USERS********************************/
$(document).ready(function() {
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if(idFor.is(':visible'))
{
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
}
else
{
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
});
/********************************************************/
/************************DELETE USERS*************************************/
$(document).ready(function(){
$('.delete_user#del').click(function(e){
e.preventDefault();
bootbox.dialog({
message: "<i class='fa fa-warning fa-2x' style='color: orange;'></i><span style='font-size:16px; position: absolute; margin-left: 5px; margin-top: 5px;'>Are you sure to delete this user?</span>",
title: "<i class='glyphicon glyphicon-trash'></i> Delete user!",
buttons: {
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {/*some code*/}
},
success: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
}
}
});
});
});
/*******************************************************************/
This js code for bootbox dialog is work another php file but doesn't work for this php file.
I am new in Codeigniter and I have gone through its documentation. I'm trying to submit a form which is in HTML and jQuery but once I click the submit button nothing happens and my code seems fine. I also have a date and time picker which I would like to ask: should I store both in one column with a date and time as its type? or should they be stored separately?
Here is my view:
<link href="<?php echo base_url() ?>assets/css/bootstrap-timepicker.min.css" rel="stylesheet">
<link href="<?php echo base_url() ?>assets/css/datepicker3.css" rel="stylesheet">
<link href="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/bloodhound.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput-angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.min.js"></script>
<button class="btn btn-primary btn-xs pull-right" data-toggle="modal" data-target="#myModal">
Send Message
</button>
<style type="text/css">
.modal-backdrop{z-index: 1200;}
.modal{z-index: 1201;}
.tt-dropdown-menu{z-index: 1203; border: solid 1px #CCC; margin-right: 0; margin-left: 0; background-color: #fff; border-color: #ddd; border-width: 1px; border-radius: 4px 4px 0 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: none; box-shadow: none;}
.tt-suggestions{}
</style>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 9999;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send Message</h4>
</div>
<div class="modal-body">
<form name="SendSMSForm" id="SendSMSForm" action="<?phpecho form_open('comments/create_comment'); ?>" class="form-horizontal" role="form" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">Sender</label>
<div class="col-sm-10">
<p class="form-control-static"><label class="label label-primary">Inclusion</label></p>
</div>
</div>
<div class="form-group">
<label for="recepients" class="col-sm-2 control-label">To</label>
<div class="col-sm-10">
<input class="form-control" id="recepients" type="text" placeholder="" name="recepients" >
<p class="help-block">
<small>
Enter name of person/group in address-book E.g John, Family, Workmates
</small>
</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" name="body" rows="3"></textarea>
</div>
</div>
<a data-toggle="collapse" data-parent="#accordion" href="#SendSMSOptions">
<span class="glyphicon glyphicon-plus"></span> Options
</a>
<div id="SendSMSOptions" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label for="recepients" class="col-sm-2 control-label">Schedule Send</label>
<div class="col-sm-10">
<br />
<div class="input-group date">
<input data-provide="datepicker" name="datepicker" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<div class="input-group bootstrap-timepicker">
<input id="timepicker" data-template="modal" name="timepicker" type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="SendSMS">Send Now</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.collapse').collapse();
$('#timepicker').timepicker({showMeridian: false, minuteStep: 15, defaultTime: 'current'});
$('.input-group.date').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d',
autoclose: true,
todayHighlight: true
});
$("#SendSMS").click(function () {
event.preventDefault();
var postData = $('#SendSMSForm').serializeArray();
$.post("<?php echo base_url('messages/send') ?>", postData)
.done(function (data) {
alert("Data Loaded: " + data);
});
});
});
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '<?php echo base_url("c_contacts/index/cities") ?>'
});
cities.initialize();
var elt = $('#recepients');
elt.tagsinput({
tagClass: function(item) {
switch (item.continent) {
case 'Europe' :
return 'label label-primary';
case 'America' :
return 'label label-danger label-important';
case 'Australia':
return 'label label-success';
case 'Africa' :
return 'label label-default';
case 'Asia' :
return 'label label-warning';
}
},
itemValue: 'value',
itemText: 'text'
});
/*
elt.tagsinput('add', {"value": 1, "text": "Amsterdam", "continent": "Europe"});
elt.tagsinput('add', {"value": 4, "text": "Washington", "continent": "America"});
elt.tagsinput('add', {"value": 7, "text": "Sydney", "continent": "Australia"});
elt.tagsinput('add', {"value": 10, "text": "Beijing", "continent": "Asia"});
elt.tagsinput('add', {"value": 13, "text": "Cairo", "continent": "Africa"});
*/
elt.tagsinput('input').typeahead(null, {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}).bind('typeahead:selected', $.proxy(function(obj, datum) {
this.tagsinput('add', datum);
this.tagsinput('input').typeahead('val', '');
}, elt));
});
</script>
Your line:
<form name="SendSMSForm" id="SendSMSForm" action="<?phpecho form_open('comments/create_comment'); ?>" class="form-horizontal" role="form" method="post">
should not have form_open in action attribute. This will only generate the following:
<form name="SendSMSForm" id="SendSMSForm" action="<form action="http://localhost/comments/create_comment" method="post" accept-charset="utf-8">
" class="form-horizontal" role="form" method="post">
form_open() is a native CI helper and helps you generate a form tag.
https://www.codeigniter.com/userguide3/helpers/form_helper.html?highlight=form_open#form_open
Here's the proper syntax:
form_open($action = '', $attributes = array(), $hidden = array())
To create a form tag, you should do this:
<!-- Remove the form tag and use CI's form helper -->
<?php echo form_open(NULL, array('name'=>'SendSMSForm', 'id'=>'SendSMSForm', 'class'=>'form-horizontal', 'role'=>'form')); ?>
This should generate the following:
<form action="http://localhost/" name="SendSMSForm" id="SendSMSForm" class="form-horizontal" role="form" method="post" accept-charset="utf-8">
This is a CodeIgniter way. You can still use the <form> tag.
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;
}
?>