I am working on a project where the HTML table rows have been created with information of Name, Details, Phone, Email etc. All this information is stored in a database.
Now, I want obtain a modal box, when I click on the table row and obtain information which is there on the row in a neat and tidy form. As you can see from the code, I have already put it an alert box. However, instead of this, I would like to get the same information in a modal box using Jquery and bootstrap.
For this please find the existing codes that are in place. I have not put any codes for the modal part. This is because, I am not sure how to get the table row as a modal button.
<?php
session_start();
if(isset($_SESSION['u_uid']))
$uid = $_SESSION['u_id'];
require_once('connect.php');
$ReadSql = "SELECT * FROM `contact` WHERE users_id=$uid AND ACTIVE_INACTIVE=1 ORDER BY Name";
$res = mysqli_query($connection, $ReadSql);
?>
<!DOCTYPE html>
<form action="http://motoko.sorainsurance.com.au/includes/logout.inc.php" method="POST">
<button type="submit" name="submit">Logout</button>
</form>
<form>
<input type="button" value="Add Contact" onclick="window.location.href='http://motoko.sorainsurance.com.au/crud/comp_contact_index.php'" />
</form>
<html>
<head>
<title>Motoko</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.table-hover tbody tr:hover td
{
background-color: #A9A9A9;
color: white;
}
body
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
<body>
<div class="container">
<div class="row">
<table class="table">
<table class="table table-hover">
<tr>
<th><strong>Contact Category</strong></th>
<th><strong>Name</strong></th>
<th><strong>Details</strong></th>
<th><strong>Phone</strong></th>
<th><strong>Email</strong></th>
<th><strong>Address</strong></th>
<th><strong>Extras</strong></th>
</tr>
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<td class= "r-Type"><?php echo $r['Contact_type']; ?></td>
<td class= "r-Name"><?php echo $r['Name']; ?></td>
<td class="r-Details"><?php
if ($r['Contact_type'] == 'Individual')
{
echo $r['Title']. ', '.$r['Company'];
}
elseif ($r['Contact_type'] == 'Team')
{
echo $r['Company'];
}
elseif ($r['Contact_type'] == 'Company')
{
echo '';
}
?> </td>
<td class="r-Phone"><?php echo $r['Phone']; ?></td>
<td class="r-Email"><?php echo $r['Email']; ?></td>
<td class="r-Address"><?php echo $r['Address']; ?></td>
<td class="r-Update">Edit</td>
<td class="r-Delete"><a href='delete.php?id=<?php echo $r['id']?>'>Delete</a></td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
Jquery used
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
What you can do is on your '.click()' event, you can open a bootdtrap modal. Here's a demo modal that might help you:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="container">
<h2>Click the button to get row information</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#infoModal">Get Information</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" role="dialog" style="margin-top: 14%">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Information</h4>
</div>
<div class="modal-body">
<label>Values: </label>
<input id="val1" type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now this modal has an input box which has id. So first you set its value with what you get in your alert by doing: $('#val1').val($(this).text());.
Once the value is set, you need to open the modal.
For opening the modal, inside your .click() function, after the value setting, do $('#infoModal').modal('show');. This will open the modal with your row values in the input box.
Hope this helps. If it doesn't it'll definitely help you along achieving what you want.
Related
I have a page that has a table with 3 columns, two of which are data and the third has an edit button. When I click this button, the name is sent to a modal where it can be changed.
I need to do two things:
Update the name in the table and close the modal when click the Save Changes button on the modal.
Is it possible to do that?
Index.php
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<table id="tabela">
<thead>
<th>#</th>
<th>Name</th>
<th></th>
</thead>
<tr>
<td>1</td>
<td class="name">Fred</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td class="name">Charles</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>3</td>
<td class="name">John</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
</table>
<div class="modal" id="modalTest" tabindex="-1" role="dialog">
<?php
include "modalTabela.php";
?>
</div>
<script>
//send name to php page
$(".btnEdit").click(function() {
var nome = $(this).closest('tr').find(".name").text();
$.ajax({
type: 'POST',
url: '//localhost/tabela/modalTabela.php',
data: {msg: nome },
}).done(function(data) {
//update html
$("#modalTest").html(data);
//show modal
$("#modalTest").modal("show");
});
});
</script>
</body>
</html>
modalTabela.php
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
$nome=$_POST['msg'];
echo "<label>Name</label><input type='text' id='edNome' value='$nome'></input>";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSalvar">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is my page, how to get modal after form submit.
I want to get Modal as I am in requirement of doing such task. This is just simple practice modal page for my understanding.
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit")
{
?>
<script type="text/javascript">
$(window).load(function()
{
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<form method="post">
<div class="col-sm-4">
<input type="text" name="text" class="form-control"> <br>
<input type="submit" name="btn" class="btn btn-danger">
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all do not include <script> tags outside the html tags, put them in the <body> or <head> tags. Whenever you are working with the DOM and jQuery, wrap your code in a document ready closure. Ex:
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
You need to place your jQuery after the definition of the modal in the HTML Since you can not display a BS modal before the HTML page and the modal is defined.
Also the POST response from the form submit button is "Submit Query" not just "Submit".
Put the following PHP under the last </div> tag from the modal definition and the before the </body> tag and it will work:
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit Query")
{
?>
<script type="text/javascript">
$('#myModal').modal('show');
</script>
<?php
}
?>
I have a link that when the user clicks it, a modal will show containing the following:
<?php
include ('dbcontroller.php');
if(isset($_GET['view_id']))
{
$id=$_GET['view_id'];
$sql = mysqli_query($conn, "SELECT * from press where id='$id'");
$row = mysqli_fetch_array($sql);
?>
<input type="hidden" value="<?php echo $row['id']; ?>" />
<?php echo $row['reason']; ?>
GO BACK
<?php
}
$conn->close();
?>
The code above is what I did so that when the user click the link, it will redirect him to that page. But i want it to be in modal dialog instead since it's not much content.
This is the link that the user clicks. How will I open this link into a modal dialog?
Click to view
I've seen some on this site and elsewhere but all they have is a link without an ID to view modal dialog. I didn't find an issue same with mine so I decided to ask for help.
hey you can use following code to get row value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<br><br><br><br>
<table id="prab" border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>clicked value </p>
<input type="text" id="valueof" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#prab').click(function(e){
// alert($(e.target).val());
document.getElementById("valueof").value = $(e.target).val();
})
</script>
</body>
</html>
I'm having a hard time in this one. I want to add data to a column in my database.
If there is an existing type in the database, then it not going to add, and if not it is going to add. However, it seems that my $validate is always empty.
Thanks in Advance. I really Appreciate your Help Thanks again.
this my add_item_type.php
$newi = $_GET["newi"];
$dept = $_GET["dept"];
$connection = mysqli_connect("localhost","root","","fumc");
$sql = mysqli_query($connection," SELECT * FROM items WHERE type = '".$newi."' ");
while($data=mysql_fetch_array($sql)){
$validate = $data['department'];
}
if($validate=="")
{
}
else
{
mysqli_query($connection," INSERT INTO items (type,department)VALUES('".$newi."','".$dept."') ");
echo mysqli_affected_rows($connection);
}
?>
My database name is fumc, my table name is items and inside my table i have type And Department .... One of my type is keyboard and department is IT..
this is my main.php
<html>
<body>
<head>
<link rel="icon" type="image/png" href="fumc.png">
<link href="css123/bootstrap.min.css" rel="stylesheet">
<link href="css123/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<input type="button" name="modal" value="Add Item Type" class="btn btn-primary" style="margin-left:100px;" data-toggle="modal" data-target="#myModal">
<center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style='top:0px;'>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:400px;">
<div class="modal-header " style='background:#ddd;'>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Arial Black;color:green;"><center><b>ADD ITEM TYPE</b></center></h4>
</div>
<div class="modal-body">
<br>
<form action="#" method="post">
<input type='hidden' value='<?php echo $department?>'name ='dept' id='dept'>
<center>
<font class='text-success' ><b>NEW ITEM TYPE</b>
<input type='text' name ='newi' id='newi' style='margin-left:10px;border:1px solid gray;text-align:center;background:Transparent;'>
</font>
</center>
</div>
<br>
<div class="modal-footer" style='background:#ddd;'>
</form>
<button type="button" class="btn btn-info " name="add" id="add" >Add Item Type</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</center>
<script>
$(function(dd){
$("#modal").on("click",function(dd){
var dept = $("#dept").val();
var newi = $("#newi").val();
});
$("#add").on("click",function(tt){
var dept = $("#dept").val();
var newi = $("#newi").val();
$.get("add_item_type.php?newi="+newi+"&dept="+dept,function(values){
location.reload();
});
});
});
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/fastclick/fastclick.min.js"></script>
<script src="dist/js/app.min.js"></script>
<script src="dist/js/demo.js"></script>
</body>
</html>
Need help Please..! Thanks.
The easiest way to do this is to use MySQL's built in UNIQUE attribute. Set the department column of your database table to be unique, then you can use a query like this:
"INSERT IGNORE INTO items (type,department) VALUES ('".$newi."','".$dept."')"
This query will only insert a new row if the $dept value doesn't match any of the other values in the department column.
I fetched record from mysql database when i enter any keyword in search box.
up to this everything run properly and also shows result of that particular keyword. My query is the fetched result will shows just below the search box instead of that i should show results on popup and the popup should be responsive also.
plz suggest me,
Below is the code
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script></head> <body>
<div style="text-align:center;">
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div></body></html>
db_query.php
<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$_POST['value']."%' LIMIT 20"); if(mysqli_num_rows($query) > 0)
{
?>
<div class="input-group col-sm-10 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover" style="text-align:center;">
<thead>
<tr bgcolor="#1E90FF" >
<th>Products</th>
<th style="text-align:center;">Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysqli_fetch_array($query))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:60px;width:80px;" /></td>
<td><?php echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:30px;width:100px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
else
{ // if there is no matching rows do following
echo "No results found...";
} ?>
By default bootstrap popup/modal window is responsive. Dont worry about that.
Add modal window html codes in yor page.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
After loading the result as add the result in model body
$('#myModal .modal-body').html(data);
Then trigger model using:
$('#myModal').modal(options);
- Use standard bootstrap options in the modal function.