Develop Reference

Datatable search result add to cart enter key

I have joined a script called jquery.mycart with datatable.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key == "Enter" || evt.key == "Enter");
} else {
isEscape = (evt.keyCode == 13);
}
if (isEscape) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
}
};
I have a problem that when we suppose we search for "Antalgina" when we press enter this search is added to the shopping cart. (look at the console).
Full code
https://codepen.io/anon/pen/oaQJNg
Please how could I do it or give me some hint
I hope you can help me.

Working codePen.
You could a simple jQuery event like :
$("document").on('onkeydown', function (e) {
if (e.keyCode !== 13) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
});
});

Preparing for main Click and Touch Events

Trying to get the following code to work, a working example presented in jsfiddle will help. The codes for a game that should work on both click hardware and touchscreen hardware.
If there's a way to avoid using an init function that seems to help. Unless you feel like adding an example of how to get a draw function call into the mix somehow.
<p id="Xpos"></p>
<p id="Ypos"></p>
<script>
//############################### Mouse and Touch Events : Start
<!-- Source Code Web Site:
http://blog.patricktresp.de/2012/02/
internet-explorer-8-
and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/ -->
var el;
el = document.getElementById('bgLayerMain');
if( el.addEventListener )
{
el.addEventListener('mousedown', onMouseDown, false);
}else if( el.attachEvent ) {
el.attachEvent('onmousedown', onMouseDown);
}
if( is_touch_device() ) {addListeners(); alert("here");}
function stopEvent(e) {
if(!e) var e = window.event;
//e.cancelBubble is supported by IE -
// this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;
//e.stopPropagation works only in Firefox.
if ( e.stopPropagation ) e.stopPropagation();
if ( e.preventDefault ) e.preventDefault();
return false;
}
function addListeners( el )
{// Allow function call without passing parameters
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;
if( el )
{
if( el.addEventListener )
{
el.addEventListener('mouseup', onMouseUp, true);
el.addEventListener('mousemove', onMouseMove, true);
el.addEventListener('touchstart', onTouchStart, true);
el.addEventListener('touchmove', onTouchMove, true);
el.addEventListener('touchend', onTouchEnd, true);
}else if( el.attachEvent ) {
// make sure mouse events have the prefix <strong>on</strong>
el.attachEvent('onmouseup', onMouseUp);
el.attachEvent('onmousemove', onMouseMove);
el.attachEvent('touchstart', onTouchStart);
el.attachEvent('touchmove', onTouchMove);
el.attachEvent('touchend', onTouchEnd);
}
}
}
// also remove the Listeners correctly:
function removeListeners( el ) {
var e = el;
if( !e ) e = document.getElementById('bgLayerMain');
var el = e;
if( el )
{
if( el.removeEventListener )
{
el.removeEventListener('mouseup', onMouseUp);
el.removeEventListener('mousemove', onMouseMove);
el.removeEventListener('touchstart', onTouchStart);
el.removeEventListener('touchmove', onTouchMove);
el.removeEventListener('touchend', onTouchEnd);
}else if( el.detachEvent ) {
el.detachEvent('onmouseup', onMouseUp);
el.detachEvent('onmousemove', onMouseMove);
el.detachEvent('touchstart', onTouchStart);
el.detachEvent('touchmove', onTouchMove);
el.detachEvent('touchend', onTouchEnd);
}
}
}
function onMouseDown(e) {
log('-> mouse down');
addListeners();
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchStart(e);
stopEvent(e);
}
function onTouchStart(e) {
log('-> touch start');
//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
stopEvent(e);
}
function onMouseMove(e) {
log('-> mouse move');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
onTouchMove(e);
stopEvent(e);
}
function onTouchMove(e) {
log('-> touch move');
//do something with e.touches[0].clientX or e.touches[0].clientY
updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
stopEvent(e);
}
function onMouseUp(e) {
log('-> mouse up');
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
removeListeners();
stopEvent(e);
}
function onTouchEnd(e) {
log('-> touch end');
if( !is_touch_device() ) removeListeners();
}
function log(str) {
var c;
c = document.getElementById('console');
c.innerHTML = str + '
' + c.innerHTML;
}
function is_touch_device() {
return !!('ontouchstart' in window) ? 1 : 0;
}
function updateMousePos(){
//update posX and posY
}
//############################### Mouse and Touch Events : End

Simplified it to the following, perhaps a better way, yet for now works for me.
var clickOrTouchActive = 0;
addEventListener("mousedown", onClickOrTouchStart, false);
addEventListener("touchstart", onClickOrTouchStart, false);
addEventListener("mousemove", onClickOrTouchMove, false);
addEventListener("touchmove", onClickOrTouchMove, false);
addEventListener("mouseup", onClickOrTouchEnd, false);
addEventListener("touchend", onClickOrTouchEnd, false);
function onClickOrTouchStart(e) {
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
clickOrTouchActive = 1;
e.preventDefault();
return false;
}// end function onClickOrTouchStart
function onClickOrTouchMove(e) {
if (clickOrTouchActive == 1){
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
}
e.preventDefault();
return false;
}//end function onClickOrTouchMove
function onClickOrTouchEnd(e) {
updateMousePos(e.pageX,e.pageY);
tileMouseClicked(e.pageX,e.pageY);
fAngleOfMotion(e.pageX,e.pageY);
clickOrTouchActive = 0;
e.preventDefault();
return false;
}// end function onClickOrTouchEnd

How to compare events in JavaScript

I want to give document onkeydown & onkeyup in same function
How to know which event that trigger the function ?
<script>
document.onkeydown = listener;
document.onkeyup = listener;
function listener(e) {
if(e === "onkeydown"){
console.log("onkeydown");
}
else if(e === "onkeyup "){
console.log("onkeyup ");
}
else{
console.log("unknown");
}
}
</script>

You can use e.type
document.onkeydown = listener;
document.onkeyup = listener;
function listener(e) {
if(e.type === "keydown"){
console.log("keydown");
}
else if(e.type === "keyup "){
console.log("keyup ");
}
else{
console.log("unknown");
}
}

You can use e.type but remove the on prefix.
function listener(e) {
if(e.type.indexOf("key") !== 1)
console.log("onkey" + (e.type == "keydown" ? "down" : "up"));
else { console.log("unknown"); }
}

You need to check e.type. e is an Event object, not a string.

use this code:
<script>
document.onkeydown = listener;
document.onkeyup = listener;
function listener(e) {
if(e.type === "keydown"){
console.log("onkeydown");
}
else if(e.type === "keyup "){
console.log("onkeyup ");
}
else{
console.log("unknown");
}
}
</script>
e.type return which event is triggered

Scriptaculous draggable on iOS

How would you setup touch events to the draggable class, so that it works on iOS (iPad's, iPhone's, etc)? I have read How can I make a jQuery UI 'draggable()' div draggable for touchscreen?, which has lots of options for jQuery, but not sure how to apply that to Scriptaculous. Any help would be appreciated. Thanks.

You can do it by editing dragdrop.js as mention here:
In Draggables:
register: function(draggable) {
if(this.drags.length == 0) {
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
this.eventKeypress = this.keyPress.bindAsEventListener(this);
Event.observe(document, "mouseup", this.eventMouseUp);
Event.observe(document, "mousemove", this.eventMouseMove);
Event.observe(document, "keypress", this.eventKeypress);
Event.observe(document, "touchstart", this.eventKeypress);
Event.observe(document, "touchmove", this.eventMouseMove);
Event.observe(document, "touchend", this.eventMouseUp);
}
this.drags.push(draggable);
},
unregister: function(draggable) {
this.drags = this.drags.reject(function(d) { return d==draggable });
if(this.drags.length == 0) {
Event.stopObserving(document, "touchstart", this.eventKeypress);
Event.stopObserving(document, "touchmove", this.eventMouseMove);
Event.stopObserving(document, "touchend", this.eventMouseUp);
Event.stopObserving(document, "mouseup", this.eventMouseUp);
Event.stopObserving(document, "mousemove", this.eventMouseMove);
Event.stopObserving(document, "keypress", this.eventKeypress);
}
},
In Draggable:
initialize:
...
this.eventMouseDown = this.initDrag.bindAsEventListener(this);
Event.observe(this.handle, "mousedown", this.eventMouseDown);
Event.observe(this.handle, "touchstart", this.eventMouseDown);
Draggables.register(this);
},
destroy: function() {
Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
Event.stopObserving(this.handle, "touchstart", this.eventMouseDown);
Draggables.unregister(this);
},
...
initDrag: function(event) {
if(!Object.isUndefined(Draggable._dragging[this.element]) &&
Draggable._dragging[this.element]) return;
if(Event.isLeftClick(event) || event.type == "touchstart") {
Along with editing prototype.js:
function pointerX(event) {
var docElement = document.documentElement,
body = document.body || { scrollLeft: 0 };
if (event.changedTouches) return (event.changedTouches[0].clientX +
(docElement.scrollLeft || body.scrollLeft) -
(docElement.clientLeft || 0));
return event.pageX || (event.clientX +
(docElement.scrollLeft || body.scrollLeft) -
(docElement.clientLeft || 0));
}
function pointerY(event) {
var docElement = document.documentElement,
body = document.body || { scrollTop: 0 };
if (event.changedTouches) return (event.changedTouches[0].clientY +
(docElement.scrollTop || body.scrollTop) -
(docElement.clientTop || 0));
return event.pageY || (event.clientY +
(docElement.scrollTop || body.scrollTop) -
(docElement.clientTop || 0));
}

I think, you have to use parseInt function for X,Y coordinates, because I have some problem with Chrome browser on Android-it put something like 23.45435435345345345345345 to coordinates.
//Add parseInt ----------------[start]
if (event.changedTouches) return (parseInt(event.changedTouches[0].clientY +
(docElement.scrollTop || body.scrollTop) -
(docElement.clientTop || 0),10));
//Add parseInt ----------------[end]

Javascript ActiveElement and Keydown Event Listener

I'm new to Javascript and I'm trying to make the following code scan to see if a textbox with an id="lessonNum" is active, if it is not i would like to send a .click to a submit button with an id="A" when I press 'a' on the keyboard. Right now when I select the textbox I get an alert, but when I don't have it selected it doesn't pick up my keydown. Please Help!
function GetActive () {
if (document.activeElement.id == 'lessonNum') {
alert('lessonNum is active');
var b1=new Boolean(1);
} else {
var b1=new Boolean(0);
}
}
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==65) {
if(b1==0) {
alert('a has been pressed');
document.getElementById('A').click();
}
}
}

In your code:
> function GetActive () {
> if (document.activeElement.id == 'lessonNum') {
> alert('lessonNum is active');
> var b1 = new Boolean(1);
the above line creates a local variable called b1 and assigns a new boolean object. I think you just want a primitive, so:
var b1 = true;
or the whole if..else statement can be replaced with:
var b1 = document.activeElement.id == 'lessonNum';
if (b1) alert('lessonNum is active');
Note that getActive is never called so b1 is never set anyway.
In keyDownTextField you have:
> if(b1==0) {
> alert('a has been pressed');
however b is local to GetActive so a reference error will be thrown. The simple solution is to make b global, a little more work but better though to hold it in a closure.
e.g.
(function(global) {
var b1;
var getActive = function () {
b1 = document.activeElement && document.activeElement.id == 'lessonNum';
if (b1) alert('lessonNum is active');
}
global.getActive = getActive;
var keyDownTextField = function (e) {
e = e || window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == 65) {
getActive(); // should it be called here?
if (b1) {
alert('a has been pressed');
document.getElementById('A').click();
}
}
}
global.keyDownTextField = keyDownTextField;
}(this));
window.onload = function() {
addEvent(document, 'keydown', keyDownTextField);
};
// Just a helper
function addEvent(el, evt, fn){
if (el.addEventListener) {
el.addEventListener(evt, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, fn);
}
}