Solved

Dynamically added form doesn't found in dom?

Posted on 2011-09-08
6
280 Views
Last Modified: 2012-05-12
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
Comment
Question by:dsrnu
6 Comments
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 100 total points
ID: 36508488
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
 
LVL 22

Assisted Solution

by:Ivo Stoykov
Ivo Stoykov earned 200 total points
ID: 36508506
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
 
LVL 3

Assisted Solution

by:evedder
evedder earned 100 total points
ID: 36508518
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

Author Comment

by:dsrnu
ID: 36508591
still not working..
0
 
LVL 22

Assisted Solution

by:Ivo Stoykov
Ivo Stoykov earned 200 total points
ID: 36508749
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 36509730
>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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question