this is my very first question here. I want to prevent reloading a page from browser reload button only when a modal is open. otherwise it can be reloaded. I should show an alert saying that the modal should be closed before reloading or something like that.
HTML:
<div id="newwr" class="modal newwr">
<div class="modal-content">
<h4>Create a WR</h4>
<p>...</p>
</div>
</div>
JAVASCRIPT:
<script>
window.onbeforeunload = function() {
if (modal.isOpen()) {
alert("Modal should be closed before reloading the page");
}
}
</script>
You could use onbeforeunload to provide that kind of response.
window.onbeforeunload = function() {
if (modal.isOpen()) {
return "Modal should be closed before reloading or something...";
}
}
You'll need to determine whether the modal is open or not somehow. You could keep track of the state internally (as I've tried to show with pseudocode here), or by checking the DOM to see if your modal is present and/or visible.
As stated in the comments, we can provide more specific help once we know more about your code, but hopefully this will point you in the right direction.
Related
I have an input element (Dropzone) that's hidden, and is written in the original html's body (was not appended).
<div style="display: none;">
<form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone"></form>
</div>
Now inside my .js script, I'm trying:
$(function() {
$('#uploadProfileDropzone').click()
})
And nothing happens. However, if I'm calling $('#uploadProfileDropzone').click() inside Chrome's console, it works.
What could possibly be the problem?
EDIT:
Problem might be that I'm trying to call the function before my Dropzone has initialized. Is there a way to know when this happens?
However, even when trying:
$(function() {
setTimeout(function() {
$('#uploadProfileDropzone').click()
}, 5000)
})
Which is a lot after the page fully loads, still nothing happens
SOLUTION:
It turns out that some (or even most of the) browsers block such activity. It's pretty obvious why, looking back at it now. My intention was to navigate to a page that once ready, opens a file dialog for a profile upload action. It seems logically correct to block such action from a user experience point of view, as it can lead to spam and undesired activity from websites. I solved it by displaying a simple popup box on load, that forces the user to press a button, that in turn calls $('#uploadProfileDropzone').click() and it worked.
You possibly have two options:
1) Programatically create your dropzone
Dropzone.autoDiscover = false;
let csvDropzone = new Dropzone("#uploadProfileDropzone", {
paramName: "file",
init: function() {
$('#uploadProfileDropzone').click();
}
});
<div style="display: none;">
<form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone">
</form>
</div>
2) You can try using init configuration method directly without initialising the dropzone in your JS code:
// Taken from the dropzone config page
Dropzone.options.uploadProfileDropzone = {
init: function() {
$('#uploadProfileDropzone').click();
}
};
It turns out that some (or even most of the) browsers block such activity. It's pretty obvious why, looking back at it now. My intention was to navigate to a page that once ready, opens a file dialog for a profile upload action. It seems logically correct to block such action from a user experience point of view, as it can lead to spam and undesired activity from websites. I solved it by displaying a simple popup box on load, that forces the user to press a button, that in turn calls $('#uploadProfileDropzone').click() and it worked.
you should use document ready event (code works once elements are initialized)
$(document).ready(function(){
$('#uploadProfileDropzone').click(function(){
// Do something here
});
});
OR
$('#uploadProfileDropzone').on('click',function(){ write your code here });
I have a simple bootstrap modal:
<div class="modal" id="myModal">
...
<span data-action>Click me!</span>
...
</div>
And the following code:
$("#someButtonThatOpensModal").click(function() {
$("#myModal").modal("show");
});
$("[data-action]").click(function() {
window.open("http://some resource");
$("#myModal").modal("hide");
});
The problem is that after clicking button inside modal, that modal dodesn't appear again until tab opened from code via window.open is closed. That happens only in Chrome. Moreover, I am not able to refresh page until child-tab is closed.
What can I do? I want to "fire and forget" new tab - why it has influence of JS code?
EDIT:
It seems that printing breaks original tab. Newly opened tab calls window.print() on load, and original tab is broken until you close or cancel printing. On ther borwser, you cannot switch tab until you cancel or confirm printing. How can I can solve it in chrome?
This question already has answers here:
How to automatically close the bootstrap modal dialog after a minute
(6 answers)
Closed 8 years ago.
I'm struggling to automatically close Bootstrap modals after a set time period.
Here's the js code I'm using to close the modal in 4 seconds:
setTimeout(function() { $('#myModal').modal('hide'); }, 4000);
Two basic problems:
(A) When the html page (that contains the modals) loads, the modal Timeout seems to run before the modal is even displayed. The modal is set to display after clicking on a link in the page. If the link is not clicked immediately when the page loads, the modal will only appear briefly and then close immediately because essentially the Timeout period started when the html page loaded, not when the modal was displayed.
(B) If the user clicks on the link to launch the modal a second time (or 3rd time, 4th time, etc.), the modal displays properly but does NOT close after the time period. It just stays open until the user manually closes it.
So...the two questions are:
(1) How do I get the modal Timeout period to wait until the modal is displayed before running the clock.
(2) How do I get the modal to display a second and third time with the proper Timeout function still working?
(The answer(s) proposed at this link below looked promising, but aren't working for me. Maybe they don't work on Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute )
This code below looked very promising, but didn't work even after changing 'shown' to 'shown.bs.modal'. Or maybe I'm placing this code in the wrong place?
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
Many thanks for any suggestions!
I'm not pretty sure about your html so I did a complete example:
html:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>
<div id="myModal" class="modal fade">
<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>Header</h4>
</div>
<div class="modal-body">
Modal Content
</div>
</div>
</div>
</div>
js:
$(function(){
$('#myModal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
The main difference with your code:
I set a time for timeout (3000)
I set myModal variable inside
callback
I guess it depends on how you display your modal. But you could set the timeout in the event listener?
Here is a JSFiddle to demonstrate how you can achieve it. Basically you add the timeout in the function that will be executed when the event happens.
// Select the element you want to click and add a click event
$("#your-link").click(function(){
// This function will be executed when you click the element
// show the element you want to show
$("#the-modal").show();
// Set a timeout to hide the element again
setTimeout(function(){
$("#the-modal").hide();
}, 3000);
});
If the event you listen for is a click on a link you could have to prevent the default action too by using event.preventDefault(). You can find more info on that here
I hope this helps.
I'm using Bootstrap 2.3.2, and I'm using modal dialogs like this:
<div id="notice1" class="modal hide fade">
<div class="modal-body">
<h4>This is a dialog for user...</h4>
</div>
...
</div>
and
var notice1 = $("#notice1");
notice1.modal({
keyboard: false,
backdrop: "static",
show: false
});
// Show the dialog
notice1.modal("show");
// Close the dialog
notice1.modal("hide");
Most of the the time, the above works fine and the modal dialog are opened and closed programmatically. However, in some rare cases, calling .modal("hide") does not close the dialog at all though the dark backdrop is removed.
This is a huge potential issue because the dialog may get stuck on the screen and block part of the content.
Is there a reliable way to ensure the dialog is always closed after calling .modal("hide")? Or better yet, how do we ensure a consistent hide behavior from Bootstrap? I don't want to remove the dialog completely from the DOM, because the same dialog may be re-used on the page.
You can hide the modal by using the following code.
$("#notice1").hide();
$(".modal-backdrop").hide();
According to documentation: http://getbootstrap.com/2.3.2/javascript.html#modals
You can catch the hidden event and force the display:none property.
notice1.on('hidden', function () {
$(this).css("display", "none")
})
I am using 1.9.x, below code working..
$("#yourModalWindow").modal('hide');
On a given webpage I have a link that opens a modal window using Thickbox. In that window I have a form which I use to save some data. After I submit the form, I close the modal window. Now my question is: can I refresh the main page after closing the modal window?
Thank you.
Call this after the form is submitted and before the window is closed:
window.opener.location.reload();
Suppose this is the div you show in modal mode. You have to call tb_remove() to close the modal window. So just use location.reload(); before that call.
<div id="modalContent" style="display:none">
<form>
...
</form>
<p style="text-align:center">
<input type="submit" id="Login"value="Click to close"
onclick="window.opener.location.reload();tb_remove()" />
</p>
</div>
Actually Thickbox is no longer being maintained, so it might be better to use a different modal window. That being said, I know Facebox allows you to bind box open and close events like this:
$(document).bind('close.facebox', function() {
// do something here
})
If using facebox simply add window.location.reload(); around line 148, so you end up with something like...
close: function() {
$(document).trigger('close.facebox');
window.location.reload();
return false
}
If still using Thickbox I'm sure it's just as easy. Do a search for "close" and add the code.
You can do this easily with the tinybox plugin:
http://sandbox.scriptiny.com/tinybox2/
var parentWindow = window;
$('#submit-deed-button').click(function() {
TINY.box.show({iframe:'submit_deed.html', closejs:function(){parentWindow.location.reload()}, post:'id=16',width:385,height:470,opacity:20,topsplit:3, boxid:'tinybox_container'})
});
The key is to pass in the parent window to the function as a JS var then you call location.reload() on that object