Develop Reference

How do I set a jQuery selector in coffeescript using a variable?

Im writing a Rails app, and I have multiple forms on the same page that all have different ids. in coffee script, I'm trying to set the identifier to access the text area in each. heres a quick example of what the html looks like in the browser.
HTML
Click here
<form id="new_item_plan_1">
<textarea id="plan_1_item_field"></textarea>
</form>
Setting the plan id and trying to access the text area
plan_id = 0
$(".link").click ->
plan_id = $(this).data("plan")
$("#plan_"+plan_id+"_item_field").keypress ->
...Some code...
So I have the plan_id variable initialized first, then set it to the .links data-plan value. But my key press event doesn't work on the textarea and I dont get an error in the console.
When I make a test link and console.log it...
plan_id = 0
$(".link").click ->
plan_id = $(this).data("plan")
$("#test).click ->
console.log(plan_id)
it prints the correct plan_id value in the console just fine, so I have to be doing something wrong in the textarea identifier. What am I going wrong? Thanks.
Link to jsfiddle, notice how the keypress event doesn't work https://jsfiddle.net/cfscr/175/

Click here
<form id="new_item_plan_1">
<textarea id="plan_1_item_field" class='item-field' data-plan='1'></textarea>
</form>
plan_id = 0
$(".link").click ->
plan_id = $(this).data("plan")
$(".item-field").keypress ->
if $(this).data('plan') == plan_id {
...Some code...
you could use a regex instead of another data tag in the text area, i'm just lazy ;)

Whats happening in your code is that the keypress binding is applied on page load, so its only applied once while plan id is still 0. it doesnt get re-applied when plan_id is updated.
I should note this seems like an odd thing to be doing, but you need to put the binding inside of the click event. that is, you want
$("#plan_"+plan_id+"_item_field").keypress ->
...Some code...
to be applied each time the click event is fired.
to do so, it must be indented properly
plan_id = 0
$(".link").one 'click', ->
plan_id = $(this).data("plan")
$("#plan_"+plan_id+"_item_field").keypress ->
...Some code...
this will make is so that when the user clicks the button any number of times, it will apply the binding to that keypress.
Is this what youre trying to accomplish?

Why textarea freezes when using jQuery function append to insert text

I'm trying to insert something in a text area (#note_text) from a drop down list (#note_template). User should be able to insert a number of items into the text area in between typing characters using the keyboard. Similar to selecting from a collection of emoticons to be put in the message.
When done in the followign way, the text area can receive items after typing.
function update1() {
$txt = $("#note_text").val() + $("#note_template option:selected").val() ;
$("#note_text").val($txt);
$("#note_template").val("");
}
But when done in the following way, the content of the text area wouldn't update after typing. Only before typing I can insert items from the drop down list.
function noteTempalteSelected() {
$("#note_text").append( $("#note_template option:selected").val() );
$("#note_template").val("");
}
So it seems that the use of append causes the text area to freeze. Could anyone explain why ? Thank you.

Ok I think I know whats going on here. For the append to work properly, the element should have an innerHTML property or html() in jquery. Textarea just like the input has a val() property. So for this to work properly you should try this:
$('#note_template').on('click', 'option:selected', function(e){
var txtArea = $('#note_text');
txtArea.val(txtArea.val() + $(this).val());
$(this).val('');
});
[DEMO HERE][1]

Inout Text field generates a blank line when converted to string and output

Okay, so. I am making a text based game and I require a name input field. I looked at a lot of ways to do it, but couldn't understand most of them, or they were such workarounds that I couldn't justify making such messy code. This is what I have for my current script.
function handler(event:KeyboardEvent)
{
if(event.charCode == 13)
{
Input.toString()
myText = Input.text
trace(myText)
}
}
Sorry I don't know how to make those fancy blocks I see all over this site. =S
All I need it to do is take the input text from a field and assign a string to that text when the enter key is pressed.
Okay. The code works. However, since Enter is the key I press to submit the inout, it adds a second blank line. And everytime I type something new, it adds it to the string.
I.E. Say I go and type my name as "Will" And then press enter. It outputs:
\rWill
\r
If I type something new, like "Bill" it outputs:
Will
Bill
\r
\r
And the blank just gets bigger because it keeps creating new lines.

Here is the fiddle.
http://jsfiddle.net/abhishekxi/KXyLZ/
/*check out the two keydown event handler function in the fiddle */
Type in text. Press enter. Your input goes into a String. Type text. Don't press enter. You have your old text. Press enter again. New text will be there in your String.
Hope this helps.

Add this in the conditional:
function handler(event:KeyboardEvent)
{
if(event.charCode == 13)
{
if (event.preventDefault)
{
event.preventDefault();
}
Input.toString()
myText = Input.text
trace(myText)
}
}
This will verify browser support and cancel whatever would happen when pressing Enter otherwise.

Print multiplication table of any number in an alert box in Javascript

I want to show a table (multiplication one) after taking number (as an input) from user in an alert box. But the problem is under loop, as loop runs 10 times, alert box also is shown 10 times. I've tried using id, wrote alert code outside loop but it doesn't work correctly. So is it possible to show the output in one alert box instead of showing it in 10 alert boxes? Also alert box don't seem to be interpret "br" correctly. Is there any other way of doing it?

The problem is that placing alert in a for loop will... show one alert with one number, followed by another alert with another number, etc.
You want to first create the whole body of the alert (using the for loop) and after that alert once.
<script>
function table()
{
var x=prompt("Enter a number:",2);
var alertBody = '';
for (var i=1; i<10; i++) {
alertBody += x + "*" + i +"="+x*i + '\n';
}
alert(alertBody);
}
</script>
Working example: http://jsbin.com/oVuwINa/1/edit

What about \n instead of br?
if you are doing it this way
Alert -> get input
loop and store your result
Alert -> show output
then it should be working fine

Javascript: How to remove the last character from a div or a string?

I have a div with a string of content in it. The content is not stored in a variable and I would like to remove the last character of the text in this div. Any help please?
More info:
I have a text field, and upon entering text into the text field, the text appears in a div in large writing. When the user hits the back-space key, I want the last character in the div to be deleted. I am mainly using jQuery to achieve this. Here is my code:
$(document).ready(function(){
$("#theInput").focus(); //theInput is the text field
$('#theInput').on('keypress', printKeyPress);
function printKeyPress(event)
{
//#mainn is the div to hold the text
$('#mainn').append(String.fromCharCode(event.keyCode));
if(event.keyCode ==8) //if backspace key, do below
{
$('#mainn').empty(); //my issue is located here...I think
}
}
});
I have attempted $('#mainn').text.slice(0,-1);
I have also tried storing the value of #theInput in a variable and then printing it, but that didn't work. Any ideas ?

$('#mainn').text(function (_,txt) {
return txt.slice(0, -1);
});
demo --> http://jsfiddle.net/d72ML/8/

Are u sure u want to remove only last character. What if the user press backspace from the middle of the word.. Its better to get the value from the field and replace the divs html.
On keyup
$("#div").html($("#input").val());

var string = "Hello";
var str = string.substring(0, string.length-1);
alert(str);
http://jsfiddle.net/d72ML/