I'm trying to stop the default action when a link is clicked. Then I ask for confirmation and if confirmed I want to continue the event. How do I do this? I can stop the event but can't start it. Here's what I have so far:
$(document).ready(function(){
$(".del").click(function(event) {
event.preventDefault();
if (confirm('Are you sure to delete this?')) {
if (event.isDefaultPrevented()) {
//let the event fire. how?
}
}
});
});
There's no need to prevent default to start. Just do this:
$(function() {
$(".del").click(function(evt) {
if (!confirm("Are you sure you want to delete this?")) {
evt.preventDefault();
}
});
});
It's easier and more logical to prevent the event once you need to rather than preventing it and then un-preventing it (if that's even possible).
Remember that the code will stop running when the confirm box is presented to the user until the user selects OK or Cancel.
By the way, take a look at JavaScript: event.preventDefault() vs return false. Depending on if you want to stop the event propagation or not you may want to either call stopPropagation() or return false:
$(function() {
$(".del").click(function(evt) {
if (!confirm("Are you sure you want to delete this?")) {
return false;
}
});
});
Much better to just return the confirm()
$(function() {
$(".del").click(function() {
return confirm("Are you sure you want to delete this?");
});
});
Related
I'm trying to implement a warning for the users in case they are leaving the form without saving.
The warning dialog works as expected but with the only exception that when the user chooses to 'Stay on Page', the selected side menu entry changed to the one the user clicked on (form is the same).
How can I make sure that the same menu item is still selected once the user chooses to 'Stay on Page'?
var warnMessage = "Unsaved changes. Do you really want to leave the page?";
$(document).ready(function () {
$('a.k-link').on('click', function () {
window.onbeforeunload = function () {
if (isDirty) return warnMessage;
}
});
});
You might find it easier (and possibly more consistent across browsers) to use a confirm prompt (remember, it's a blocking dialog).
<script>
var warnMessage = "Unsaved changes. Do you really want to leave the page?";
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
e.preventDefault();
}
});
</script>
There are at least two reasons to avoid onbeforeunload:
The spec doesn't require a browser to display the message you
provide, and not all browsers do, and
the correct event is actually beforeunload
You can and should handle this event through window.addEventListener() and the beforeunload event. More documentation is available there. (MDN)
I'm just guessing, since the Kendo UI scripts aren't exactly fun to read through, but the 'selected' class is getting applied because a navigation event was started, even though you cancel it; the Kendo script is probably just listening for a successful click. onbeforeunload and beforeunload both happen after the click event has resolved (AFAIK, anyway).
Following worked for me (adding e.stopPropagation):
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
e.preventDefault();
e.stopPropagation();
} });
or by returning false:
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
return false;
} });
I disable a jQuery click event with:
$("#button").click( function () { return false;}
How can I enable it? The intention is avoid double clicks and run multiple times the function that triggers.
I want to restore the event when other button was pushed.
There's a couple options, but I like the following best:
//disable
$("#button").bind('click', function() { return false; });
//enable
$("#button").unbind('click');
You could also bind click again on the button to some other callback function as well. Lastly, I might suggest calling preventDefault on the event from a click event, depending on what #button really is like so:
$("#button").bind('click', function(e) {
e.preventDefault();
return false;
});
As j08691 pointed out, as of jQuery 1.7 on, it should look like:
$("#button").on('click', function(e) {
e.preventDefault();
return false;
});
You could also use one:
$("#button").one('click', function () { /* code here */ });
The event will unbind itself after being called once.
If you do:
$("#button").unbind("click");
the button will be working again, the unbind function erases registered events handlers from the selected element, if you dont pass it an argument it will erase all events registered.
EDIT: as noted in the comments, you can use now the on and off methods:
$("#button").off("click")
to disable clicks and:
$("#button").on("click")
to enable them again
The following is my code snippet:
$(document).ready(function()
{
$('table#example td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
});
});
My grid-view is on the bottom of the page. Either I press Ok or Cancel Button, page moves to TOP.
I want to remain the same position. How to control this.
It actually doesn't have anything to do with the confirm; it's the fact you're clicking a link (I'm guessing the link has either href="" or href="#" in it). The browser is following the link, which is the default action for the click event of links.
You need to prevent the default action, which you can do by returning false from your function, or by accepting the event argument to your click function and calling event.preventDefault().
Returning false (which both prevents the default action and stops the click bubbling to ancestor elements):
$(document).ready(function()
{
$('table#example td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
return false;
});
});
Using preventDefault (which only prevents the default, and doesn't stop bubbling; ancestor elements will also see the click):
$(document).ready(function()
{
// Note argument -----------------------------v
$('table#example td a.delete').click(function(event)
{
event.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
});
});
If a user is on a page with a form, and they have edited something, and then try and navigate to another page, how can I notify them?
How do people do this?
Is it a matter of computing a hash of all the input fields and comparing if they are exiting the page?
Is there a on page unload event?
I like to only prompt the user if they've actually changed something. Something like this:
var changesMade = false;
function onDataChanged() {
changesMade = true;
}
$('input:text, textarea, select').change(onDataChanged);
$('input:checkbox, input:radio').click(onDataChanged);
$(window).bind('beforeunload', function() {
if (changesMade) {
return 'Changes have been made. Are you sure you want to leave the page?';
} else {
return null;
}
});
The onbeforeunload event:
$(window).bind('beforeunload', function() {
return 'Are you sure?';
});
On some browsers this displays the message, on other browsers the message is not shown. It does show a dialog with a Leave and a Stay button on all browsers though (as far as I know) so that the user can choose.
Use beforeunload event of window.
$(window).bind('beforeunload', function() {
return confirm("Alert user");
});
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('click');
}
});
doesn't work in IE7
it's strange but try to create a custom event
$('#XynBp0 input').bind('custom',function(){
//code
})
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('custom');
}
});
Does this work?
$.click() (or $.trigger('click')) doesn't simulate a mouse click; it fires off any onclick events bound to that element. If you haven't assigned an onclick event to that input you're searching for, nothing will happen.
It sounds like you're trying to submit the form with a traditional submit button (e.g. <input type="submit" value="Cancel">). If that's the case, you may have to use $(yourform).submit() to submit the form, in combination with some handling of the data sent to the server to simulate clicking the Cancel button.
Is it wrapped in a dom ready event? Might help if you provide more code.
$(function () {
$('#XynBp0').find('input').each(function () {
if ($(this).attr('value') == 'Cancel') {
$(this).trigger('click');
}
});
});
Your code snippit doesn't make any sense, you are clicking inputs if they are canceled?
Here's some things to clean up in your code
$('input','#XynBp0').each(function () {
var $this = $(this);
if ( this.value === 'Cancel' ) { //Don't need jQuery here
$this.trigger('click'); //Probably don't need it here either
}
});
What does click even do? If you are trying to submit a form, use form.submit();