How to refresh parent page after modal dialog is closed? - javascript

I have an ASP.NET page that contains an tag which opens a modal dialog. This modal dialog contains a control that contains a button which saves some data and closes the modal dialog. How to refresh the parent page that button is clicked?

You can run this javascript line from the modal:
window.top.location.reload();
or
parent.location.reload();
If you do not have access to the modal, you can set a handler for the close as
ModalObject.onbeforeunload = function () {
window.top.location.reload();
};
where ModalObject is the handler that you have when you creates it.

Related

Javascript inside a modal duplicated everytime I open the modal

I have a bootstrap modal with a form and javascript inside.
My modal content (called by ajax) :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="action">Submit</button>
<script>
$('.action').on('click', function(){
alert('ok');
});
</script>
Everytime I click on my button, I have a lot of alert displayed (not only one), the javascript inside the modal is not reset/killed when I open and close the modal again and again.
It seems you set the <script> tag inside the modal using an AJAX request. So everytime you call the AJAX request a new <script> tag gets executed and a new event is bound to the button. That's why you have multiple alerts showing.
To solve that, just isolate the JS from the modal or just set it once and not set it from the AJAX call. Just make it a static <script> tag.
Otherwise destroy the existing event handlers before you bind a new click event. Because events are still bound to the element even if you delete the <script> tag.
I have solved my problem, I listen the click event not directly on the submit button (button inside the ajax return), but on the modal wrapper and I place my JS outside the modal :
$('#modal-wrapper').on('click', '#my-submit-btn', function () { ...
Now, the JS work and is not duplicated.

Bootbox: how to avoid recursive calls?

I have the following code:
$('boddy').click(function(e) {
bootbox.alert("clicked!");
});
When a page is clicked, I see a popup window with "clicked" displayed. However, if I click the OK button to close it, the popup shows up again and never ends.
Interestingly, I tried the following code:
$('boddy').click(function(e) {
alert("clicked!");
});
After I click the OK button in the popup, it never shows up again.
Thanks!
Bootstrap modals (and therefore Bootbox modals) are simply <div> elements with higher z-indexes than the rest of the page content. They're still contained with the body of the page, so when you click on any element in the modal, it propagates through every parent element of the modal. Since the body tag is the top-level parent, clicking a button in the modal ultimately also clicks the body element.

Bootstrap modal dialog button click event triggering on modal open

I am working on an application and need to open a modal, have the user fill in some details and save them once they click the modal button i have designated. I have used jQuery on to bind a click event for the button. problem is the click event is triggered when the modal opens.
Relevant parts of modal:
<div class="modal-footer">
Close
Save Event
Where i bind the event:
$('#save-event').on(
'click',
function(evt)
{
console.log('triggered');
}
);
The console shows 'triggered' when i open the dialog. I open the dialog through:
{% trans "Event also occurs on" %}
Its a Django app so the curly braces. Any ideas what i could be doing wrong or is there another way to execute some logic once the user clicks the relevant button?
You might be having 2 elements with the same id in the html and you are getting the event triggered when you are clicking on the other element.
Try adding the following to your jQuery code:
evt.stopPropagation();
Sorry, should clarify, add this to the code triggering the modal opening.
Edit: since you don't have direct access to the modal code, try the following in your jQuery:
$('#add-event-modal').on('click', function(evt) {
evt.stopPropagation();
});

Foundation - Opening a modal upon closing another modal

I have a web page that opens a reveal modal on load, and in this modal, I have a link that can open a 2nd modal. When the 2nd modal closes (either by clicking the close button, or by clicking outside the modal), I would like to reopen the first.
For the close button, I can do it via adding a data-reveal-id to the link that has the close-reveal-modal class. But when I try to bind to the close property, the 1st modal opens, but then the background changes back to normal, and the 1st modal can no longer be closed by clicking outside the modal. Then, on closing the 1st modal with the close button, the whole screen darkens as though a modal was opening. Am I doing something wrong, or is this a bug?
My code is as follows:
$(function(){
$("#modal2").foundation("reveal", {
close: function() {
$("#modal1").foundation("reveal", "open");
}
});
$(document).foundation();
});
OK, so after some experimentation, I found out that in order to do what I wanted to I had to bind the function, not set it in the initialisation phase. Thus:
$("#modal2").bind("closed", function() {
$("#modal1").foundation("reveal", "open");
});
And I set this script after the declaration of the 2 modals.

How to show confirm message on close of child window in javascript?

I have a parent window and when I click a link from parent window, the link opens in a new window. I need to show confirm message on close of child window.(i.e. the opened link )
childWindow = window.open("http://www.google.com","width=400, height=400");
I like confirm close for child window. like
childWindow.close(function(){var confirmClose=confirm("Are you sure to close ?");
});
If the user clicks "OK" of the confirm box then the child window will be closed, else if the user click "Cancel" then the child window will not be closed
Use onbeforeunload event: https://developer.mozilla.org/en/DOM/window.onbeforeunload
To set up a confirm dialogue, add a listener to the beforeunload event of the (child)window as demonstrated in Confirm message on browser page close and prevent the action eventually.
If you call childWindow.close(), the window will get closed instead of hooking a callback function.

Categories

Resources