Jquery and dynamic content

Question

I have the following HTML code:

<div id="summary_form">
    <textarea class="summary">Please fill in</textarea><br/>
    <textarea class="summary">Please fill in</textarea><br/>
   <div>

And I have the following JS code that is called on document.ready:

var summaries = $('textArea.summary');

This JS grabs all textareas with the class name 'summary' and stores it in the summaries variable.

I also have a link that when users click on it, will dynamically add another textarea with the 'summary' class name using Ajax, as follows:

$("#add_summary").click(function(){  
  $('#temp').load("/addSummary.html", function() {
  $("#summary_form").append($('#temp').html());
  summaries = $('textArea.summary');
});

The addSummary.html simply contains the following HTML:

<textarea class="summary">Please fill in</textarea><br/>

When the form is submitted, I am running the following code to clear the textareas of the "Please fill in" helper text as follows:

$("#user-form").submit(function () {
 //First reload all old and new textareas into summary variable - THIS PART IS NOT WORKING!
 summaries = $('textArea.work_history_summary');

 for (var i=0; i<summaries.length; i++)
    {
      if (summaries[i].value == 'Please fill in')
      {   
        summaries[i].value = '';
      }
    }
 });

But when the form submits, all the original textareas are cleared, but the newly added textareas are not. For some reason, JQuery is not able to see the new textareas and store them in the summary variable.

Any idea what I may be doing wrong?

Thanks!

Where is the code using it? remember that .load()'s callback runs later when the response comes back. — Nick Craver
– Nick Craver, Commented Dec 21, 2010 at 10:16

Michael Sagalovich · Accepted Answer · 2010-12-21 11:07:06Z

1

Is it possible that what you load is a bit different - not textArea, or not summary? Just by mistake?

Additionally, consider using $.ajax() method:

$.ajax({
    url: '/addSummary',
    success: function(response) {
        $('#summary_form').append(response);
        summaries = $('textArea.summary');
    }
});

This way you will not need any temporary storage, but will be able to append obtained html directly to you form. Maybe this will also fix your issue. (I could be a bit wrong with the parameter names or function arguments order, but you have got the main idea, have not you?)

answered Dec 21, 2010 at 11:07

Michael Sagalovich

2,54919 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Jquery and dynamic content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related