• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

Dynamically added form doesn't found in dom?

I'm trying to create a comment module that allows people to reply to comments made by others. For example, if I commented something on someone's website, someone else can reply to my comment (comments nesting).

I have the code below to dynamically add the comment form when someone clicks reply but for some reason DOM can't see it. Any ideas?
$('#add_comment').ajaxForm({
	type: 'post',
	dataType:  'json', 
	beforeSubmit: function() {

	},
	success: function(data) {
		if (data.status == 'success')
		{
			$('#comments').prepend('<table><tr><td>' + data.message + '<a href="#" id="reply">reply</a></td></tr></table><br />');
		}
	}
});

$('a#reply').live('click', function(event) {
	$(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table><tr><td></td><textarea name="comment" cols="50" rows="5" id="comment" ></textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></tr></table></form>')
	return false;
});

Open in new window

0
dsrnu
Asked:
dsrnu
5 Solutions
 
Kiran SonawaneProject LeadCommented:
If there are multiple comments, there are multiple reply with same ID. May be this causes problem to identify the dom. Ideally, dom id should be unique.
0
 
Ivo StoykovCommented:
text area is out of the cell
should be

$(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table border="1"><tr><td><textarea name="comment" cols="50" rows="5" id="comment" > </textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></td></tr></table></form>')

HTH

Ivo Stoykov
0
 
evedderCommented:
also when you create dynamic elements with jquery, you should use the .live() method instead of .click()
check the info here http://api.jquery.com/live/ it explains how it works and why dynamic created elements dont respond the same way
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
dsrnuAuthor Commented:
still not working..
0
 
Ivo StoykovCommented:
add a prompt and see what's in there, i.e.

$('a#reply').live('click', function(event) {
      $(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table><tr><td></td><textarea name="comment" cols="50" rows="5" id="comment" ></textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></tr></table></form>')
prompt('d', this.innerHTML);
      return false;
});
0
 
leakim971PluritechnicianCommented:
>still not working..

Did you understood sonawanekiran comment?
If you did not understand him, you may ask him to give you more info about the resolving
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now