I want to submit form in JQuery but
<input type="submit" id="yesBank" />
$('#yesBank , #worldBank').on("click", function (e) {
e.preventDefault();
$.blockUI({
message: 'Getting List'
});
//Want to unbind this click JS
//Want to click on submit button from here $(#yesBank).click("");
//Unbinding is done so that it does not execute this
//I am bound to click this button as server is handling a condition on click of it. but i have to display block ui too
});
My purpose is to block UI. actually when i block UI like this then control does not go to server and page does not reload. Even if i remove preventDefault. Can someone show me the snippet?
You can use chaining
$('#yesBank , #worldBank').on("click", function (e) {
// rest code goes here
}.off("click")
Try something like this -
$('#yesBank , #worldBank').on("click", function (e) {
e.preventDefault();
$.blockUI({
message: 'Getting List'
});
$(this).off('click');
});
Related
I have this little piece of code:
<script>
$(window).bind('beforeunload', function() {
$.ajax({
async: false,
type: 'POST',
url: '/something'
});
});
</script>
I wonder, how could I disable this request when user hits the submit button.
Basically something like here, on SO. When your asking a question and decide to close the page, you get a warning window, but that doesn't happen when you're submitting the form.
Call unbind using the beforeunload event handler:
$('form#someForm').submit(function() {
$(window).unbind('beforeunload');
});
To prevent the form from being submitted, add the following line:
return false;
Use
$('form').submit(function () {
window.onbeforeunload = null;
});
Make sure you have this before you main submit function! (if any)
This is what we use:
On the document ready we call the beforeunload function.
$(document).ready(function(){
$(window).bind("beforeunload", function(){ return(false); });
});
Before any submit or location.reload we unbind the variable.
$(window).unbind('beforeunload');
formXXX.submit();
$(window).unbind("beforeunload");
location.reload(true);
Looking for Detect onbeforeunload for ASP.NET web application well I was,
I've to show warning message if some input control changes on the page using ASP.NET with Master Page and Content Pages. I'm using 3 content placeholders on the master page and the last one is after the form
<form runat="server" id="myForm">
so after the form closing tag and before the body closing tag used this script
<script>
var warnMessage = "Save your unsaved changes before leaving this page!";
$("input").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$("select").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$(function () {
$('button[type=submit]').click(function (e) {
window.onbeforeunload = null;
});
});
</script>
beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively
so I got it working like this bind and unbind didn't work out for me also With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
if you're using bind then use this:
$('form').submit(function () {
$(window).unbind('beforeunload');
});
This will be good for all form submit.
Super old question but might be useful to others.
Simply detaching the "beforeunload" from the "submit" event would not work for me - because the submit handler was being called even when there were errors in the form that the user had to fix. So if a user attempted to submit the form, then received the errors, then clicked to another page, they would be able to leave without the warning.
Here's my workaround that seems to work pretty well.
(function($) {
var attached = false,
allowed = false;
// catch any input field change events bubbling up from the form
$("form").on("change", function () {
// attach the listener once
if (!attached) {
$("body").on("click", function (e) {
// check that the click came from inside the form
// if it did - set flag to allow leaving the page
// otherwise - hit them with the warning
allowed = $(e.target).parents("form").length != 0;
});
window.addEventListener('beforeunload', function (event) {
// only allow if submit was called
if (!allowed) {
event.preventDefault();
event.returnValue = 'You have unsaved changes.';
}
});
}
attached = true;
});
}(jQuery));
This way, if the click to leave the page originated from inside the form (like the submit button) - it will not display the warning. If the click to leave the page originated from outside of the form, then it will warn the user.
Scenario:
I click on a button
Ajax call is made to the server
data is returned and modal is shown
Problem:
When user clicks on the close button or the "X" in the corner I catch this event by assigning a class to these two elements and assigning an event to this class.
Code:
$(document).on("click", ".dialogTankClose", function() {
//some code
})
My problem is that i can't figure out how to catch when the user clicks outside of the dialog or presses "escape".
$(document).on("click", "modalCloseEvent",function(){
// how to catch this?
})
How can I catch this?
The Bootstrap modal raises an event when it closes, which you can hook to: hidden.bs.modal. This event fires no matter how the modal is closed. Try this:
$('#bootstrapModal').on("hidden.bs.modal", function() {
$.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
$.automation.tanks.tableInit();
});
});
You can use a delegated event handler if the modal is dynamically added to the DOM:
$(document).on("hidden.bs.modal", '#bootstrapModal', function() {
$.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
$.automation.tanks.tableInit();
});
});
More information in the Bootstrap documentation
You can use 'hidden.bs.modal' modal method to run custom code while modal is getting unload / hide from document.
$('#your-modal-ID').on('hidden.bs.modal', function (e) {
console.log("Hey !! I am unloading... ");
});
I am using this below code for button click event using jQuery. When button is clicked the page reloads.
$('#button1').click(function () {
//Code goes here
return false;
});
If your "button" is a button element, make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
<button id="button1" type="button">Go</button>
If it's an input element, do so with jQuery with the following:
$('#button1').click(function(e){
e.preventDefault();
// Code goes here
});
Read more: event.preventDefault()
You can use event.preventDefault() to prevent the default event (click) from occurring.
$('#button1').click(function(e) {
// prevent click action
e.preventDefault();
// your code here
return false;
});
I have a short form, you can see it here http://jsfiddle.net/azxpckg5/1/
and I have a problem - the way to reproduce it is to click the save button. Then there will appear another button called submit. when user clicks it - it disappears and it's fine. But when user repeats this procedure (clicks save again and submit again - he can see that the last click was repeated twice. I believe the error might be somewhere here:
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').click(function() {
//
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
but to be honest I don't know how to fix it and what can be the issue. Can you help me with that?
The issue is because you're attaching another click event handler to the #submitcForm button on every submission of the form (which happens when #saveBtn is clicked. Move the click handler outside of the validate() call and your code will work as you require.
$('#invoiceForm').validate({
// settings...
});
$('#submitcForm').click(function () {
$(".overlay-boxify2").toggleClass("open");
});
Updated fiddle
Use .off() to prevent attaching multiple click eventListener on your button
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').off().click(function() { // see the use of .off()
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
See more about .off()
I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button.
Currently this is the click function on the file-selection button:
$(document).ready(function() {
$("#file-button").click(function() {
$('#file').trigger('click');
});
});
That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.
Something like this would be preferable:
$('#file-button').disable();
$('#file-button').enable();
I have tried the on() and off() and they do not seem to work either.
SOLUTION -- thanks to Eric
I changed my initial click function to the following:
$(document).ready(function() {
$("#file-button").click(function() {
if ( $('#file-button').attr('disabled') == "disabled" ) {
return false;
}
else {
$('#file').trigger('click');
}
});
});
And I set the following to disable the button
$('#file-button').attr('disabled','disabled');
And this to re-enable it:
$('#file-button').removeAttr('disabled');
Disable the button using jQuery $.prop() function:
$("input[type=submit]").prop('disabled', true);
Add a conditional to the click handler to check if the button is disabled:
$("#file-button").click(function() {
if (!$(this).is(':disabled')) {
$('#file').trigger('click');
}
});
Later on re-enable the button:
$("input[type=submit]").prop('disabled', false);
Or you might be able to use the submit event instead of click, if there is a form involved:
$("#whatever-your-form-is").on('submit', function() {
$('#file').trigger('click');
});
Try Attr jQuery function.
$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');
Tested Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#file-button").click(function(e)
{
e.preventDefault();
$(this).attr('disabled','disabled');
return false;
});
});
</script>
<input type="button" id="file-button" value="ClickMe" />
You have to refer input button in order to disable button ,
Something like below
$("input[type=submit]").prob('disabled', true);
$("inpur[type=submit]").prob('disabled', false);