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.
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 a twitter bootstrap modal that does not render the dialog box correctly and I'm not sure why.
HTML
<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModal2Label">New Label</h4>
</div>
<div class="modal-body">
<p>Something for now.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can see the html in action on this page: Superfood Picker Click on the "Compare" button on the front page.
Based on the html alone I don't see why it doesn't work.
Other relevant points:
1). I have two modals on the same page.
2). The other one works fine.
3). When I switch the ID of the dysfunctional modal to the ID of the modal that displays correctly that modal also displays correctly.
4). The latter point would suggest to me that maybe it's the HTML that calls the modal that's the problem, but when I compare the two I don't see why one would work and the other wouldn't.
Here's the HTML for the second (functional) modal:
HTML (called through a jquery function)
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
I thought that maybe the two were interfering with one another, but if that was the case I'm not sure why the second one would work fine.
As mentioned above, the DIV with an ID of "part2" is display:none. The modal is inside that DIV. You need to make that DIV display block for the modal to be visible.
I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.
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 ;)
I Have the modal set like this
<body>
<div class="modal fade" id="pageopen" 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">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you
Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".
Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo
Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap