I know that e.preventDefault(); is supposed to stop the spacebar from scrolling on the page, but it is not working on my function
$("html").live("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if ((code == 32 || code == 13) && $("span").is(":focus")) {
openDropdown();
$(".dropdown a.PivotItem:first").focus();
e.preventDefault();
} else if ((code == 32 || code == 13) && $("a.PivotItem").is(":focus")) {
closeDropdown();
changeSelected($("*:focus"));
e.preventDefault();
} else if (code == 27 && ($("span").is(":focus") || $(".dropdown a.PivotItem").is(":focus"))) {
closeDropdown();
$("span").focus();
} else {
//do nothing
}
});
Does it have something to do with the .live( handler I have included?
The space-bar scrolls the page on keydown, not on keyup, so try:
$("html").on("keydown", function (e) {
// etc
You don't really need to use .live(), because the html element will exist when your code runs.
Also, jQuery normalises event.which so you don't need to test for event.keyCode.
Related
Ace editor
read only region required
you can use the exec event on editor.commands to disable non readonly commands if wrong lines are selected
body,html {
height: 90%
}
<script src=https://ajaxorg.github.io/ace-builds/src/ace.js></script>
<script>
editor = ace.edit(document.body)
editor.setOptions({
mode: "ace/mode/javascript"
});
editor.commands.on("exec", function(e) {
if (e.command.readOnly)
return;
var editableRow = editor.session.getLength() - 1;
var deletesLeft = e.command.name == "backspace" || e.command.name == "removewordleft";
debugger
var notEditable = editor.selection.getAllRanges().some(function(r) {
if (deletesLeft && r.start.column == 0 && r.end.column == 0) return true;
return r.start.row != editableRow || r.end.row != editableRow;
});
if (notEditable)
e.preventDefault();
});
</script>
i am using $stateChangeStart instead of routechangestart , the problem i am facing is that after login whenever i refresh page i get redirected to home page,here is my code?
$rootScope.$on(‘$stateChangeStart’, function (event,next, toState, toParams,fromState, fromParams, options) {
if(next.name === “product.login” && $rootScope.authenticated) {
event.preventDefault();
} else if (next.name && next.data.requireLogin && !$rootScope.authenticated ) {
event.preventDefault();
$rootScope.$broadcast(“event:auth-loginRequired”, {});
}
else if (next.name && !AuthSharedService.isAuthorized(next.data.requiredRole)) {
event.preventDefault();
$rootScope.$broadcast(“event:auth-forbidden”, {});
}
}
);
$rootScope.$on(‘event:auth-loginConfirmed’, function (next,tostate,toparams, data,event)
{
console.log(‘login confirmed start for ‘ + tostate);
$rootScope.loadingAccount = false;
var nextLocation = ($rootScope.$state.current.name? $rootScope.$state.current.name : “frontProduct.productgrid”);
Session.create(tostate);
$rootScope.account = Session;
$rootScope.authenticated = true;
$state.go(nextLocation);
});
i just want to stay on current page.help me!
Hope you doing well
you have to also specify if user is not authenticated then where user redirect
if (!$rootScope.userloggedIn && !$rootScope.authenticate) {
$state.go("login");
event.preventDefault();
}
else{
$state.go("home");
}
look like this.
Hope this help you.
found answer,
$rootScope.$on('$stateChangeStart', function (event,next, toState, toParams,fromState, fromParams) {
if(next.name === "product.login" && $rootScope.authenticated) {
event.preventDefault();
} else if (next.name && next.data.requireLogin && !$rootScope.authenticated ) {
if(next.name!="product.login"&&next.name!=""){$window.localStorage.setItem('url',next.name);}
event.preventDefault();
$rootScope.$broadcast("event:auth-loginRequired", {});
}
else if (next.name && !AuthSharedService.isAuthorized(next.data.requiredRole)) {
event.preventDefault();
$rootScope.$broadcast("event:auth-forbidden", {});
}
}
);
$rootScope.$on('event:auth-loginConfirmed', function (next,tostate,toparams, data,event,$stateProvider) {
console.log('login confirmed start for ' + tostate);
$rootScope.loadingAccount = false;
$rootScope.$state.current.name : "frontProduct.productgrid");
Session.create(tostate);
$rootScope.account = Session;
$rootScope.authenticated = true;
$state.go($window.localStorage.getItem('url'));
$window.localStorage.remove('url');
});
i just want to know is this a correct way.
I'm trying to test the keydown event on a text box to determine if a character supplied, is valid or not, but this is turning out to be an impossible task.
I have a selector, like such:
$('<input type="text" id="rwSearchText" />').appendBody('body');
I have a function then that defines the check for the valid keys:
var addKeyDownEvent = function() {
$('#rwSearchText').keydown(function(event) {
var keyCode = event.which;
if ((keyCode > 64 && keyCode < 91) || keyCode === 189 || keyCode === 222 || keyCode === jQuery.ui.keyCode.BACKSPACE
|| keyCode === jQuery.ui.keyCode.DELETE || keyCode === jQuery.ui.keyCode.SPACE
|| keyCode === jQuery.ui.keyCode.LEFT || keyCode === jQuery.ui.keyCode.RIGHT
|| keyCode === jQuery.ui.keyCode.SHIFT || keyCode === jQuery.ui.keyCode.END
|| keyCode === jQuery.ui.keyCode.HOME) {
return true;
}
else {
return false;
}
});
};
I call this, in the beforeEach() method along with the appendTo('body') to create the textbox I need to test against:
beforeEach(function ()
{
rwSearchText = $("<input type=\"text\" id=\"#rwSearchText\" />").appendTo("body");
addKeyDownEvent();
});
rwSearchText is defined globally.
then in my define -> it('# should not be allowed', function() {}); I'm triggering the keydown manually:
describe("rwSearchText", function() {
it("single dash should be allowed", function() {
rwSearchText.val('&');
rwSearchText.trigger('keydown');
var results = rwSearchText.val();
});
});
but the keydown event is never fired.
Is there something I'm missing? I've Googled similar scenarios but what I've done seems correct. Any help would be really appreciated.
I have the following code. how can I make it short so it work with click and enter so I dont have to duplicate it.
$(document).ready(function(){
$(document).keypress(function(e) {
if(e.which == 13) {
$('form#myform').submit();
}
});
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
this would be a shorter one, it takes advantage of the event bubbling:
$(document).ready(function(){
$(this).on('keypress click', function(e) {
if(e.which == 13 || e.target.id==='mybutton')
$('form#myform').submit();
});
});
this is how it works: http://jsfiddle.net/e6L3W/
Try this:
(Although use of $(this) on document ready is not clear or might be its a typo and it supposed to be a input box.)
Hope this helps the cause and also read the link below: :)
Submitting a form on 'Enter' with jQuery?
code
$(document).ready(function(){
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
$('#mybutton').trigger('click');
}
})
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
OR
var myFunction = function() {
$('form#myform').submit();
}
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
myFunction;
}
})
$('#mybutton').click(myFunction);
OR
You could try chaining like this:
This will bind #element to the events but might be you are looking to bind 2 separate elements with 2 separate event but same outcome.
$('#element').bind('keypress click', function(e) {
...
});
$(document).ready(function(){
$(this).bind('keypress click', function(e) {
if(e.type == 'click') {
if(e.target.id == 'mybutton') {
$('form#myform').submit();
}
} else if(e.type == 'keypress') {
if(e.which == 13) {
$('form#myform').submit();
}
}
});
});
Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}