SOLUTION...
Ok FINALLY figured this out... I am posting my solution here since I
have not seen it successfully posted anywhere else in my 2 days of
trying to figure this thing out. Quite surprisingly it has a very
simple solution. Initially I was trying to set the form submission
using jquerys document ready routine. This won't work, the reason is
jquery only binds document ready to the dom on the initial page load.
Since I am using a load call to load the form it only exists after
that has been called. I tried to use the livequery plugin to rebind
it but the documentation is sparse for how to use that, so I just gave
up, plus I think it can only bind to events that "bubble" and document
ready doesn't bubble. Anyway so I tried to figure out if there was
anything that would handle the form besides document ready and ended
up changing document ready to jQuery(document).click(function() { and
that seemed to work! Then since this form can be called from multiple
areas on the page, I initially thought I would have to setup a unique
target id. I couldn't ever figure out how to pass the target id into
the script so the document.click could read it. Then it hit me, I
don't need to pass the target id at all. When I load the ajax form I
just surround it in a div class called commentadd. Now a user is
probably only going to use one form at a time so this works. Anyway
below is what I did in code and I hope it helps someone. I am quite
surprised there isn't a tutorial somewhere on this since I saw quite a
few people asking but no one posted any solutions. Ayway hope this
helps someone. I know it may be simple to a lot of experts out there
but I am rather dense when it comes to javascript and jquery.
P.S. for the beginners: on the INITIAL LINK below. the 0 in
parenthesis is the id of the comment you want to add. I tried to
simplify the stuff as much as possible from my original scripts so it
would make sense. Also jQuery I used is the same as the $ you see in
many scripts.
---JAVASCRIPT---
//submit the form and return results of form submission to target
class div
jQuery(document).click(function() {
var options = {
target: '.commentadd', // target element(s) to be
updated with server response
};
// bind to the form's submit event
jQuery('#frmaddcomment').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;
});
})
//add a comment
function add_comment(CommentId) {
new jQuery('#addcomment'+CommentId).hide().load('/comments/
add_comment/'+CommentId,
{},
function() { jQuery(this).slideDown('fast'); }
);
---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" />
<p><label for="title">Title:</label><br />
<input type="text" name="title" value="" maxlength="255" size="43"
id="title" class="textfield" />
<p><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>
