We Keep Coding

JS Always getting the same event object "e" parameter with mousedown

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 ?

call different events based on user input style javascript

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

on trigger click event script called 2 time in first attempt

I am creating an image gallary using owl carousel and php.there mouse click event working perfectly but when click command over keyboard having problem skip one image on prev keyup only and only first time. which code are calling after keyup function when write that code inside that function working perfectly
$(document.documentElement).keyup(function(event) {
// handle cursor keys
if (event.keyCode == 37) {
$(".prev").click();
});
var prevkey = $(".prev");
prevkey.unbind("click").click(function() {
$(".reset").click();
setTimeout(function() {
$(".printable").load(function(){
$(".owl-carousel").myfunction();
});
}, 200);
curEle = $(".item.active").parent();
//console.log(curEle);
if(curEle.find(".item").attr("data-id")==0)
{
$(this).addClass("disabled");
}
else
{
$(this).removeClass("disabled");
prevEle = curEle.prev();
console.log(prevEle);
prevEle.find(".item").addClass("active");
curEle.find(".item").removeClass("active");
prevEle.find(".printable").attr("src",prevEle.find(".printable").attr("data-src"));
carousel.trigger("owl.prev");
curEle.find(".printable").attr("src","");
}
});

Insert preventDefault() to avoid other events than yours...
$(document.documentElement).keyup(function(event) {
// handle cursor keys
event.preventDefault();
if (event.keyCode == 37) {
$(".prev").click();
}
});
EDIT check this answer if you're using IE8

try this using one will prevent a second call
$(".prev").one("click",function(){
//your stuff
});

Layout mess-up when JavaScript "keyup" run in Google Chrome

I create simple function when keyup using JavaScript like so :
<script>
//when press enter, submit this form, when press shift and enter create new line
$("#text_reply1778").keyup(function(e) {
var textVal = $(this).val();
if(e.which == 13 && e.shiftKey) {
//here create new line
}
else if (e.which == 13) {
e.preventDefault();
var text_input = $("#text_reply1778").val();
if(text_input != '') { //dont submit if value is empty
$('#reply1778').ajaxSubmit( {
target: '#reply_output1778',
success: function() {
//do somthing here
}
});
}
}
});
</script>
When I run this using browser Google Chrome Version 26.0.1410.43 my layout will mess-up but this not happen when I'm using Firefox.
You can try from here (full code) chat1.html , then type any message inside textarea(chat box) then you will see layout will mess-up.
So how to avoid this? Any method that I can use? I tried to replace keyup with keypress but the result was still the same.

using a function on textbox focus?

I want to add a autocomplete function to a site and found this guide which uses some js code which works really nice for one textbox: http://www.sks.com.np/article/9/ajax-autocomplete-using-php-mysql.html
However when trying to add multiple autocompletes only the last tetbox will work since it is the last one set.
Here is the function that sets the variables for the js script
function setAutoComplete(field_id, results_id, get_url)
{
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// reposition div
repositionResultsDiv();
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
For one textbox I can call the function like this
$(function(){
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part=");
});
However when using multiple textboxes I am unsure how I should go about doing this, here is something I did try but it did not work
$('#f1').focus(function (e) {
setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {
setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}
Thanks for your help.

You should be using classes to make your function work in more than one element on the same page. Just drop the fixed ID's and do a forEach to target every single element with that class.