1

I have the following jquery code:

$(document).ready(function(){
    var request_text;
    request_text = "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
    "Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val();

    $('textarea').text(request_text);

    $('#name').keyup(function() {
        $('textarea').text(request_text);
        });
    });

It works for the document.ready part but not for the keyup. I thought it was a scope problem but I can't seem to get it to work.

If I do the following it works:

 $('#name').keyup(function() {
        request_text = "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
        "Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val();
        $('textarea').text(request_text);
        });

but I don't want to repeat code.

Any ideas?

3
  • What does "does not work" mean? Commented Sep 12, 2011 at 7:04
  • I enter text in the name field and the name does not get updated in the text area. Commented Sep 12, 2011 at 7:42
  • Thanks very much for all for all of the answers they really help a NOOB a lot. Commented Sep 12, 2011 at 7:43

7 Answers 7

2

Of course you have to include the generation of the request_text string in the keyup handler -- how do you expect the contents of the textarea to change otherwise?

As for not repeating code: you don't really need all that outside the keyup handler. You can do it this way:

$(document).ready(function(){
    $('#name').keyup(function() {
        var request_text = "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
        "Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val();

        $('textarea').text(request_text);
    }).keyup();
});

Notice how all the logic is now inside the keyup handler, and how just after the handler is set we 're triggering it on the spot with .keyup() so that the textarea gets its "initial" value before the user actually presses any key.

Apart from the above solution (which one could say it's idiomatic jQuery and not applicable everywhere), there is also the general one: when you don't want to repeat code, write a function!

$(document).ready(function(){
    var setRequestText = function() {
        var request_text;
        request_text = "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
        "Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val();
        $('textarea').text(request_text);
    };

    setRequestText();
    $('#name').keyup(setRequestText);
});
Sign up to request clarification or add additional context in comments.

Comments

1

try this

$(document).ready(function(){

        $('textarea').text(test());

    $('#name').keyup(function() {
        $('textarea').text(test());
        });
    });



function test(){


    var request_text;
    request_text = "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
    "Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val();


return request_text;


}

Comments

0

I think putting the line :

  var request_text;

before line :

  $(document).ready(function(){

would solve the problem, which is defining the variable in global scope :)

1 Comment

This has nothing to do with it.
0

It's not a scope problem. The code in $(document).ready is run once, at page load time. It isn't a function.

Comments

0

If by not work you mean that the $('#name').val() portion isn't changing, you can wrap the request_text generation line into a lambda.

var request_text = function() { return "Hello my name is " + $('#name').val() + ", and I would like to join the birthday surprise for <%= get_current_board.bp_name.capitalize %>.\n\n" +
"Could you please send me an invitation so that I can participate.\n\nThank you very much. \n\n" + $('#name').val(); }

$('textarea').text(request_text());

$('#name').keyup(function() {
    $('textarea').text(request_text());
});

Comments

0

There are multiple ways of making a variable global:

  1. Don't use the var keyword before the declaration. This works anywhere.
  2. Declare your variable outside any functions.
  3. Declare your variable using window.VARNAME. All global variables are by default part of the window object.that should make it a global variable

So in your example, you can do one of the following

  1. Do as Ahmed Hajjar suggested
  2. Drop the var from the declaration
  3. Use window.request_text as the variable name

Comments

0

You need to update the value of request_text variable inside your keyup function. Here's a demo.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.