When a user opens this modal, they can see their shopping cart information and delete items(other jquery) on the modal.
But how could I refresh the parent page after a user closes up the modal?
I read several posts but did not find any useful information for my situation. I know I need to use something like window.location.reload(true); Where should I put that in the code?
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/cartDisplay/',
width: '550px',
});
});
});
Update
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/polls/cartDisplay/',
width: '550px',
});
});
$('#cart').on('hidden', function () {
window.location.reload(true);
})
});
Try this.
$("#cart").on('hide', function () {
window.location.reload();
});
I assume that you are using Twitter Bootstrap
Bootstrap 3
$('#cart').on('hidden.bs.modal', function () {
window.location.reload(true);
})
Bootstrap 2.3.2
$('#cart').on('hidden', function () {
window.location.reload(true);
})
As far as I can tell, jquery.loadmodal.js has bootstrap.js as a dependency, so its modals are still subject to bootstrap's methods.
In that case, you can simply bind to hidden.bs.modal
...
$('#yourModal').on('hidden.bs.modal', function () {
location.reload();
});
...
Where you open the nyroModal window, just add this callback function:
callbacks: {
afterClose: function() {
window.location.reload();
}
}
Related
This is my code for using modal popup only once in per session,My problem is, everytime I visit the homepage, the div will show up. Instead I would like to show the div only once per session. I've tried to fix it with cookies but it didn't work.
<script>
if (!Cookies.get('popup')) {
setTimeout(function() {
$('#myModal').modal();
}, 600);
}
$('#myModal').on('shown.bs.modal', function () {
// bootstrap modal callback function
// set cookie
Cookies.set('popup', 'valid', { expires: 3, path: "/" }); // need to set the path to fix a FF bug
})
</script>
Set a cookie.
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.yourDivClass').hide();
else {
$("#close-welcome").click(function() {
$(".yourDivClass").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
You need to include jQuery.cookie javascript file.
Download jQuery.cookie
Hope this helps :)
I am using toggle functionality and it seems that the toggle button is self closing without a reason. It appears and it closes straight after. The code I am using is very simple:
(function($) {
$(document).on("tap", ".Hide-1", function () {
$(".div-1").hide("slow");
});
$(document).on("tap", ".Reply-open-button-1", function () {
$("div.Reply-div-1").toggle("slow");
$("div.Alert-div-1").hide("slow");
$("div.Close-div-1").hide("slow");
});
$(document).on("tap", ".Alert-open-button-1", function () {
$("div.Alert-div-1").toggle("slow");
$("div.Reply-div-1").hide("slow");
$("div.Close-div-1").hide("slow");
});
$(document).on("tap", ".Close-open-button-1", function () {
$("div.Close-div-1").toggle("slow");
$("div.Reply-div-1").hide("slow");
$("div.Alert-div-1").hide("slow");
});
})(jQuery);
I am also using 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
Can you see any potential reason why would it self close when I tap on any of them?
Thanks in advance N!
I have two questions about this code. The first is why the modal is not shown before the alert? The second is how can i delay the modal, because the popup is so fast that i can't see nothing in the modal.
$('#myModal').modal('hide');
$(document).ajaxStart(function() {
$('#myModal').modal('show');
}).ajaxStop(function() {
$('#myModal').modal('hide');
//$('#myModal').delay(5000).modal('hide'); does not work
});
$(".generate_report").click(function(event) {
event.preventDefault();
$.post("xls.php", $(".form_report").serialize(), function() {
}).done(function(data) {
alert("should be executed only after modal");
});
});
demo
You can achieve the same with this code:
$(".generate_report").click(function (event) {
event.preventDefault();
$('#myModal').modal('show');
setTimeout(function(){
$.post("xls.php", $(".form_report").serialize(),function(data){
$('#myModal').modal('hide');
alert("after modal");
})
}, 2000);
});
And remove this code
$(document).ajaxStart(function() {
$('#myModal').modal('show');
}).ajaxStop(function() {
$('#myModal').modal('hide');
//$('#myModal').delay(5000).modal('hide'); does not work
});
What this code does is show a modal when the ajax call starts and instantly hide it when its done. You can use a timer to wait a while before closing it.
Also you've nested a callback function in your jQuery.post, but you don't use it which causes confusing code here. Theres no need to use .done() when you're just going to append it to the AJAX function directly. You can just use the callback function here.
$.post("xls.php", $(".form_report").serialize(), function(data) {
alert("should be executed only after modal");
});
But that is just a code styling concern. The done(), success(), fail() methods are used on a jQuery.Deferred promise object, which $.ajax happens to return. And since $.post/$.get are just pointers to $.ajax, they will too.
Secondly, if you want the modal to wait before it closes, you can do this:
var waitTimer;
var timeToWait = 2000; // Time to wait here
var $myModal = $('#myModal');
$myModal.modal('hide');
$(document).ajaxStart(function() {
$myModal.modal('show');
}).ajaxStop(function() {
if (waitTimer) {
clearTimeout(waitTimer);
}
waitTimer = setTimeout(function() {
$myModal.modal('hide');
}, msToWait);
});
The .delay() method you tried to use only works after you've animated something.
Also a quick tip: Cache your jQuery selectors. You're telling jQuery to jump in the DOM 3 times to search for the same element.
I call content for modal dialog from ajax
$.ajax({
url: "/Clerk/PauseServiceDialog",
success: function (data) {
$("body").append(data);
$("#pauseServiceDialog").modal({ keyboard: false });
}
});
When I close modal I use this code
$(document).on('hidden.bs.modal', ".modal", function (e) {
this.remove();
});
In firebug I see html code is deleted. But if I again call dialog and use some event I get 2 event. How I understand modal dialog do not correct deleted from DOM.
I found answer how fix duplicate event.
$(document).on('hidden.bs.modal', ".modal", function (e) {
var name = "#" + $(this).find("button.btn-primary").attr("id");
$("body").off("click", name);
$(this).remove();
});
You can hide modal by code
$("#pauseServiceDialog").data('bs.modal').hide()
P.S. sorry, i didn't understand notation $(document).on('hidden.bs.modal' in general - you should delete modal element AND object which handle its events ( it stored at $("#pauseServiceDialog").data('bs.modal') )
I'm trying to impliment a confirmation box, but I need to edit the text with html. So I found the jquery "confirm override" here:
http://www.ericmmartin.com/projects/simplemodal-demos/
He mentions here about styling the string with html:
http://www.ericmmartin.com/projects/simplemodal/
But I don't inderstand where in my function I am supposed to do that? Here is the function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
Thank you for any help!
Basically instead of confirm("Continue to the SimpleModal Project page?", function () I need to have an unordered list in ther (terms of service)
Have you tried passing HTML as the first argument?
Your code should work fine like this
confirm('<ul><li>somedata</li><li>moredata</li></ul>', function(){});
because your confirm function appends the message variable.