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
}
Related
I have this form in html:
<form action='#Url.Action("ExportExcel", "Banks")' method="post" target="_blank" id="myForm">
#Html.AntiForgeryToken()
<input type="hidden" name="typeDetails" id="typeDetails" value="typeDetails.value" />
<input type="hidden" name="filteredBanksIds" id="filteredBanksIds" value="" />
<input id="btnExportExcel" type="hidden" value="submit" data-toggle="modal" data-target="#ExportExcelModal" />
</form>
and the modal is:
<div class="modal fade" id="ExportExcelModal" tabindex="-1" role="dialog" aria-labelledby="ExportExcelModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ExportExcelModalTitle">Banks</h5>
<button type="button" class="close" id="ExportExcelModalClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export this banks with details?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#myModal" value="1" onclick="exportExcel(this.value)">yes</button>
<button type="button" class="btn btn-primary" data-target="#myModal" value="0" onclick="exportExcel(this.value)">no</button>
</div>
</div>
</div>
</div>
and I have this in JS:
function exportExcel(typeDetails) {
$('#ExportExcelModalClose').click();
$('#filteredBanksIds').val(filteredBanks.map(function (bank) { return bank.Id }));
$('#typeDetails').val(typeDetails);
$("#myForm").submit;
return true;
}
I would like that in addition to what happens on the server side (Excel export and download),
also a message will be returned to the user after the Excel export ends, with custom message from the server.
How can I add this?
My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<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">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<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">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
Try doing $('modal-body').empty() instead of clear
I tried to create a form in a model window. But the form action doesn't work. This is my code so far.
HTML Code
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</div>
</div>
</div>
</form>
Java Script code
<script type="text/javascript">
function form_submit() {
document.getElementById("comment_box").submit();
}
</script>
Can anyone help me to fix this.
1st : Your action attribute Get parameter value should be inside the double quotes .
action="functions/userManagement.php?id="<?php echo $id ?>
To
action="functions/userManagement.php?id=<?php echo $id ?>"
2nd : Simple change button type to submit
<button type="submit" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
3rd : Your form should be inside the modal .
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</form>
</div>
</div>
</div>
Note : simple your submiting the form . so you can submit the form easily by button type="submit" .
Use this one
onclick="javascript:form_submit()"
Use this one
action="<?php echo htmlentities('functions/userManagement.php?id= echo $id');?>"
Hope it is helpful for you.
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
I have a Button that gets populated with ever row in the table. I want to be able to put the value of the row "$row[auditID]" and use it in my modal to be able to make this delete button work. The alert pops up, but the Modal won't hide and my delete action doesn't work (doesn't delete the audit).
<a href=\"#\" id=\"$row[auditID]\" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title=\"Remove\" >Remove</span> </a>";
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
JQuery Script:
<script>
$("#yes_delete").click(function(){
var auditID = this.id;
//alert("delete test");
$.post("edit_audits.php?action=delete&auditID="+auditID,{
function(data){
alert("Audit Deleted");
$('question_alert').modal('hide');
window.location.reload();
}
});
});
</script>
Something like this?
Put your PHP value into the a tag like this:
<a href="#" data-mylink="<?php echo $yourPHPVar; ?>" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
jsFiddle Demo
$('#question_alert').on('shown.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var linked = btn.data('mylink');
$('#audNo').text(linked);
// Or:
// var modal = $(this);
// modal.find('.modal-body h3 span#audNo').text(linked);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" id="bob" data-mylink="Fred" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> Audit number <span id="audNo"></span>? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
I would do something like this
<a href="javascript:void(0)" class='btn btn-danger btn-xs btn-remove' data-id="<?=$row["auditID"]?>" role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" >Remove</span></a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
And This in The jQuery function. Make sure you put your jQuery script tag at the top of the page for jQuery to load before this function
<script>
var removeId = null;
$(document).ready(function(){
$(".btn-remove").click(function(){
removeId = $(this).attr("data-id");
});
$("#yes_delete").click(function(){
$.ajax({
url: "edit_audits.php",
type: "POST",
data: "action=delete&auditID="+removeId,
success: function(){
$('#question_alert').modal('hide');
window.location.reload();
}
});
}
});
Keep in mind, I have not ran this as I don't have all the data needed. You may have to debug this a little as it was blind coding.