How to save the value of an input for a function? - javascript

I'm new to PHP and SQL and JQUERY/JS. I'm trying to make is so that when a person press's enter(while in an input field) the same thing occurs as if they hit the existing button.
This is the original button code:
$(document).on("click", '.submit', function(event) {
var to_user_id = $(this).attr('id');
to_user_id = to_user_id.replace(/chatButton/g, "");
sendMessage(to_user_id);
});
My Attempt at making it so that enter did the same thing as the above code:
$('#chatMessage3').keyup(function(e) {
if (e.keyCode == 13) {
var to_user_id = $(this).attr('id');
sendMessage(to_user_id);
}

It looks like your submit buttons have IDs like chatButton1, chatButton2, etc. and you want to just send 1, 2. You need to do a similar replacement in the #chatMessage3 handler:
$('#chatMessage3').keyup(function(e) {
if (e.keyCode == 13) {
var to_user_id = $(this).attr('id');
to_user_id = to_user_id.replace(/chatMessage/, '');
sendMessage(to_user_id);
}

Related

How to trigger the select function when the value is selected after the tab is pressed

I have a combo box that enables the autocomplete function.
The project that I am working on currently uses the same code that is mentioned in the answer.
I have modified the code to select the value on the tab pressed if it matched the exact text in the select.
In the source, I called this function.
this._addTabAndReturnListener(matchedOptions);
and I have implemented _addTabAndReturnListener as:
_addTabAndReturnListener: function(options) {
var self = this;
var element = this.element;
var input = this.input[0];
this.input.off('keydown.first'); // Disable listener from previous call
this.input.on('keydown.first', function(e) {
var keycode = e.which;
if (keycode == 9 || keycode == 13) // If tab key pressed
if (options.length == 1) {
var result = null;
element.children("option").each(function() {
if ($(this).text() == options[0].value)
result = this;
})
if (result != null)
input.value = $(result).text();
$(this).attr("title", input.value + " matched").tooltip("open");
input.dispatchEvent(new Event("select"));
}
});
},
I wanted to trigger the select function when the value is selected after the tab is pressed, but not able to do so.
Normally when a value is selected from the dropdown the following functions have been triggered, and the alert is displayed. But it is not working on the tab pressed.
$('#myselect').combobox({
select: function(event, ui) {
alert(event.target);
}
});
What could be the solution for this?
Jsfiddle
I was able to solve this issue by adding a trigger.
$(this).trigger("tabOnChange", result);
and define a new event, called tabOnChange
tabOnChange: function(event, opt) {
opt.selected = true;
this._trigger("select", event, {
item: opt
});
},
Fiddle:

How to pass "this" on an enter key event?

I think this is a syntax question, but I can't seem to find a question that answers what I'm looking for. There's lots that are... close. Might be something with binding, or "apply", but I can't figure out how to use those in this context.
I have a function, that when fired, turns a span into an input so it can be edited. Then, when the focus is off (blur), the new text is saved. So far that works exactly as I wanted. I thought it would be nice if enter key would do the same thing... but I can't figure out how to make the event work.
function span_into_textarea() {
var old_text = $(this).text();
var editableText = $("<input type='text' />");
editableText.val(old_text);
$(this).replaceWith(editableText);
editableText.focus();
editableText.blur(textarea_into_span);
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span()}
}); // THIS DOESNT PASS ANYTHING TO "THIS"
editableText.keypress(textarea_into_span); //THIS WORKS BUT I CAN'T KNOW WHICH KEY WAS PRESSED
}
function textarea_into_span() {
var new_text = $(this).val();
}
Thanks for any help!
You can use call to pass the this reference:
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span.call(this)} //will refer to editableText
});
You may bind: editableText.keypress( textarea_into_span.bind(this) ) (event is passed as an argument).
You may replace textarea_into_span with an arrow function (they don't bind this so it is looked up in parent context):
editableText.keypress( (e) => {
if (e.which == 13) {
var new_text = $(this).val();
}
})
As suggested by #Mouser you may use call or apply:
editableText.keypress( function(e) {
if (e.which == 13) {
textarea_into_span.call(this);
// or textarea_into_span.apply(this)
}
})
Try this way, you were losing the scope:
function span_into_textarea() {
var modify = this;
var old_text = $(this).text();
var editableText = $("<input type='text' />");
editableText.val(old_text);
$(this).replaceWith(editableText);
editableText.focus();
editableText.blur(textarea_into_span(modify));
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span(modify)}
});
}
function textarea_into_span(modify) {
var new_text = $(modify).val();
}
editableText.keypress(function(e) {
var key = e.which;
if (key == 13) // enter key ascii code
{
textarea_into_span.call(this) //will refer to editableText
}
});

jquery rename content insite a tag and confirming it

How can I target only one container?
The User should be able to change the Name and then confirm the change.
My function works fine but when I have more containers repeated and I confirm Its changing all the tags!
Please check the demo where you can also see the changeElementTypefunction
Demo:
http://jsfiddle.net/26qNq/1/
JS:
$('.replace').on('click', function (){
$("h2").changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
$('.confirm').on('click', function(){
var $textarea = $('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
if ($('textarea:visible')){
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity','1');
}
});
}
});
You need to identify the relevant h2/textarea
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
and
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
You also should nest your handler binding because each time your try to edit, you add a new handler
Full changes
$(document).keypress(function (e) {
if ($('textarea:visible')) {
if (e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity', '1');
}
}
});
$('.replace').on('click', function () {
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
});
$('.confirm').on('click', function () {
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
Demo at http://jsfiddle.net/26qNq/6/
Adding an ID to each of them seems to work.
All I needed to do was add a numeric ID to each element we were using and add this to your replace code:
var id = $(this).attr('id');
$("h2#" + id).changeElementType("textarea");
demo: http://jsfiddle.net/26qNq/12/

Create variable to a path JSON is an action performed by jQuery

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();
});

How to find out user pressed "enter" in text input?

I'm trying to add text input's element to my array when user pressed enter key. but I don't know how to do that. I tried this if statements but they didn't work:
var val = $("#txbxfeeds").val();
if (val[val.length-1] == "\r") {
alert("HI");
}
if (val[val.length-1] == "\n") {
alert("HI");
}
How can I do this?
I can suggest the following:
var vals = [];
$("#txbxfeeds").on("keypress", function(e) {
if (e.which == 13) {
vals.push(this.value);
}
});
DEMO: http://jsfiddle.net/Q4CUf/
$("#txbxfeeds").on('keyup', function(e) {
//13 is the code for enter button
var val = $(this).val(); // or this.value
if(e.which == 13) {
alert( val );
}
});
Working sample
Read more about jQuery event.which

Categories