Solved

Dynamically added form doesn't found in dom?

Posted on 2011-09-08
6
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…

688 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