I'm trying to handle a middle mouse button click event with JQuery on a DataTable (https://datatables.net/). Here is my code.
var tbl = document.getElementById("entries");
$(tbl).on('mousedown', function (e) {
e.preventDefault();
if (e.which == 2) {
var table = window.table_entries;
var data = table.dataTable.row($(e.detail)).data();
window.open("/plugin/Changes/#Model.Revision/" + data.BuildId, '_blank');
}
});
I'm always getting the same BuildId (284), no matter where I click. How can I get the correct row?
I also have another code snippet, which works perfectly fine
tbl.addEventListener("cdt.click", function (e) {
var table = window.table_entries;
var data = table.dataTable.row($(e.detail)).data();
window.open("/plugin/Changes/#Model.Revision/" + data.BuildId, '_blank');
window.location("/plugin/Changes/#Model.Revision/" + data.BuildId);
});
Thanks in advance!
if you want to check de middle button click with jquery check this code
$("#foo").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
From this question Triggering onclick event using middle click
And if you want to check downmouse you can check this other #KyleMit answer
Detect middle button click (scroll button) with jQuery
#Jordi Jordi (because I can't comment right now) : Based on JQuery's documentation, click & mousedown both works.
$('h1').on('mousedown', function(e) {
alert(e.which);
});
Will display 1 for LClick, 2 for Middle, 3 for RClick. But this isn't the question.
If you're getting the same BuildId, it's because your selector isn't the good one.
If you're searching to get an exact row, you should change your selector like this :
$('td').on('mousedown', function (e) {
e.preventDefault();
if (e.which == 2) {
// Here you should get the row like this :
var row = $(this).parent();
}
});
Now it's your job to do what you want with this. The var "row" will contain the TR, meaning the row you just give a click.
EDIT : Note that your second code snippet doesn't include e.preventDefault(). Maybe it's the reason this second one works ?
Related
I have a MVC site and I have a html table and on double click on a cell it will go to edit mode and for the first time it works and next time when I double on the same cell or any other cell it dosen't work, when I make a click anywhere and then if I do double click it works fine.
I suspect some conflict between single click and double click.
$('#TableOverride tr:gt(0)').each(function () {
$(this).find('td:eq(9)').dblclick(function () {
EditCell(this, 9);
});
});
Update : Tested in Chrome and it works fine without any issues, it looks like a browser issue with IE 11 and earlier versions.
function EditCell(thisCell, colNum) {
var Id;
// if the table cell is not in edit mode
if ($(thisCell).find('input').length == 0) {
if (colNum == 4 && $(thisCell).parent().parent().parent()[0].id == 'OverrideTable') {
myBlk = $(thisCell).html();
$(thisCell).html('<input type="text" data-oldvalue="' + myBlk + '" />');
$(thisCell).find('input').val(myBlk);
$(thisCell).find('input').trigger('focus');
$(thisCell).find('input').keypress(function (e) {
if (e.which == 13) {
// If Enter key is pressed, update data.
myBlk = $(this).val();
if (myBlk == '') {
$('div.errorSummary').html('my block cannot be empty!');
$('div.errorSummary').show();
} else {
Loadmyblk(myBlk, this);
LeaseOverrideObj.GetLeaseOverride());
}
});
}
Try this, it should work, add custom class e.g. "EditableCell" for using in dblclick event binding on document.
$('#TableOverride tr:gt(0)').each(
function () {
$(this).find('td:eq(9)').removeClass('EditableCell').addClass('EditableCell');
});
});
$(document).on('dblclick', '.EditableCell', function()
{ EditCell(this, 9);
});
Please note $(document).on should not be called in any loop, it should be called only once in document.ready.
Js Fiddle
Updated fiddle link to demo dblclick on dynamically added events
I have a div which contains an input element to enter some values. These values are added just above the div as a list element upon pressing enter or onFocusOut event. To this point it is fine. But if user types some value and does not press enter and directly clicks on save button, the onFocusOut function for that div should not be called. Instead it should take that typed value and call some save function. Do you have any suggestion on how to detect it?
My code snippet is here
JS:
divInput.onkeypress = function (event){
return someTestFunc();
}
divInput.tabIndex="-1";
$(divInput).focusout(function (e) {
if ($(this).find(e.relatedTarget).length == 0) {
addToList();
}
});
It is not a very delicate solution, but you could use a setTimeout before adding the item to the list and clear the setTimeout on save.button click.
Try this:
var $saveButton = $('#exampleButton')[0],
$divInput = $('#exampleInput')[0],
timedEvent = -1;
$($saveButton).on('click', function(event){
if(timedEvent) {
clearTimeout(timedEvent)
}
alert('not add to list & save');
})
$divInput.tabIndex="-1";
$($divInput).on('focusout', function(e) {
timedEvent = window.setTimeout(function() {
if ($(this).find(e.relatedTarget).length == 0) {
alert('add to list');
}
}, 200);
});
Check this working fiddle
JQUERY
$(".share-drop .dropdown-notif").keydown(function (e) {
e.preventDefault();
$(this).parents('.share').find('.share-drop .dropdown-notif').show();
if ($(this).val() == '') {
$('.share-drop .dropdown-notif').hide();
}
if (e.which == 40) {
var next = $('.selected').removeClass('selected').next('li');
next = next.length > 0 ? next : $('.focus li:eq(0)');
next.addClass('selected').children('a').focus();
} else if (e.which == 38) {
var prev = $('.selected').removeClass('selected').prev('li');
prev = prev.length > 0 ? prev : $('.focus li').last();
prev.addClass('selected').children('a').focus();
}
});
I have a drop-down option which will trigger on a keyup function of input text. I need to select those options using my up and down arrow keys I have been trying this using keydown where i couldn't able to move further. Can anyone help me with this. Thanks in advance.
Here is the DEMO
I made a couple of changes to your fiddle and it started working for the up and down key after you do some typing; eg type 'te' then press up and down:
http://jsfiddle.net/c9U3s/2/
The keydown event binding needs to be on the input element itself, and you need to allow preventDefault:
$(".input-hold input").keydown(function (e) {
//e.preventDefault();
and you need an initial selected class somewhere, for your logic to then sucessfully kick in, so I added this to the HTML:
<li class="selected"><a>testmail#test.com</a>
I think there's a couple more bug to step through, (eg what happens when you reach the end of the list with the down key?), but this will hopefully get you started.
This shows you how you can control the scrollTop of the dropdown, so you can scroll to view selected elements:
http://jsfiddle.net/c9U3s/3/
but again, some work needed to refine it to be truly nice.
I want to be able to press tab once the .editbox is clicked and it take the focus to the next .editbox. I have been messing with the code for an hour now and cannot "find" the next element.
Here is my code to do it. For help you will likely need more context. I made a jsfiddle to elaborate on what I am dealing with.
//on tab
$(".edit_tr").on('keydown', '.editbox', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var focus = $(document.activeElement);
//console.log(focus);
focus.closest('td').siblings('.editbox').focus();
console.log(focus.parent().next('.editbox'));
}
});
On line #41 you have to go with:
focus.closest('td').next().find(".editbox").show().focus();
This will go back to the current td, look for the following td tag, search for .editbox and before you can focus() on it you have to show() it (make it visible) first.
This solution will only work for 1 line. If you want to move between different lines with the tab key you'll have to do the following:
var nextEditbox = focus.closest('td').next().find(".editbox");
//check if there are still .editboxes on the same line
if(nextEditbox.length){
//go for it and focus the next edit box on the same line
nextEditbox.show().focus();
}
else {
//move to the next line and search for the next editbox
nextEditbox = focus.closest('tr').next().find(".edit_td:first").find(".editbox");
//show and focus
nextEditbox.show().focus();
}
//this will end the focusing and the .change() (which is defined above) will fire and do the ajax
focus.blur();
You'll have to do the hiding of the .text elements yourself.
Edit: Here's the Savebutton-Solution. I didn't test it, but I think it should work.
var changes = [];
$(".editbox").change(function(){
changes.push({ id : $(this).attr("id"), changed : $(this).attr("name"), data : $(this).val() });
});
$(".savebutton").click(function(){
//AJAX SENDING THE changes VAR TO THE PHP FILE
});
It seems that
$(".edit_tr").on('keydown', '.editbox', function(e) {
Should be
$(".edit_td").on('keydown', '.editbox', function(e) {
Besides, JQuery editTable may meets your requirements.
I'm make a rather long form, and I want to be able to break the form down into tabbable section, then when leaving that last input/select box, the next section will slide open, while the previous slides shut. I'm also wantning to have the fieldset legend, clickable to achieve the same thing.
A good example of what I'm looking for can be found here: http://jsfiddle.net/s4vcX/
Here is what I'm currently working with: http://jsfiddle.net/AUf3U/
If you'd like, you can see the current JavaScript code here:
$("fieldset label").hide();
$("fieldset ul").hide();
$("fieldset:first label").show();
// show when legend is clicked while hiding rest
$("legend").bind("click", function () {
$("fieldset label").not($(this).nextAll("label")).hide();
$(this).nextAll("label").show();
});
//handle shift-tab on first input of each field set
$("fieldset").find("input:first").bind("keydown", function (e) {
if( e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if(previous.length==0)
previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find("input:last").bind("keydown", function (e) {
if( !e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if(next.length==0)
next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find("input").first().focus();
e.preventDefault();
}
});
If someone can point out what`s going wrong here, I would be incredibly greatful, this has become a huge pain in the ass, and have to impelment this across about 50 forms, so changing the structure of my form is not necessarily a good thing.
The problem is your input selector, since you are using element selector it selects only elements with tag input but in your first fieldset the last element is a select element.
Try to use the :input selector
//handle shift-tab on first input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if (previous.length == 0) previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (!e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if (next.length == 0) next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find(":input").first().focus();
e.preventDefault();
}
});
Demo: Fiddle