I want to show a modal when username is wrong, I have the php code, not full but there is the error :
header("location:admin.php");
exit();
} else
header("location:admin_login.php?error=1");
};
if (isset($_GET['error'])==1){echo "<script type=\"text/javascript\">$('#myModal').modal('show');</script>";
exit();}
?>
And the javascript doesn't work.
Modal code:
<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>
I have included but still not working, do you have any idea why?
Make sure the script DOM ready and remove exit(); from PHP, even if the script will be DOM ready, exit(); will not let the modal show and even after these changes if the modal still not show, make sure check the jQuery library, you may be running modal show script somewhere in middle of page but jQuery library may be in footer so check your console log for error. Remember jQuery library always comes first.
<?php if (isset($_GET['error'])==1){ ?>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal("show");
});
</script>
<?php } ?>
See in Action
I think that your JavaScript is probably being run before the document is ready. Try changing your php code to include:
if (isset($_GET['error'])==1){echo "<script type=\"text/javascript\">$(function() {$('#myModal').modal('show');});</script>";
This just puts the code you wrote inside a document ready handler.
Try to use this :
<script>
$(document).ready(function() {
$('#myModal').modal('show');
});
</script>
Related
I'm trying to get a Bootstrap 4 Modal to pop up on an Order Received page after a 2-second delay on WordPress. I'm new to theme customization. This is what I have, but I can't get the HTML to print on the page.
I want to hook into: do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> on thankyou.php. I also want the modal to popup on page load. The JS I found for that would be:
<script type="text/javascript">
$(window).on('load',function(){
$('#exampleModal').modal('show');
});
</script>
In the Thankyou page body class, it shows page-id-8 as the page ID.
In my functions.php file, I have the following:
Questions:
For some reason, the HTML is not printing on the page. Any ideas on what else I can do?
What would be the next steps for adding a <script></script> tag on the same page to add a setTimeout function to delay it?
Code:
function create_modal() {
if(is_single('8')) {
echo '
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">A NOTE ON SHIPPING</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Thank you so much for your order! As we\'re sure you\'re aware, we are a little backed up due to COVID-19.</p>
<p>While we work hard to get your order out in a timely manner, we sincerely appreciate your understanding and patience.</p>
<p>When your order ships, you\'ll receive an email with tracking information attached. Please keep an eye out for your package. Also note that FedEx and USPS are also backed up due to COVID-19, and delivery times may also be delayed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">CLOSE</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>';
}
}
add_action('woocommerce_thankyou_', 'create_modal', 10);
I have five different modal forms with their js that are shown when their corresponding button is being clicked, which is messy to put all modals and other content in one blade file.
I want to have only one blank modal on the page which will be filled by content related to its button clicked. Is there any way I can put my five different modals form content in five different blade files and when its button is clicked on the main page I get the content from the related modal blade file and fill it in the blank modal and load its js?
Yes you can.
In your controller imagine you have a method named create and you want to put its response into the modal body.
<?php
namespace App\Http\Controllers;
class SomeController extends Controller{
public funtion create(){
$someVariable;
$view=\View::make::('directory.your_blade_file',compact('someVariable'));
return ['html'=>$view->render()];
}
}
And now in your client side code you can act like this.
Notice: I assume you use jQuery ajax to get data from server and bootstrap modal to show content
<div class="modal" id="single-modal-in-the-page" tabindex="-1" role="dialog">
<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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
<script>
$(function(){
$('#some-button').on('click',function(){
var modal=$('#single-modal-in-the-page');
$.ajax({
type:"GET",
url:'http://url/some/create',
data:{/*any query string paramteres can be set here*/},
success:function(response){
modal.find('.modal-body').html(response.html);
modal.modal('show');
},
error:function(error){
// Or handle the errors in your own way
console.log(error);
}
});
});
});
</script>
I am having quite a hard time in solving this problem. Seemed so simple but it is not for me.
PAGE1: HTML
<!-- where to land the external page, but not necessary -->
<div id='feito'></div>
//Javascript calling the page:
$(document).ready(function(){
$.get("page_with_modal.html", function(data) {
$("#feito").html(data);
});
});
//Javascript showing the Modal with ID doneModal:
$(document).on('ready', function(){
$('#doneModal').modal('show');
});
PAGE2: page called from JS (page_with_modal.html):
<html>
<head>
</head>
<body>
<div class="modal fade" id="doneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
... MODAL TEXT
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
PROBLEM:
From what I can understand, The page is called but the Modal is not appearing.
-I tried to put bootstrap.js at the bottom of PAGE1, JS code before or after the landing DIV. Nothing
-I tried to eliminate all HTML - Body, etc tags and rename it .php (with all the correct sintax). Nothing.
- PAGE2 can be called from PHP using require(). Working ok, no problem.
- I didnt explore the ajax call because the final result (this is an easy/standard mockup) it's already inside and Ajax call, I am trying to make things work from the root up.
What am I doing wrong? Can somebody help me?
Roberto
Simply you have to show the modal after loading and not in document ready event:
$(document).ready(function () {
loadAjax();
});
function loadAjax() {
$.get("page2.html", function (data) {
$("#feito").html(data);
// after loading open modal
$("#doneModal").modal('show');
});
}
Good day, I am currently trying to do something extremely simple, to let a modal window appear on a click of a button in Meteor.
So I created a JS file on the lib folder called Sessions where I wrote this code
if (Meteor.isClient){
Session.setDefault('showAhorroGen',false);}
Which first allows me to set the Session as false as a default and when I click it , it will become true and show the dialog.
So then in my client folder I created an event to hear for when the button is clicked, and a helper to return the session.
Template.menu.events({
'click .ahorro': function(event,tmpl){
Session.set('showAhorroGen',true)
}
});
Template.products.helpers({
showAhorroGen : function(){
return Session.get('showAhorroGen');
}})
In my HTML I added the following code, to render the template with the modal if the session showAhorroGen is true.
<h3> Cálcula tu ahorro gratis <button type='button' class='btn btn-danger ahorro'>Aquí</button></h3>
</div>
{{#if showAhorroGen}}
{{> ahorroGen}}
{{/if}}
and finally the template, for testing reasons is only the bootstrap modal example
<template name='ahorroGen'>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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>
</template>
Why does the modal window does not appear?
The problem is that now you've written code that dynamically inserts the HTML code for the modal, but in Bootstrap, you need to activate the modal in order to show it, for example by executing the following JavaScript code: $("#myModal").modal().
EDIT
The easiest way to solve it is by adding the following piece of JavaScript code:
Template.ahorroGen.onRendered(function(){
$("#myModal").modal()
})
Looks like you're targeting the wrong template with your event, and helper definition.
You're currently targeting the "menu" template in your event, and the "product" template for the helper. These should both be targeting the same template.
I'm using Bootstrap with a couple of components (removing them individually didn't fix the problem - but for the sake of completeness, here's a list).
I'd like to load remote content (test.html) into a Modal. It all works fine on a standalone html page, but when I insert the exact same code into my project's layout, nodemon gives me a "GET test.html 404". The Modal still opens, but the remote page isn't loaded (apparently it can't find it, and I don't understand why) and the "yada yada" appears in the modal-body instead.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/javascripts/bootstrap-tagsinput.js"></script>
<script src="/javascripts/typeahead.bundle.js"></script>
<script src="/javascripts/pinboot.js"></script>
<script src="/javascripts/bootstrap-dialog.js"></script>
<script>
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
Launch Modal
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">yada yada</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>
I'm secretly hoping this is a common problem with a simple solution and I'm just not feeding Google the right questions/keywords :(
So in that case I thank you for your patience :)
Rookie mistake ... it was the routing. Everything not defined in app.js was directed to a script that couldn't handle it, sort of.
app.get( '/', routes.index );
Renaming test.html in test.ejs and adding this to app.js...
app.get('/test', function (req, res) {
res.render('test');
});
...and changing the button to link to /test
Launch Modal
...made it work. Hooray!
I'm gonna leave that here for the next n00b ;)