I am trying to open a modal when submit is clicked in the table .
I tried to change the animation to fadeIn because using fade the modal shows only flash.
The result when I use the fadeIn the modal appears but in split second and I did not include any timers or refresh in the whole page.
Can I have a sample code to show the modal and set the conditions in
if(isset($_POST['pending'])) { ...alert ..}
or please comment suggestions for this.
Because I am unable to use and view the modal properly.
Note: It has a bootstrap for the modal and jquery but I did not include here in the post
while($record = mysql_fetch_array($myData))
{
echo "<form action='dir_1.php' method='POST'>";
echo "<tr>";
echo '<td><input type="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" /></td>';
echo "</tr>";
echo "</form>";
}
if(isset($_POST['pending'])){
echo('
<div class="modal fadeIn" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
');
}
Have you tried triggering with JavaScript:
<?php if(isset($_POST['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
Quick Browser test, testmodal.php:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fadeIn" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php if(isset($_GET['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
In the browser:
http://your-domain/testmodal.php?pending=fakevar
Related
I generate many bootstrap modals with a php script, and I'd like to edit some input of it when I click button "save changes".
ModalIDs generated are something like "ModalID0000".
But nothing happens with my script when i click on "save changes".
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>"/>
<input type="password" value="<?php echo $pwd; ?>"/>
<?php } else { ?>
<input class="user_login" type="text" value="user"/>
<input class="user_password" type="password" value="xxxxxxxxx"/>
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save" >Save changes</button>
</div>
</div>
</div>
</div>
$("modal.save").click(function(){
alert('save');
//edit user_login and user_password values here
});
EDIT :
1st mistake found with modal element selector instead of class, but still no alert
$(".modal.save").click(function(){
alert('save');
});
Save button is the child element of .modal selector.
So $("modal.save") should be replaced to $(".modal .save").
Or that button belongs to .modal-footer so you can put as follows.
$(".modal-footer .save")
$(".modal .save").click(function () {
alert('save');
//edit user_login and user_password values here
});
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog"
aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>" />
<input type="password" value="<?php echo $pwd; ?>" />
<?php } else { ?>
<input class="user_login" type="text" value="user" />
<input class="user_password" type="password" value="xxxxxxxxx" />
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I used some code that i found on the internet that was supposed to autoload a modal but its's not working.
This is a live website and i am supposed to bring some changes to it. Not sure what's wrong here:
if (isset($_SESSION['verify'])) {
echo '
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>';
}
I wanted this to produce a modal without any need for a button to be pressed but on auto load it's not doing that.
if(isset($_SESSION['verify'])){
echo"
<div class='modal fade id='exampleModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title' id='exampleModalLabel'>Modaltitle</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<form action='#' method='post'>
<input type='text' name='otp' placeholder='Type OTP'>
<textarea rows='1' cols='25' name='message' placeholder='Type Message'></textarea>
<center><button id='button2' type='submit' name='verify_otp'>Send Message</button></center>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$('#exampleModal').modal('show');
});
</script>";}
I have modified your code with changing quotes (single quote to double). This code should work for you. Before running please check following steps:
Is there any JQuery conflict in your code?
Use browser console to check whether there are any javascript errors.
I am assuming you have included required JS and CSS to use modal.
First issue: conflicting quotes
if (isset($_SESSION['verify'])) {
echo '
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
above you have an opening simple quote in theecho ' part and then you again use single quotes on your JS code in .modal('show') part.
Second issue: Absolutelly poorly engineered solution. You are echoing the modal server sides if you have a session variable called "verify" , with a static JS tiny code which just shows the modal. Why to charge the server with that work , if it's an UI concern? Why not to set a cookie server-sides and write a JS script which would show the modal if the cookie is not set? Like this
<?php
if(isset($_SESSION["verify"])){
setcookie("verify","true");
}
?>
<script type="text/javascript">
$(document).ready(function()
{
let cookie = getCookie("verify")
if(cookie){
$("#exampleModal").modal('show');
}
}
);
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I didn't tested that code though, it might work or need to be fine tuned but it's
main concept it's clear : separate your concerns as much as you can between the -layers of your application.The view layer (HTML, JS) should communicate via some mechanism (ideally you'd have sent an ajax request rather than a cookie) with the business layer (PHP) , the later tell whether the verify variable exists , and the view layer should then show the modal if necessary.
Third issue:Not readable code Even if you actually wanted to go on with such an bad approach, you are writing it the worst possible way. What if coders or designers wanted to change the quoted HTML ? Do you know how hard it would be to change it without breaking something within those quotes? A better approach would be
<?php if(isset($_SESSION["verify"])){ ?>
<div class='modal fade id='exampleModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title' id='exampleModalLabel'>Modaltitle</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<form action='#' method='post'>
<input type='text' name='otp' placeholder='Type OTP'>
<textarea rows='1' cols='25' name='message' placeholder='Type Message'></textarea>
<center><button id='button2' type='submit' name='verify_otp'>Send Message</button></center>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$('#exampleModal').modal('show');
});
</script>
<?php } ?>
Fourth (and most important) issue: An "alive" website in which you are supposed to make changes that you found on internet and don't know why/how they works ? Dude, please stop doing that !! If you don't know what is that code doing or why it isn't doing it, perhaps you shouldn't be working professionally yet and need more training first.
A simple approach would be to end the PHP block and write the JS/HTML code. Like below.
if (isset($_SESSION['verify'])) {
?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
</script>
<?php
}
I wanted to show the further details of my card in modal when the user click the button "More Details" ,i have seen an answer regarding to this however I don't want the information to be inside an input field. Can please someone help me with it?
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
MODAL
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$(".modal-body #eventId").val( eventId );
});</script>
Instead of using an input field you could create a container element for the id, a div or span and update content of the element using .html() jQuery method.
$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$('#idHolder').html( eventId );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
<span id="idHolder"></span>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I have dynamic buttons
when I click on button a popup should appear with a textbox.
My button code is
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';
My jQuery code is
<script>
$(document).ready(function(){
$("#update").click(function(){
var butval = $("#update").val();
$("#ctext").val(butval);
});
});
Modal popup is
<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">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" value="<?php ;?>">
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>
For this kind of case , You must use data attribute of HTML5.
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';
And in the Modal popup,
Here is the magic script that will solve your problem.
<script>
$(document).ready(function(){
$("#update").click(function(){
// this is the value you get which is in data attribute of update button.
var btn_value= $(this).data('btn');
$('#myModal')
.find('#ctext').val(btn_value).end()
.modal('show');
});
</script>
Updated for multiple buttons using class: You can try the below. first remove data-target="#myModal" from button then get the value and write it to input then open the modal:
$(document).ready(function(){
$(".update").click(function(){
var butval = $(this).val();
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
<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>
<button type="submit" class="btn btn-success update" value='2' >Update</button>
<button type="submit" class="btn btn-success update" value='3' >Update</button>
<!-- see the button attributes changes -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>
#suchit Thanks for your help.
this code is working
<button type="submit" class="btn" data-toggle="modal" value='.$row['country_name'].' id='.$row['country_name'].' >Update</button>;
<script>
$(document).ready(function(){
$(".btn").click(function(){
var butval = this.id;
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
} );
</script>
I wish to pass the id of a particular row into a modal
code for link
Resume
Code for modal
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="fetched-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Code for script
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Code for fetch.php
<?php
$editId = $_POST['rowid'];
echo $editId;
?>
I am supposed to get the id but instead i am getting undefined value in the modal, can anyone please tell why this is happening
Try this code
Resume
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<span class='ShowData'> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Script Code
<script>
$('.ListId').click(function()
{
var Id=$(this).attr('data-id');
$.ajax({url:"fetch.php?Id="+Id,cache:false,success:function(result)
{
$(".ShowData").html(result);
}});
});
</script>
fetch.php Code
$id=$_GET['Id'];
echo $id;