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>
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>
Good afternoon colleagues, I am in a web design course, this work was presented to me, which is a search page, which should show the user's information in a MODAL, obtaining it from the database.
I managed to make the Modal work, but, it throws all the information of the table, when I try to do the query, it does not show me anything.
I hope you can guide me with this detail
<?php
//Conexion para el Modal
$con =mysqli_connect("localhost", "root","");
$db = mysqli_select_db($con, 'requi');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="./">Search panel</a>
</nav>
<meta charset="UTF=8">
<hr weight= "100%">
<title>Buscar requisicion</titLe>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-5">
<h2>Buscar requisición</h2>
<div class="form-group">
<form class="form-outline">
<input class="form-control mr-sm-2" type="search" placeholder="Ingresa el ID" name ="id" aria-label="Search">
<!--<button class="btn btn-success my-2 my-sm-0" type="submit" name="search">Buscar</button>-->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" name="smodal">Busqueda</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Mail Search</h4>
</div>
<div class="modal-body">
<p>Your data: </p>
</div>
<div>
<table style='border-collapse: collapse;'>
<tr>
<th>Email</th>
<th>Name</th>
<th> </th>
</tr>
<?php
if(isset($_POST['search'])) {
$id = $_POST['id'];
$query = "select * from info WHERE id = '$id'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$correo = $row['correo'];
$nombre = $row['nombre'];
echo "<tr>";
echo "<td>".$correo."</td>";
echo "<td>".$nombre."</td>";
echo "</tr>";
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I want a modal popup after an if-statement is satisfied. The following is a sample of the code:
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php
if (isset($_POST['btn'])) {
//then trigger the modal pop-up
}
?>
If you want open modal window then you have to use javascript / jquery as shown below
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php if (isset($_POST['btn'])) { ?>
<script>
$(function() {
$("#myModal").modal();//if you want you can have a timeout to hide the window after x seconds
});
</script>
<!-- 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>Sample modal window</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
I have the following form code:
<div class="modal" 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>
<form action="/admin/menuContent.php?id=<?php echo $menuId ?>" method="post">
//few inputs...
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
<div class="col-sm-1">
Cancel
</div>
</form>
And my problem is that after click save button the modal appears but just for a second or less, what can be a problem? Thanks for helps! :)
that error come just because of url passed in form action.try to figure out that.whether you have passed correct url or not.
i have tried this.
<!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">
<div class="modal" 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 class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
</div>
</div>
</body>
</html>
You should not trigger form submit and modal with a single submit button.When you trigger the submit button the modal disappears and direct to menuContent.php.You should use some client side programs to pass the parameters into the php.
When you click the save button, the form was submitted.
So this goes to action page. (action="/admin/menuContent.php?id=")
Please refer this and solve your problem: https://www.w3schools.com/bootstrap/bootstrap_modal.asp
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.