Getting a value of text area that created by Ajax request

Question

I created a text area inside of a table(created by ajax request as well) and that table is inside of a div that not created by Ajax request. I am trying to get the value of that text area via Jquery but it does not work. what can be the issue ? Any help would be appriciated.

<tr>
    <td valign='middle' align='center'>
        <label id='feedbackLabel' for='feedbackText'>Feedback</label>
    </td>
    <td class='righttd' valign='middle' align='center'>
        <textarea id='feedback'></textarea>
    </td>
</tr>

$('#resultDiv').on("click", ".button", function(){
    var feedBack = $('#feedback').val();
    alert(feedBack);
});

If the jQuery code is written to the page (and therefore run) before the ajax call that ultimately renders the textarea HTML, then you've assigned a click event to an object that doesn't exist. You would need to assign the click event after the textarea HTML is rendered. — Adrian J. Moreno, Oct 08 '14 at 18:15
That's the correct syntax for getting the value of a `textarea`. Where is the markup for `#resultDiv` and the `.button` implied by the rest of the code? — jmar777, Oct 08 '14 at 18:15
i suppose the `#resultDiv` isn't in the `DOM` when you initialize your click listener. Make sure to do that after you created the textarea. — lexith, Oct 08 '14 at 18:16
@jmar777 sure. They are all in the same table that i created by Ajax request. — Tartar, Oct 08 '14 at 18:16
Given the information, there is nothing wrong with your code. The problem must be somewhere else or you are not telling us everything. — Felix Kling, Oct 08 '14 at 18:19

score 1 · Answer 1 · answered Oct 08 '14 at 18:17

1

Try adding your listener to the document element instead:

$(document).on('click', '#resultDiv .button', function(){
    var formID = this.id;
    var feedBack = $('#coordinatorFeedback').val();
    alert(feedBack);
});

answered Oct 08 '14 at 18:17

jmar777

35,010
8
60
63

2

@Tartar: If that worked, than `#resultDiv` didn't exist at the moment you tried to bind the event handler. Maybe have a look again at some of the basics: http://learn.jquery.com/events/event-basics/#extending-events-to-new-page-elements – Felix Kling Oct 08 '14 at 18:24
@FelixKling i did check that #resultDiv exists or not and i saw that it exists. I dont know what causes that problem but above solution works. – Tartar Oct 08 '14 at 18:29
2

@Tartar: Even if the element is defined in the HTML, it probably doesn't exist *at the moment* your are trying to bind the handler. If you put the event handler binding inside `$(document).ready(...)` (like the tutorial suggest), or *after* the element in the HTML source, your code probably works fine. "Proof": http://jsfiddle.net/y2myrzka/ – Felix Kling Oct 08 '14 at 18:31
@FelixKling Yes it is defined in the HTML but i dont understand that why it is not exist at the moment that i try ? – Tartar Oct 08 '14 at 18:39
1

@Tartar: See [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) for more info. – Felix Kling Oct 08 '14 at 18:41

Getting a value of text area that created by Ajax request

1 Answers1