[jQuery] Loading a form via ajax load and then submitting with ajax form helper not working.
I am having trouble getting a form to submit using the jquery form
helper.
I load the form with jquery load which works fine. Then if I try to
submit the form using the form helper it doesn't seem to find it. I
assume the DOM is not being reparsed for the html loaded by the ajax
call. I am sure I am just making some basic error. Below is my
javascript function, my html and the initial link which loads the form
initially. I am a javascript/jquery beginner so any help or code
examples would be very much appreciated.
---JAVASCRIPT---
//add a comment
function add_comment(CommentId) {
new jQuery('#addcomment'+CommentId).hide().load('/comments/
add_comment/'+CommentId,
{},
function() { jQuery(this).slideDown('fast'); }
);
var options = {
target: '#addcomment'+CommentId, // target element(s)
to be updated with server response
};
jQuery('#frmaddcomment'+CommentId).submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
jQuery(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
}
---HTML---
<div class="commentadd" id="addcomment0">
<img src="/images/comments.png" class="icon"><h1>Add Comments:</h1>
<form action="http://localhost/index.php/comments/add_comment"
method="post" id="frmaddcomment0">
<input type="hidden" name="CommentId" value="0" />
<label for="title">Title:</label><br />
<input type="text" name="title" value="" maxlength="255" size="43"
id="title" class="textfield" />
<label for="title">Comments:</label><br />
<textarea name="description" cols="41" rows="10" id="description"
class="textfield" ></textarea>
<input type="submit" name="submit" value="Submit Comments"
id="submit_comments" />
</form>
</div>
---INITIAL LINK---
<a href="javascript:add_comment(0)">Add New Comment</a>