Javascript confirm dialog and middle/right mouse click - javascript

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

Related

JQuery Modal Trigger for Unique Elements

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.

JQuery UI Sorting Breaks A Element Href Links

Example
https://jsfiddle.net/e80tL2kL/
To start with you can click the text in the bars and they will all
open up google in a new tab.
Proceed to click the edit button and you will be able to drag the
tabs around but not be able to click the text to open google.
Click edit again and it should disable movement and enable links
again.
However clicking the text of a bar which has been moved does not open the link on the first click but clicking it a second time will.
For this example I'm using
$('a').attr('onclick', 'return true;');
to re-enable links.
However I have tried using:
$('a').attr('onclick', '');
$('a').attr('onclick', null);
$('a').attr('onclick', '').unbind('click');
$('a').prop('onclick',null).off('click');
All of which have the same result.
Why does this "first click doesn't work after moving" happen and how can I fix it?
Probably a bug with jquery-ui, but you can fix it easily. There's a bind that doesn't get unbind on disable. You can unbind it manually like this:
} else if (edit == true) {
edit = false;
$("#sortable").sortable('disable');
$("#sortable").unbind('click.sortable');
$('a').attr('onclick', 'return true');
}
https://jsfiddle.net/rh27oxph/1/

Hide Title on mouse click

I have a button element which shows dropdown when i click on that. It also shows title.
My problem is if i click on button , title of button appears above values of dropdown. I want to hide title when i click on button.
I want something similar to gmails setting button.
i tried something like this But it removes title of button after first click also it shows title on first click which does not solve my problem
$(this).click(
function() {
$(this).attr('title', title);
}
);
please find js fiddle link
http://jsfiddle.net/EuLcK/

JS Function inside a click for a button is being called twice

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.

Javascript Confirm box working wrong

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.

Categories