Hi all I am working in angular js , I want to add confirm message when click delete button
I tried this code :
<a data-ng-click="removeTodo(this)" href="javascript:;"
onclick="javascript:return confirm('Are you sure you want to delete ?')">Delete</a>
This is shown ok and cancel button with the confirm box , if i click the ok button it's going to next process , but if i click the cancel button then it's same as going to same process confirm box was not hide ( The ok button will return true , but same as cancel button will be return true not a false)
But it's working good when i used this below code on click my delete button
$scope.removeTodo = function (Student) {
if (!confirm("Do you want to delete this ? ")) {
return false;
}
//please think , I added Some code for next process in here
};
What is the problem ? what i missed ? Why my first code was not working ?
It is because return false is same as preventing the default action and stopping event propagation - which will prevent the handlers attached to ancestor elements from being executed... but in your case both click handlers are attached to the same element.
So even if the confirm returns false the angular click handler will get executed.
Related
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
Hi I have the following piece of code that is giving me weird behaviour
$("#cont_btn").click(function () {
$("#cont_btn").attr('disabled', 'disabled');
selRowIds = $("#CodeGrid").jqGrid('getGridParam', 'selarrrow');
rowsToJson(selRowIds);
//return false;
});
The button cont_btn is a button on a bootstrap 2 modal. It contains a continue button and a close button.
If I select the close button or click outside the modal to dismiss it, and then re-open the modal the function will get called twice.
I have tried using
.one('click', function() { ... }
and I have put break points on the line of
$("#cont_btn").click(...
click is not getting called twice. During my debugging I'm finding that the script re enters on the line of
$("#cont_btn").attr('disabled', 'disabled');
On the page load I see that the line of
$("#cont_btn").click(function () {
Is hit but the code does not enter the function it will skip to the close button. I presume this is the listener for both buttons being initialized ?
Googling this has suggested checking that the Script isn't called twice and using return false, but nothing has worked.
Any help is appreciated.
The event handler is inside the function that opens the modal, so everytime the modal is opened, the event handler is bound once more.
Hi guys i'm currently working on a delete validate function in javascript. Here is my code.
function confirmDelete(){
var agree = confirm("Are you sure you want to delete this file?");
if(agree == true){
return true
}
else{
return false;
}
}
The alert dialog box comes out but whenever i press "Cancel" button it still deletes the file in the table
Here is my HTML:
<a href=".base_url()."main/delete?id=$row->id>"."<i class='icon-trash' rel = 'tooltip' title = 'Delete' id = 'delete' onClick = 'confirmDelete();'></i></a>";
I'm using CodeIgniter by the way any help will much be appreciated! Thanks guys! :)
try to use return statement where you are calling javascript function.
Like below:
<a href=".base_url()."main/delete?id=$row->id>"."<i class='icon-trash' rel = 'tooltip' title = 'Delete' id = 'delete' onClick = 'return confirmDelete();'></i></a>";
Just do it directly inside your tag:
Delete
Because the on click should be in the <a>, not the <i>. Also, your function could be simplified, considering confirm returns true or false:
function confirmDelete(){
return confirm("Are you sure you want to delete this file?");
}
Call event.preventDefault(), if returning false on its own is not preventing the browser action.
You will need to get a reference to event or window.event.. which is somewhat browser-specific. jQuery or similar can help with this.
onclick="if (! confirm('Are you sure you want to delete this book?')) event.preventDefault();"
(Though, with the above example, we're not returning 'false' any more -- ideally, we'd put the code in a method, and both return false and prevent default if the confirmation is negative.)
To test if it works, most simply:
onclick="event.preventDefault();"
See also:
jQuery: How to get the event object in an event handler function without passing it as an argument?
http://www.quirksmode.org/js/events_access.html
event.preventDefault() vs. return false
The difference between returning 'false' and e.preventDefault() will prevent the default event from occuring,e.stopPropagation()` prevents it from bubbling up/ outwards & outer defaults occurring, but return 'false' does not stop it from bubbling.
So perhaps it would be better to put the onclick handler on the link, which is performing the default action?
I have an <asp:Button name="theButton"> that I handle clicks in using jQuery. I display a custom jQuery UI confirm dialog when the button is pressed.
I've made 2 callbacks; one for the "yes"-click and one for the "no":
$('input[name="theButton"]').click(function(){
myPopUpMethod(function(){
//user pressed "yes" - perform postback
//(return true won't do anything here)
}, function(){
//user pressed "no" - don't postback
});
});
If I use a standard confirm() I could just do something like:
return confirm('are you sure?');
But how do I return true or false to the "outer click function" in my first example?
Because the jQuery dialog doesn't block the thread, your click function is always going to return immediately, so you need to do return false; at the end regardless of the dialog result so that the form doesn't get posted.
What I normally do is check for the existence of a data attribute on the button which if present will allow the form to submit, for example:
$('input[name="theButton"]').click(function(){
var $btn = $(this);
if($btn.data("dosubmit") == "true")) {
return true;
}
myPopUpMethod(function(){
$btn.data("dosubmit", "true").trigger("click");
}, function(){
// Do Nothing
});
return false;
});
The first time this is called, the jQuery UI dialog will popup and the method will block the form submit. Once the user clicks "Yes" on the dialog, the data-dosubmit attribute will be set and the button click triggered again. At this stage, the method sees the data-dosubmit attribute and attempts to submit the form.
I'm working on an ASP.NET MVC 3 project, and I want to display a confirmation message before deletion, I've wrote the following line:
#Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { onclick = "return confirm('Are you sure?')" })
Which is ok and works fine, however when I click middle button on the mouse or right click then choose 'Open Link in New Tab', the record will be deleted without displaying the confirm dialog which is weird!
I have tried the upper code with onMouseDown, the dialog displays but no action is happening when I click on OK button! (the record wont be deleted)
My question is how can I display a confirmation message before I delete a record and that link will only respond to left mouse click?
You should check mouse key on 'onclick' event and then return false if key is left. See useful example: Issue with onClick() and middle button on mouse