Using Javascript/jQuery to trigger event when textarea rendered

Question

I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.

Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:

onchange="$('dynamicParagraphId').text($(this).val());"

Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.

Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?

Nope. You have to know something about the textarea to select it, such as it's parent, a sibling, it's id or class, any of it's attributes that are unique to the textarea, etc. — user400654
– user400654, Commented May 20, 2013 at 19:26
Did you try $('textarea')? You will then have all textareas on the page and can go from there... — crackmigg
– crackmigg, Commented May 20, 2013 at 19:28
You are binding to these events directly from the markup? Use the same function in 'onload'. — Malk
– Malk, Commented May 20, 2013 at 19:29

Malk · Accepted Answer · 2013-05-20 19:56:32Z

1

Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:

$(document).ready(function(){
  $("textarea").keyup();
});

Or if you can only attach functions through inline markup for some reason you can add it to the <body>:

<body onload='$("textarea").keyup()'>

answered May 20, 2013 at 19:56

Malk

12k4 gold badges35 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Junk · Accepted Answer · 2013-05-20 19:30:04Z

0

If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:

document.getElementsByTagName("textarea");

and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside. http://jsfiddle.net/FExQy/

answered May 20, 2013 at 19:30

Thomas Junk

5,6962 gold badges34 silver badges48 bronze badges

2 Comments

BlairHippo Over a year ago

Okay, so I CAN give all the textareas I want to behave this way the same class. But then the problem becomes, how do I find the ID of the paragraph I want that textarea to be tied to? Is there some way to wildcard the class -- ie, give each textarea a class of "tied-to-paragraph-[PARAGRAPH_ID]", and then get every textarea with a class that begins "tied-to-paragraph-"?

Matt Berkowitz Over a year ago

No. I'd set a data-attribute and pull from there <textarea data-paragraph="paragraph"></textarea> then you can use $('textarea[data-paragraph]') to get all the textareas that are linked to paragraphs and .data('paragraph') to get the value stored for a specific one

Collectives™ on Stack Overflow

Using Javascript/jQuery to trigger event when textarea rendered

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related