Can't call angular ng-click from jQuery - javascript

Im trying to call ng-click from jQuery but cant get it work. Can someone tell me how to do it properly?
HTML:
<a ng-click="changeData()">Testing</a>
<a ng-click="changeData()">Testing 2</a>
<a ng-click="changeData()">Testing 3</a>
jQuery:
$(document).keydown(function(e){
if (checkNav && checkNav()) return;
if (e.keyCode == 37) {
// left
setCurrent(x,y-1);
e.preventDefault();
} else if (e.keyCode == 38) {
// up
setCurrent(x-1,y);
e.preventDefault();
} else if (e.keyCode == 39) {
// right
setCurrent(x,y+1);
e.preventDefault();
} else if (e.keyCode == 40) {
// down
setCurrent(x+1,y);
e.preventDefault();
} else if (e.keyCode == 13) {
$('a[ng-click="changeData()"]')
}
});
I want it to call same function as ng-click when clicking enter. It works fine if I have the following code for hrefs when clicking enter:
} else if (e.keyCode == 13) {
window.location = current.attr('href');
e.preventDefault();
}
Thanks!

I think you mean you want something like this. Let me know if this is your intent or not:
index.html
<input ng-keyup="keyFn(event=$event)" ngclick="clickFn()">click</input>
controller.js
angular.module('myApp')
.controller('myCtrl', function($scope) {
$scope.keyFn = function(event){
if (event.keyCode && event.keyCode === 13/*enter key*/){
someFunction();
}
};
$scope.clickFn = function(){
someFunction();
}
});
function someFunction(){
console.log("event fired");
//functionality shared between click and `enter` keypress
}

$('a[ng-click="changeData()"]') just fetches the element. If you want to trigger a click you need to call .click() like so
$('a[ng-click="changeData()"]').click();
But I prefer thomas' answer that doesn't use jQuery at all, I don't see why you'd need it. Seems completely unnecessary for this.

Related

Allowing Enter Key and Click Function to both run

I have the function:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.keyCode != 13) {
return false;
}
//Do Stuff
});
This code allows the user to either click the div or press the enter key. My problem, though, is that it really only allows the enter button due to the decision structure that filters the key code. How do I allow both the click and enter button event to go through?
jQuery events have a type property which you can check:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.type == 'keypress' && e.keyCode != 13) {
return false;
}
//Do Stuff
});
Alternatively you could extract the logic to its own function and add separate handlers:
function doStuff() {
// Do stuff...
}
$(document).on('click', '.pTile:not(.join)', doStuff);
$(document).on('keypress', '.pTile:not(.join)', function() {
if (e.keyCode == 13)
doStuff.call(this);
});

Ignore keyup for a few seconds for ux

I have a multistep form using jquery validator plugin that also goes to the next page when you press enter.
function showPage(pg){
$('formError').empty();
$('table:visible').hide();
$('#page-' + pg).show();
$('input[type="text"]:visible').focus();
}
$(document).keydown(function(e) {
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}});
The issue is that if you use the enter button, it triggers a validation error on the next page because the button is still being pressed and it tries to go to the next page.
How can I ignore the enter key for a small period so that releasing the enter key works to go to the next page without attempting to go to the page after the next page?
You can wait for the corresponding keyup event before taking in account a new keydown event for the enter key.
pressed = {};
$(document).keydown(function(e){
if(pressed[e.which] == null && e.which == '13'){
if($('#msform :input:visible').valid()) {
page++;
showPage(page);
}
}
pressed[e.which] = true;
});
$(document).keyup(function(e) {
pressed[e.which] = null;
});
You can use setTimeout() function like this
$(document).keydown(function(e) {
setTimeout(myFunction(),500);
});
function myFunction(){
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}
}
::::::::::::::::::Update::::::::::::::::::
$(document).keydown(function(e) {
if(e.which == 13) {
setTimeout(myFunction(),500);
}
});
function myFunction(){
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}
}

how to run a code when Left Arrow or Right Arrow Key Is Triggered on the keyboard

How to run a code in javascript when Left Or Right Arrow Keys is Triggered on the keyboard?
I am kinda Newbie to programming.
Can someone please guide me?
function leftpress() {
//do action
}
function rightpress() {
//do action
}
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 39://left arrow
leftpress();
break;
case 37://right arrow
rightpress();
break;
}
};
this is the exact code, try it ..
-you can ask me again if you need help.
You need to attach event handler for tracking the key-board events
document.addEventListener("keydown", keyDownevent, false);
function keyDownevent(e) {
var keyCode = e.keyCode;
if (e.keyCode === 37) {//right
// Your Code
}
else if (e.keyCode === 38) {//UP
// Your Code
}
else if (e.keyCode === 39) {//left
// Your Code
}
else if (e.keyCode === 40) {//DOWN
// Your Code
}
}
Working Example
It's simple with Jquery:
Try this :
$(document).keydown(function (e) {
e.stopImmediatePropagation();
if (e.keyCode === 37) {//right
// Your Code
}
else if (e.keyCode === 38) {//UP
// Your Code
}
else if (e.keyCode === 39) {//left
// Your Code
}
else if (e.keyCode === 40) {//DOWN
// Your Code
}
});
If you are new to Javascript, then may I advise on using libraries to make things easier (because you may end up fixing a lot of cross-browser issues) :)
jQuery is a good one, here are some keyboard events. http://api.jquery.com/category/events/keyboard-events/
First you need to get the value of the key you pressed, with jquery it is done like this:
$(‘#keyval’).keyup(function(e) {
console.log(e.which)
});
Then you do the test to see what value those keys has and then check for keyup event, check if it has than value and then do the action, like this:
$(document).keypress(function(e) {
if(e.which == //arrow value) {
// your action
}
});
I have not tested it but it must work.

How to prevent 'pressing enter' in an input to trigger an event ? Java script

I have an input and an appended button. The click on button calls some function. But I don't want this function to be called when user 'presses enter key'. On the other hand, I want on keyup in this input to call some other function. SO I put
$(document).on('keyup', '#id', function(e){
call();//calling some function
if (e.which == 13 || event.keyCode == 13) {
e.preventDefault();//I also tried to return false
}
});
But it doesn't seem to work, someone has an idea ?
$(document).on('keyup', '#id', function(e){
if (event.keyCode != 13) {
e.preventDefault();
call();//calling some function
}
return false;
});
Try this:
$(document).on('keyup', '#id', function(e){
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();//I also tried to return false
}else{
call();//calling some function
}
});
Don't use keyup, since the form is send on keydown.
Have you tried switch .call() function to a simple alert(), just for tests purpose. #Oyeme and #Jai code seems to work properly.

Hiding a div on Mouse click out OR escape keyword press

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if $('#display').hide();
});
});
This hides #display on pressing escape:
$(document).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Example: http://jsfiddle.net/nsufH/
You could also try to use window instead of document:
$(window).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Or try to use live:
$(document).live('keyup', function(event){
if(event.which === 27) {
$('#display').hide();
}
});
Basically you need to monitor for the KeyCode and act based off it:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#display').hide() } // esc
});
$(document).ready(function() {
$(document).on('mouseup keyup', function(e){
var e = e || event,
code = (e.keyCode ? e.keyCode : e.which),
target = e.srcElement || e.target;
if (target.className != 'form_content' || code==27) {
$('#display').hide();
}
});
});
Here is the jsfiddle hiding a div on mouseout and ESC key press :
http://jsfiddle.net/jrm2k6/q2kNX/
Of course there is probably some stuff to do in the way to adapt it as your own source code..

Categories