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");
}
});
});
Related
I have some links which I wish to prevent the user from unintentionally following if they have pending changes, and the following works.
$('#goToPage').next('ul.dropdown-menu').find('a').click(function(e){
if (tinymce.activeEditor.isDirty() && !confirm("Are you sure")) {
e.preventDefault();
}
});
Similarly, I have dialog which I wish to do the same, and while the confirm prompt occurs before opening the dialog, however, e.preventDefault(); does not prevent the dialog from opening.
How can an click() callback be disabled? Note that the #dialog-add dialog is used on other pages and I don't wish to modify it.
$('#add').click(function(e){
if (tinymce.activeEditor.isDirty() && !confirm("Are you sure")) {
console.log('quit')
e.preventDefault();
e.stopPropagation();
return false;
}
});
$("#add").click(function() {$("#dialog-add").dialog("open");});
$("#dialog-add").dialog();
I've written a small jQuery plugin which is designed to ask the question, "Are you sure?" when clicking on a link or submitting a form.
It's used like this:
Link
Or like this:
<form action="link.php" method="post">
<button class="confirm">Submit</button>
</form>
What I am doing is using preventDefault() to prevent the default behavior when the anchor or button is clicked. I then display a confirm dialogue where the user has to click either OK or Cancel.
If the user clicks Cancel then nothing happens (as expected).
However, if the user clicks OK I am firing the click event again, and using a flag that was set first time around to not prevent the default behaviour second time around (I'm instead returning true). Except that it's not working. Clicking either OK or Cancel in the confirm dialogue doesn't do anything.
The plugin is below:
(function($) {
$.fn.fw_confirm = function(options) {
// Flag to check for the first click event
var paused = false;
return this.on("click", function(e) {
// The anchor or the button that was clicked
var button = $(this);
// If this is the second click event, the user must have confirmed so return true
if (paused == true) {
// Reset the flag
paused = false;
// This isn't working, or at least it's not submitting the form or proceeding to the URL of the hyperlink when I would expect it to
return true;
}
// First time around prevent the default behavior
e.preventDefault();
e.stopImmediatePropagation();
// Set the flag to true, ready for the second click event
paused = true;
if (confirm("Are you sure?")) {
// The user is certain, so trigger the click event again
return button.trigger("click");
} else {
// The user cancelled, reset the flag
paused = false;
return;
}
});
}
})(jQuery);
I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});
You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});
Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.
Here is where I am at so far:
http://jsbin.com/ujuqa3/4
So far, I've decided to set a variable to false and to true when the .share-box is open. After it is open, I want the user to be able to click anywhere (except the box) to close it.
Right now it works the first time, but any time after that, it messes up for some reason.
$(document).ready(function() {
// user clicks on report this button
$(".shareThis").click(function() {
// confirmation fades in
$(".share-box").fadeIn("fast"),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
});
$(document.body).click(function () {
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
});
});
Add the return false;
// user clicks on report this button
$(".shareThis").click(function() {
// confirmation fades in
$(".share-box").fadeIn(),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
return false;
});
When $('.shareThis') click happen its also triggering the $(document.body).click
build a demo at
http://jsbin.com/uyizi4/4
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?");
});
});