if the page is loaded with GET parameter status=deleteSuccess (ex. localhost/index.php?status=deleteSuccess) php will insert script containing javascript DOM click() to a hidden button to open a modal. but it does not work.
I'm using bootstrap 4.3.1, I'm new at and set it up using https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
I've checked the javascript on console, it worked. I've checked the html generated by PHP, it successfully inserted the script. I've added console.log("test") on the script, it can run.
<button type="button" id="deleteSuccessBtn" style="display: none;" data-toggle="modal" data-target="#deleteSuccess"></button>
<div class="modal fade" id="deleteSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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>
</div>
<div class="modal-body" align="center">
<i class="fa fa-check-circle-o" style="font-size:48px;color:green"></i>
<h5>Data Telah Dihapus</h5>
</div>
</div>
</div>
</div>
<?php
if (isset($_GET['status'])) {
?>
<script type="text/javascript">
document.getElementById("deleteSuccessBtn").click();
</script>
<?php
}
?>
I expect to see a modal on page loaded, but it doesn't open
You can manually show or toggle the modal:
<?php
if (isset($_GET['status'])) {
?>
<script>
// assuming jQuery is available
$('#deleteSuccess').modal('show'); // or 'toggle'
</script>
<?php
}
?>
text/javascript is also the default type for script tags, so you don't need to add that.
See: https://getbootstrap.com/docs/4.0/components/modal/#methods for more information on the Modal events.
Related
This question already has answers here:
How to open a Bootstrap modal window using jQuery?
(15 answers)
jquery click on link?
(3 answers)
Closed 3 years ago.
<div class="modal fade" id="logoutModal" 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">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Username or Password is incorrect.</div>
<div class="modal-footer">
<a class="btn btn-primary" href="login.html">Ok</a>
</div>
</div>
</div>
</div>
so i have this tag that is currently a button. When i click on this button it runs a display message.
How can i make this tag to automatically run when the page opens or reloads.
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>;
The click() method execute a click on an element as if the user manually clicked on it.
Add id on your code:
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal" id="example">Logout</a>
And use js:
document.getElementById('example').click();
You can use trigger after the page is loaded
$( document ).ready(function() {
$(".dropdown-item").trigger( "click" );
});
Based on your comment above...
I am trying to do a form where if the user enters wrong credentials
the modal will pop up.
...maybe this will help. If not, then you need to clarify what you're trying to do in your question.
In the snippet below, I have a login form. When the wrong credentials are entered, the modal appears.
$("#login").click(function () {
// Here you would do your check for correct credentials
// Obviously you wouldn't want to do this in JS in production
// I'm assuming there would be an AJAX request here that would validate the user's credentials
// If valid, proceed. If not, call the modal.
if ($(username).val() !== "blah" || $(password).val() !== "blah") {
// Username or password incorrect, show modal
$("#modal").modal();
} else {
alert("Login successful!");
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
Username: <input id="username" type="text" />
Password: <input id="password" type="password" />
<button type="button" id="login" class="btn btn-info">Login</button>
<div class="modal fade" id="modal" 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">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Username or Password is incorrect.</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Try again</a>
</div>
</div>
</div>
</div>
Basically, anytime you want the modal to appear automatically (i.e., without clicking on anything), just call it like this:
$("#idOfModal").modal();
If you want to programmatically hide or dismiss the modal, you can do that by passing hide to the modal function:
$("#idOfModal').modal("hide");
you can use $("#logoutModal").modal('show')
on $(document).ready(() => ...)
$(document).ready(function() {
$("#myModal").modal('show');
});
<!-- begin snippet: js hide: false console: true babel: false -->
$(document).ready(function() {
$("#logOut").modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="logOut" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure you want to Logout?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<button type="submit" class="btn btn-danger float-right">Yes</button>
</form>
</div>
</div>
</div>
</div>
Any idea how I can prevent page from scrolling back to top of page when modal window is closed? I need it to stay in the same positing as page full of text and you end up losing where you were. I had this working but for some strange reason no longer works.
Thanks.
Page calls a PHP request that goes through a while loop and displays sentences that when clicked shows additional info. This is displayed in the modal window.
while ($row = $result->fetch_assoc())
{ ?>
<a href="#" class="nojump" id="mymodal" onclick="showModal(this)"
style="font-size:16px;" title="<? echo $row ['title'] ?>
by
<? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a>
<script>
function showModal(el) {
jQuery("#myModalLabel").text(el.title);
jQuery("#myModal").modal()
}
</script>
<script>
jQuery('a.nojump').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
</script>
<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>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Updated:
I update the JSBin here is this what you want?
HTML:
click me
Javascript:
jQuery('a.nojump').click(function(e) {
e.preventDefault();
console.log('do something here')
});
I'm new in MVC & .NET and just out of curiosity, is it possible to call a HTML file as a pop up view ? If yes how would I do it ?
Currently I have a code for pop up window inside my Index.cshtml. I want to move the part of the code that is part of the pop up window into separate file or HTML and call it based on conditions by using javascript.
Here's my code for the pop up window:
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Add To Homepage Prompt</h4>
<button type="submit" class="btn btn-primary button button4">Okay</button>
</div>
</div>
</div>
#section scripts{
<script type="text/javascript">
$("#loginModal").modal('show');
</script>
}
I have here the sample project that will get the value of the id of an attribute using ajax and then should show the modal using ajax.
The program that I've got is functioning well in terms of getting the id but my problem is the modal is not showing.
What I tested to know the problem is that I deleted the class="modal hide" in the modal and so the modal appeared below of the table and not in front of the whole page.
It just looked like another division under the table.
So now my problem is that the modal doesn't pop up. When the is clicked nothing happens if there is an attribute class="modal hide" of the modal, but if there is no attribute like that it is working there is a modal but it is not a pop up.
It is like another division under the table.
What's wrong with my code?
<a type="button" data-toggle="modal" id="11" class="push">Read more</a>
<script>
$(document).ready(function () {
$('.push').click(function () {
var res_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: '../php-files/resolve.php', // in here you should put your query
data: 'post_id=' + res_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function (r) {
// now you can show output in your modal
$('#mymodal').modal('show'); // put your modal id
$('.modal-body').show().html(r);
}
});
});
});
</script>
<!-- Modal -->
<div id="myModal" class="modal hide fade in" 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In success function add this code
$('#id1').modal('show'); // you
$('#body').html(r);
Your model should be as below
<div class="modal" id="id1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<div id="body" class="modal-body text-center">
<!-- loading modal.. -->
</div>
..
</div>
Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.
HTML:
<div id="printArea">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 1000px;" >
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<button type="button" id="printer" class="btn btn-info">Print</button>
<h4 class="modal-title">Repayment Schedule</h4>
</div>
<div class="modal-body" id ="schedule-table">
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(document).on('click', '#printer', function (event) {
event.preventDefault();
var $print = $("#printArea");
$(document.body).wrapInner('<div style="display: none"></div>');
var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
window.print();
$div.remove();
$(document.body).children().contents().unwrap();
});
});
I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.
Any help really appreciate.