I need have to carry the description of the title when clicking "enter",
I created a variable for the path of the description:
var descri = json.query.results.channel.item.map(function (item) {
return item.summary;
});
And this code, jQuery to call the the variable when you click enter:
$(document).on('keypress', function (e) {
if (e.which == 13) {
//I think the error is here:
$('.description').html('descri');
}
e.preventDefault();
});
jsfiddle
Use this
success: function (json) {
/* Other things */
// description
var description = json.query.results.channel.item.map(function (item) {
return item.summary;
});
// Call Ajax Key Enter
$(document).on('keypress', function (e) {
if (e.which == 13) {
$('.description').html(description);
}
e.preventDefault();
});
/* Other things */
}
Demo: http://jsfiddle.net/2NmnB/2/
If I understood your question correctly then here is your answer below.
if (e.which == 13) {
$('.description').html($(".nav_holder li.selected").text());
}
Related
I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the appropriate JavaScript takes place without reloading the page. without using form
$('#Searchbar').bind("enterkey", function (e) {
$("#Searchbar").load('Search(1);');
e.preventDefault();
});
$('#Searchbar').keyup(function (event) {
if (event.keyCode === 10 || event.keyCode === 13) {
$(this).trigger("enterKey");
event.preventDefault();
}
});
}
$('#Searchbar').on("enterkey", function(e) {
//
search('whatever your search string might be', function(result) {
// get the result and put in the resultcontainer
$('.resultContainer').html(result);
});
e.preventDefault();
});
$('#Searchbar').keyup(function(event) {
if (event.keyCode === 10 || event.keyCode === 13) {
$(this).trigger("enterKey");
event.preventDefault();
}
});
function search(data, callback) {
//Do an ajax call and call the callback on succes
//Check for proper syntax in jquery documentation
$.post({
'data': data,
'url': your search url,
success: function(result) {
callback(result);
}
});
}
There's been a recent trend to use spacebar as a meta key while performing certain drag actions in more graphical apps.
The problem is that the mouse flickers while holding spacebar (or any non-modifier key) down and moving your mouse: http://jsfiddle.net/S3AJr/4/
Example code:
$(function() {
var count = 1,
isSpaceBarPressed = false;
$('body').on('keydown', function(e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = true;
}
});
$('body').on('keyup', function(e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = false;
}
});
$('body').on('mousemove', function(e) {
if (isSpaceBarPressed) {
e.preventDefault();
$('.pizza').text(count++);
}
});
});
Is there a way to fix this or am I limited to ctrl, alt, shift and meta?
Easy fix bro!
// note include underscore-min.js for our throttle function
$(function () {
var count = 1,
isSpaceBarPressed = false;
var throttledRender = _.throttle(function () {
$('.pizza').text(count);
}, 200);
$('body').on('keydown', function (e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = true;
}
});
$('body').on('keyup', function (e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = false;
}
});
$('body').on('mousemove', function (e) {
if (isSpaceBarPressed) {
e.preventDefault();
count++;
throttledRender();
}
});
});
The problem is that you are rendering WAY too often (every time the event fires). Instead, you want to increment your variable every time but only render periodically. See this forked fiddle using underscore's throttle function. If you prefer, there is a jQuery plugin for this too.
Ok..I've been working all day on a demo CRUD app learning some Bootstrap and JS basics...
I've almost got what I want but the last thing is I need it to do is while in the editbox to grab the keycode 13 event (enter) and so send the right class to a function that already works..
it all goes something like this...
$(function() {
...
...
$(document).on("blur", "input#editbox", function(){ saveEditable(this) });
});
function saveEditable(element) {
$('#indicator').show();
var User = new Object();
User.id = $('.current').attr('user_id');
User.field = $('.current').attr('field');
User.newvalue = $(element).val();
var userJson = JSON.stringify(User);
$.post('Controller.php',
{
action: 'update_field_data',
user: userJson
},
function(data, textStatus) {
$('td.current').html($(element).val());
$('.current').removeClass('current');
$('#indicator').hide();
},
"json"
);
}
function makeEditable(element) {
$(element).html('<input id="editbox" size="'+ $(element).text().length +'" type="text" value="'+ $(element).text() +'" onkeypress="return checkForEnter(event)">');
$('#editbox').focus();
$(element).addClass('current');
}
function checkForEnter(e){
if (e.keyCode == 13) {
saveEditable(e);
return false;
}
}
It works pretty good on the blur event firing but just isn't quite there for ENTER
here is the link...just Load the table and see http://markenriquez.tekcities.com/credapp
advTHNAKSance
You are passing event as argument to saveEditable() method from checkForEnter(). Wherein you should pass input field reference instead.
Try this,
function checkForEnter(e){
if (e.keyCode == 13) {
saveEditable(e.target);
return false;
}
}
Hope this helps.
$(window).on("keypress", "input#editbox",function(e){
if(e.keyCode == 13){
do_something();
}
});
PS. Your textarea top-left and bottom-left corners are rounded.
Need to load the "summary" of each item are all together starting from a JSON.
I created this variable but this seems wrong because I always returns the first item, not the current item.
javascript:
// it seems to be wrong
var description = json.query.results.channel.item.map(function (item) {
return item.summary;
});
var i = 0;
$(".selected").each(function () {
if ($(this).css("background") == "red") i = $(this).index();
});
JSFIDDLE
// Call Ajax Key Enter
$(document).on('keypress', function (e) {
if (e.which == 13) {
$('.description').html(description[$(".selected").index()]);
}
e.preventDefault();
});
try this modification http://jsfiddle.net/2NmnB/4/
$(document).on('keypress', function (e) {
if (e.which == 13) {
var x = $('li').index( $('.selected'));
$('.description').html(description[x]);
}
e.preventDefault();
});
I have some code here:
$(document).ready(function() {
$("#querybox").live("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});
that detects a keyUp and uses it to search something. The problem is: when the #querybox is backspaced to the point where it is empty, the entire page crashes and I get the "Awwww, Snap!" message from Google Chrome.
I am using jQuery v1.7.2
Thx a million!
EDIT
I should also point out that the search() function highlights text in the body (notice the commented section). I am using the highlight plugin...
Search Fn:
function search(query) {
$("center").removeHighlight();
$(".paragraph").highlight(query);
$(".highlight").each(function (index) {
$(this).attr("id", "tmpforgoToByClassScrollhighlight" + index);
});
}
Try using .on(...) instead:
$("#querybox").on("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var queryBox = this;
if (code === 13) { // PRESSED ENTER
queryBox.blur();
}
else {
search(queryBox.val());
}
});
After your update:
You might want to look better into how you do your search functiom.
Cache some of those jQuery elements so you do not keep selecting them over and over on each keyup.
Also, I am not going through all of the .highlight code, but there probably is a bug in there that does not allow for an empty string, and that is why the website is causing the browser to crash.
You should use .delegate() instead
$(document).ready(function() {
//It will be a good advice to replace body with a parent element of #querybox
$("body").delegate("#querybox","keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});