How to open Bootstrap modal by using a PHP GET request? - javascript

I search but I didn't find any solution for this. I need to create a modal like this.
When we pass true in GET request the modal must be shown. Otherwise if not any value for $GET request page will be load normally.
I am trying to do this by:
<?php if(isset($_GET["model"=="true"])){
echo "
<script type='text/javascript'>
$(document).ready(function(){
$('#addstudent').modal('show');
});
</script>" ;
} ?>
But it didn't work with my code.
Full code:
<?php
include_once('../func/islogin.php') ;
if($login=='false'){
header('location:../index.php');
}elseif($login!='true'){
header('location:../index.php');
}
include('../include/conn.php') ;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<link rel="shortcut icon" href="img/favicon.png">
<title>SMS - Sending System</title>
<script src="https://kit.fontawesome.com/e491dc23d1.js" crossorigin="anonymous"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.css" rel="stylesheet">
<link href="../css/elegant-icons-style.css" rel="stylesheet"/>
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet">
<link href="../css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<?php if(isset($_GET["model"=="true"])){
echo "
<script type='text/javascript'>
$(document).ready(function(){
$('#addstudent').modal('show');
});
</script>" ;
} ?>
<section id="container" class="">
<header class="header dark-bg">
<div class="toggle-nav">
<div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>
</div>
SFT <span class="lite">හසිත පෙරේරා</span>
</div>
</header> <!--header menu end-->
<?php include('../include/design/slidebar.php') ?> <!--sidebar Include-->
</div>
</aside>
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fas fa-chalkboard-teacher"></i> Classes</h3>
</div>
<?php include('../include/design/statusbar.php') ?>
</div>
<div class="row">
<div class="col-lg-8">
<section class="panel">
<header class="panel-heading text-center">
List Of All Classes
</header>
<table class="table table-striped table-advance table-hover">
<tbody>
<tr>
<th><i class="fas fa-sort-amount-down"></i></i> Class_ID</th>
<th><i class="fas fa-building"></i> Class_Name</th>
<th><i class="fas fa-sync-alt"></i></i> Status</th>
<th><i class="fas fa-user-edit"></i> Manage</th>
<th><i class="icon_cogs"></i> Action</th>
</tr>
<?php
$alldonators="SELECT * FROM classes ";
$alldonators_query = mysqli_query($conn,$alldonators);
if($alldonators_query){
while($row=mysqli_fetch_assoc($alldonators_query)){ ?>
<tr>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['Class'] ?></td>
<td>
<span
<?php if($row['isActive'] == 1){
echo " class='text-success'> <i class='icon_check_alt2'></i> Active ";
} else{
echo " class='text-danger' ><i class='fas fa-exclamation-circle'></i> Inactive";
}?>
</span>
</td>
<td><div class="btn btn-primary"><i class="fas fa-user-edit"></i> Manage Class</div></td>
<td><div class="btn-group">
<?php if($row['isActive'] == 1){
echo "<a class='btn btn-warning' href='#'><i class='fas fa-exclamation-circle'></i> </a>";
} else{
echo "<a class='btn btn-success' href='#'><i class='icon_check_alt2'></i> </a>";
}?>
<a class="btn btn-danger" href="#"><i class="icon_close_alt2"></i></a>
</div>
</td>
</tr>
<?php } } ?>
</tbody>
</table>
</section>
</div>
<div class="col-lg-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addstudent">
<i class="fas fa-plus-circle"></i> Create New Class
</button>
<div class="modal fade" id="addstudent" tabindex="-1" role="dialog" aria-labelledby="addstudents" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addstudent">Add Student-Class</h5>
</div>
<div class="modal-body">
<form action="../func/saveclass.php" method="POST">
<!-- Input Name -->
<div class="form-group">
<label for="ClassNameInput" required>Name For Class</label>
<textarea class="form-control" id="ClassNameInput" name="newclassInput" placeholder ="2020 A/L Matugame" rows="3" required></textarea>
</div>
<!-- input current Status -->
<div class="form-group">
<label for="InputCurrentStatus">Current Status</label>
<select class="form-control" id="InputCurrentStatus" name="statusInput">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
</div>
<!-- modal-footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="saveClassBtn">Save changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</section>
<!-- container section end -->
<!-- javascripts -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="../js/jquery.scrollTo.min.js"></script>
<script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
<!--custome script for all page-->
<script src="../js/scripts.js"></script>
</body>
</html>


It looks like your isset() statement is wrongly enclosed, you should have:
if (isset($_GET['model']) && $_GET['model'] === 'true')) {
// TODO
}
In short, your assertion needs to be separate to your check to make sure $_GET['model'] is set.


Instead of doing this, you could make a hidden input field and check for the GET parameters and then give it a value. Then in your jQuery check for the value of that input field and show the modal accordingly.
HTML
<input type="hidden" id="show_modal" value="<?php echo isset($_GET['model']) && $_GET['model'] === true ? 1 : 0; ?>
JQuery
$(document).ready(function(){
let show_modal = $('#show_modal').val();
if(show_modal == 1){
$('#addstudent').modal('show');
}
});

Related

I have a business sales page that shows results from a json file. I want to be able to pass the information for one listing on a results page [duplicate]

This question already has answers here:
PHP Pass variable to next page
(9 answers)
Closed 1 year ago.
My index.php page has a display of listings from a json file which looks good. But I am trying to send a result of a single listing from that page to another page (result.php). How do I display the results of that single listing to the new page?
Here is the code for my first page that is attached to the json file:
<?php
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-bottom:150px;">
<?php foreach ($listings as $listing) { ?>
<span style="visibility:hidden;"><?= $listing->Oid; ?></span>
<div class="row align-items-center border-top">
<div class="col-3" style="padding:10px;">
<?= $listing->AdPhoto; ?>
</div>
<div class="row col-8" style="margin-left:10px;">
<div class="col-8 align-items-center">
<h2 style="color:#00471C; width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" type="button"><?= $listing->AdTitle; ?></h2>
<h3><?= $listing->AdTagLine; ?></h3>
<p><?= $listing->AdTagLine; ?></p>
</div>
<div class="col-4 align-items-start">
<center><h1><?= $listing->ListingPrice; ?></h1><h3>EBITDA: $<?= $listing->EBITDA; ?></h3></center><br><br>
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?<?= $listing->Oid; ?>" role="button">See Listing</a></center>
</div>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
Here is the code to my second page that I want to pull from single listing of index.php file:
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-top:50px; margin-bottom:50px;">
<?php foreach ($listings as $listing) { ?>
<!-- Ad Header -->
<div class="row align-items-center" style="margin-bottom:25px;">
<div class="col-12">
<h1><?= $listing->AdTitle; ?></h1>
<h3><?= $listing->County; ?>, <?= $listing->State; ?></h3>
</div>
</div>
<!-- Ad Photo -->
<div class="row" style="margin-bottom:25px;">
<div class="row col-8 align-items-center">
<div class="col-12">
<?= print "Your registration is: ".$regValue."."; ?>
<?= $listing->AdPhoto; ?><br><br>
</div>
<!-- Ad Pricing -->
<div class="col-6">
<h2>ASKING PRICE: $<?= $listing->ListingPrice; ?></h2>
</div>
<div class="col-6">
<h2>CASH FLOW: $<?= $listing->CashFlow; ?></h2>
</div>
<!-- Above button info -->
<div class="col-3">Gross Revenue: </div><div class="col-3">$<?= $listing->GrossRevenue; ?> </div><div class="col-3">Inventory: </div><div class="col-3">$<?= $listing->Inventory; ?></div>
<div class="col-3">EBITDA: </div><div class="col-3">$<?= $listing->EBITDA; ?> </div><div class="col-3">Rent: </div><div class="col-3">$<?= $listing->Rent; ?> </div>
<div class="col-3">FF&E: </div><div class="col-3">$<?= $listing->FFandE; ?> </div><div class="col-3">Established: </div><div class="col-3"><?= $listing->YearEstablished; ?> </div><br><br>
<!-- buttons -->
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SAVE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">PRINT</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SHARE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">VALUATION REPORT</a>
</div>
<!-- Ad Description -->
<div class="col-12"><br><br><hr><br>
<h2>DESCRIPTION</h2>
<h2><?= $listing->AdTagLine; ?></h2>
<?= $listing->AdDescription ?><br>
<hr><br>
</div>
<!-- Ad Details -->
<div class="col-3">
<h3>Location:</h3>
</div>
<div class="col-9">
<?= $listing->County ?>
</div>
<div class="col-3">
<h3>Building SF:</h3>
</div>
<div class="col-9">
<?= $listing->TotalSqFt ?>
</div>
<div class="col-3">
<h3>Employees:</h3>
</div>
<div class="col-9">
<?= $listing->EmployeeCount ?>
</div>
<div class="col-3">
<h3>Facilities:</h3>
</div>
<div class="col-9">
<?= $listing->AdFacilityDescription ?>
</div>
<div class="col-3">
<h3>Competition:</h3>
</div>
<div class="col-9">
<?= $listing->AdCompetitiveAnalysis ?>
</div>
<div class="col-3">
<h3>Growth & Expansion:</h3>
</div>
<div class="col-9">
<?= $listing->AdOpportunityForGrowth ?>
</div>
<div class="col-3">
<h3>Support & Training:</h3>
</div>
<div class="col-9">
<?= $listing->AdSupportAndTraining ?>
</div>
<div class="col-3">
<h3>Reason for Selling:</h3>
</div>
<div class="col-9">
<?= $listing->AdReasonForSelling ?>
</div>
<div class="col-3">
<h3>Business Website:</h3>
</div>
<div class="col-9">
<?= $listing->WebsiteURL ?>
</div>
</div>
<div class="col-4 bg-light">
<div class="container">
<!-- CHANGE THE URL HERE -->
<div class="col-12">
<form action="https://app.99inbound.com/e/123" method="POST" target="_blank">
<h1 style="text-align: center;"><br>CONTACT US</h1>
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Full Name" required>
<input name="phone" type="phone" class="form-control" id="phone" placeholder="Phone Number" required>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter Email" required>
</div>
<div class="form-group">
<textarea name="message" class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br><hr>
</div>
<div class="row col-12">
<div class="col-6"><p>Business Listed By:<br>
<?= $listing->SellerFirstName; ?> <?= $listing->SellerLastName; ?></p></div>
<div class="col-6"><p><i class="fas fa-phone-square-alt"></i> <?= $listing->SellerPhone; ?></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php get_footer(); ?>
</body>
</html>

I might make a subtle change to the link to turn the ?id into a key/value pair, like
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?display=<?= $listing->Oid; ?>" role="button">See Listing</a></center>
Then on the second page
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$display = $_GET['display'];
$listings = json_decode($filename);
$listing=array_filter($listings, function($a) use($display) {
return $a->Oid === $display;
});
$listing = array_values($listing)[0];
// get rid of the loop on this page
// foreach ($listings as $listing) { <-- GONE
?>
<!-- then the rest of your code, using $listing -->

I fixed the problem by doing this to the button:
<?php echo"<a class='btn btn-primary' role='button' href='https://samplesite.com/result.php?" . http_build_query($listing) . "'>See Listing</a>"; ?>
Then echoing the items on the results page.

Textarea returns empty value

I have a form which takes three values Roomname, Experience and Rating. This data is then submitted to a database. The issue I'm facing is through my Roomname and Rating is getting submitted perfectly, the data I enter in textarea is giving me empty result in database. I have tried every way but I'm not able to solve this issue. Only this is the issue, other code is working fine.
Please help!!!
Here is the code:
<?php
include 'db.php';
session_start();
error_reporting(0);
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!--User's CSS-->
<link rel="stylesheet" type="text/css" href="../css/feedback.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<!--Font Awesome JS-->
<script src="https://use.fontawesome.com/1033686ccb.js"></script>
<!--JQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<?php include 'inner-navbar.php';
error_reporting(0);
?>
</header>
<div class="container">
<div id="feedback">
<h3 class="mb-5">Your Feedback</h3>
<form method="post" id="feedback-form">
<div class="row mb-3">
<label class="col-sm-6 col-form-label">Room Name: </label>
<div class="col-sm-6">
<select name="selectedRoomName" id="selectedRoomName" class="form-control">
<?php
$selectQuery="SELECT*FROM bookings where firstname='".$_SESSION['firstname']."';";
$selectQueryResult=mysqli_query($conn,$selectQuery);
if($selectQueryResult){
while($row=mysqli_fetch_assoc($selectQueryResult)){
echo '<option value="'.$row["roomName"].'">'.$row["roomName"].'</option>';
}
}
?>
</select>
</div>
</div>
<div class="row mb-4">
<label class="col-sm-6 col-form-label">Your Experience: </label>
<div class="col-sm-6">
<textarea class="form-control" placeholder="Your Experience" name="experience" id="experience"></textarea>
</div>
</div>
<div class="row mb-5">
<label class="col-sm-6 col-form-label">Your Rating: </label>
<div class="col-sm-6">
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="0"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="1"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="2"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="3"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="4"></i>
</div>
</div>
<button type="submit" class="btn btn-outline-dark submit" name="submit" id="submit">Submit Feedback</button>
<?php
if(isset($_POST['rating'])){
$roomName=$_POST['selectedRoomName'];
$experience=$_POST['experience'];
$rating=$_POST['rating'];
$submitQuery="INSERT INTO feedback(roomName,experience,rating) VALUES('$roomName','$experience','$rating');";
$submitQueryRes=mysqli_query($conn,$submitQuery);
if($submitQueryRes){
echo '<script>alert("Your Feedback has been Successfully Submitted!");</script>';
}else{
echo '<script>alert("Error: '.$rating.'");</script>';
}
}
?>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
var rating=-1;
$(document).ready(function(){
$('.fa-star').click(function(){
rating=parseInt($(this).data('index'));
});
$('.fa-star').mouseover(function(){
resetStarColors();
var value=parseInt($(this).data('index'));
for(var i=0;i<=value;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
});
$('.fa-star').mouseleave(function(){
resetStarColors();
if(rating!=-1){
for(var i=0;i<=rating;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
}
});
function resetStarColors(){
$('.fa-star').css('color','black');
}
$("#submit").click(function(){
$.ajax({
url:'feedback.php',
method:'POST',
data:{
selectedRoomName: selectedRoomName,
experience: experience,
rating: rating
},
success: function(){
alert(experience);
}
});
});
});
</script>
</html>

Move
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
inside your .click() method.

Bootstrap Modal Not Woking

I Have a code that will get the data from database to a modal pop up via ajax/json i successfully get the data. but im not able to show my modal. heres my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/w3.css">
<!-- Scripts -->
<script src="js/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="js/jquery-3.2.1.js" crossorigin="anonymous"></script>
<script src="js/popper.min.js" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Scripts -->
<script type="text/javascript">
//Start Update Function
function GetUserDetails(EmployeesID) {
// Add User ID to the hidden field for furture usage
$("#hidden_user_id").val(EmployeesID);
$.post("ajax/readUserDetails.php", {
EmployeesID: EmployeesID
},
function (data, status) {
// PARSE json data
var tblinfo = JSON.parse(data);
// Assing existing values to the modal popup fields
$("#update_first_name").val(tblinfo.firstname);
$("#update_last_name").val(tblinfo.lastname);
$("#update_basic_salary").val(tblinfo.basicsalary);
}
);
// Show Modal
$("#update_user_modal").modal("show");
}
//End Update Function
body{
background-color:#e9ecef;
}
</style>
</head>
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HR
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="first.php" onclick="return confirm('Are you want to exit?')">Logout</a>
</div>
</div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
<h1>Basic Information</h1>
<hr class="my-4">
<p class="lead">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<!-- Modal - Update User details -->
<div class="modal fade" id="updateusermodal" tabindex="-1" role="dialog">
<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>
<h4 class="modal-title" id="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="update_first_name">First Name</label>
<input type="text" id="update_first_name" placeholder="First Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_last_name">Last Name</label>
<input type="text" id="update_last_name" placeholder="Last Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_basic_salary">Basic Salary</label>
<input type="text" id="update_basic_salary" placeholder="Basic Salary" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
<input type="hidden" id="hidden_user_id">
</div>
</div>
</div>
</div>
<!-- // Modal -->
<div class="row">
<div class="col-md-12">
<h4>Records:</h4>
<div class="records_content"></div>
</div>
</form>
</p>
</div>
<!-- End Body -->
</body>
</html>
heres my readuserdetails.php
<?php
// include Database connection file
include("myconnection.php");
// check request
if(isset($_POST['EmployeesID']) && isset($_POST['EmployeesID']) != "")
{
// get User ID
$EmployeesID = $_POST['EmployeesID'];
// Get User Details
$query = "SELECT * FROM tblinfo WHERE EmployeesID = '$EmployeesID'";
if (!$result = mysqli_query($con, $query)) {
exit(mysqli_error($con));
}
$response = array();
if(mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$response = $row;
}
}
else
{
$response['status'] = 200;
$response['message'] = "Data not found!";
}
// display JSON data
echo json_encode($response);
}
else
{
$response['status'] = 200;
$response['message'] = "Invalid Request!";
}
and my code for populating the data into tables:
<?php
// include Database connection file
include("myconnection.php");
// Design initial table header
$data = '<table class="table table-bordered table-striped">
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Basic Salary</th>
<th>Update</th>
<th>Delete</th>
</tr>';
$query = "SELECT * FROM tblinfo";
if (!$result = mysqli_query($con, $query)) {
exit(mysqli_error($con));
}
// if query results contains rows then featch those rows
if(mysqli_num_rows($result) > 0)
{
$number = 1;
while($row = mysqli_fetch_assoc($result))
{
$data .= '<tr>
<td>'.$number.'</td>
<td>'.$row['firstname'].'</td>
<td>'.$row['lastname'].'</td>
<td>'.$row['basicsalary'].'</td>
<td>
<button onclick="GetUserDetails('.$row['EmployeesID'].')" class="btn btn-warning">Update</button>
</td>
<td>
<button onclick="DeleteUser('.$row['EmployeesID'].')" class="btn btn-danger">Delete</button>
</td>
</tr>';
$number++;
}
}
else
{
// records now found
$data .= '<tr><td colspan="6">Records not found!</td></tr>';
}
$data .= '</table>';
echo $data;
?>
i try to show the data i fetch via alert(data) and its shows that i already fetch data from my database. i just dont get why the bootstrap modal is not showing. its like reloading the page only.

Open your modal after the AJAX is completed and the content is appended in the modal, your id is incorrect, it should be updateusermodal
function (data, status) {
// PARSE json data
var tblinfo = JSON.parse(data);
// Assing existing values to the modal popup fields
$("#update_first_name").val(tblinfo.firstname);
$("#update_last_name").val(tblinfo.lastname);
$("#update_basic_salary").val(tblinfo.basicsalary);
$("#updateusermodal").modal("show");
}
change your onclick event to onclick="GetUserDetails(EmployeesID,event)"
prevent the default click intro your function:
function GetUserDetails(EmployeesID,event) {
event.preventDefault()

Adding text input to table

I am trying to make the value of the input with the name "game-name" to be in the "Name of the game" column of the table when I click on the "add game" button. Also the delete button does not work.
Here is my code:
$(function() {
var $td = '<td>' + '</td>';
$('input[name=add-game]').click(function() {
$('tbody').append('<tr>' + $td + $td + $td + '</tr>');
var $tableRows = $('tbody tr').length
$('tbody tr').eq($tableRows).children().eq(0).text($('input[name=game-name]').val())
$('td:nth-child(3)').html('<button>');
$('button').text('Delete').addClass('delete btn btn-block btn-sm btn-danger');
});
$('.delete').click(function() {
$(this).parent().parent().empty();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody>
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>

Here's a quick solution. Hope this helps.
$(function() {
$('input[name=add-game]').click(function() {
// Lets get the information ready to be added
var name = '<td>' + $('input[name="game-name"]').val() + '</td>';
var rating = '<td>' + $('input[name="game-rate"]').val() + '</td>';
var btnDelete = '<td><button class="delete btn btn-block btn-sm btn-danger">Delete</button></td>'
// Lets append the information into the game table
$('tbody[id="game-table"]').append('<tr>' + name + rating + btnDelete + '</td>');
// Since we've created a delete button, we need to bind
// an event listener to the button so that we can
// delete it from the table if the user clicks it
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody id="game-table">
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>

Your code is in $(function()... it means that when the dogument gets ready these codes will run. You add delete buttons after all codes ended. In another way your delete buttons add after the codes running and this:
$('.delete').click(function() {
$(this).parent().parent().empty();
});
Does not register for new added .delete buttons.
To elements that dynamically adding to page you need to use delegate:
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});

How to get data to bootstrap 3 modal form using jquery

Im currently working on a project using codeigniter framework and bootstrap 3 sb admin 2 template, I have no experience about JQuery or Ajax before, now I want create an edit form to load and saving data in bootstrap modal just like this http://formvalidation.io/examples/loading-saving-data-modal/ but I keep getting this error on my console view_user:323 Uncaught ReferenceError: $ is not defined and the edit form didn't load at all. Here's and my code :
The CSS I include:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home">
<meta name="author" content="MGA">
<title>App | POS</title>
<!--Page Logo-->
<link rel="icon" type="images/ico" href="<?php echo base_url();?>/assets/images/logo.png">
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/mytheme.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>/assets/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url();?>/assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- DataTables CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
The Code Itself :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Daftar User</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#view">Lihat User</a></li>
<li><a data-toggle="pill" href="#add">Tambah Baru</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="view" class="tab-pane fade in active">
<div class="row">
<div class="col-lg-12">
<!-- /.panel-heading -->
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Jabatan</th>
<th>Status</th>
<th>Menu</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($session as $row1) {
if($row1->id == "ADMIN" && $row1->jabatan_id == 1){
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td >".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td>
<div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a> <a data-toggle='modal' data-id=".$row->id." class='edit btn btn-warning btn-circle'><i class='fa fa-pencil fa-fw'></i></a></div>
</td>
</tr>";
$no++;
}
}else{
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td>".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td><div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a></div>
</tr>";
$no++;
}
}
}
?>
</tbody>
</table>
<!-- /.table-responsive -->
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<div id="add" class="tab-pane fade">
<?php include 'addnew.php' ?>
</div>
<?php include 'formedit.php' ?>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
The formedit.php :
<script type="text/javascript">
$(document).on("click", ".open-edit", function () {
var userID = $(this).data('id');
$(".modal-body #userID").val( userID );
});
</script>
<div class="modal hide" id="edit_user">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="userID" id="userID" value=""/>
</div>
The Javascripts And JQueries :
<!-- jQuery -->
<script src="<?php echo base_url();?>/assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url();?>/assets/dist/js/sb-admin-2.js"></script>
<!-- DataTables JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/datatables/media/js/jquery.dataTables.min.js">
</script>
<script src="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script type="text/javascript">
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
Sorry for my bad english btw :)

IDs should be unique to the page, so it would probably be cleaner to do $(#userID).val(userID). But that aside...
In terms of error view_user:323 Uncaught ReferenceError: $ is not defined likely your jQuery is not defined. Ensure that your page is loading the jQuery properly (that the file is both there, and has the code in it).
Chrome: Right click -> Inspect -> Sources
Firefox: Right Click -> Inspect Element -> Debugger -> Sources
Internet Explorer: Click -> Inspect Element -> Debugger

Categories

Resources