How about creating the form once and moving it to where ever it's
needed. Something like this:
<script type="text/javascript">
var replyForm = $('<div id="replyForm"></div>');
$(document).ready(function() {
replyForm.append($('<textarea id="replyText"></textarea>'));
replyForm.append($('<input type="button" value="SAVE"
id="saveReply" /> OR <input type="button" value="CANCEL"
id="cancelReply" />'));
$(".reply").click(showReplyForm);
// We haven't injected the form into the DOM yet so we give a
reference to where out form is
$("#cancelReply", replyForm).click(cancelReply);
$("#saveReply", replyForm).click(saveReply);
});
function showReplyForm() {
var buttonPressed = $(this)
// Show any that might be hidding, they'll usually be one
$(".reply").show();
// Get the text from the message. There's bound to be a better
way
to do this!
var messageText =
buttonPressed.parent().find(".messageText").text();
$("#replyText", replyForm).text(messageText);
replyForm.insertAfter(buttonPressed);
replyForm.show();
buttonPressed.hide();
}
function cancelReply() {
$(replyForm).hide();
$(".reply").show();
}
function saveReply() {
alert("Saving...");
}
</script>
<div class="message">
<div class="messageText">This is message one</div>
<button class="reply">Reply to message 1</button>
</div>
<div class="message">
<div class="messageText">This is message two</div>
<button class="reply">Reply to message 2</button>
</div>
Any good?
Adrian
On Oct 26, 7:53 am, Merlin <[EMAIL PROTECTED]> wrote:
> Hello everybody,
>
> I am new to jquery and do currently try to add a reply field to each
> of many user comments under a picture.
>
> Therefore I have create a function in jquery that displays a html form
> with a save and cancel button.
> My goal is now to show this form whenever someone clicks on one of the
> many reply buttons. Somehow I have a problem with the object and the
> code does not work. I hope to get a bit starting help inside this
> group. Thank you for any help.
>
> Here is the code:
>
> <html>
> <head>
> <script src="/app_global/jquery-1.2.1.pack.js" type="text/
> javascript"></script>
> <script type="text/javascript">
> $(document).ready(function() {
> $('#slickbox').hide();
>
> $('a#reply-box').click(function() {
> var textarea = '<div><textarea rows="4"
> cols="60">'+$(this).html()
> +'</textarea>';
> var button = '<div><input type="button"
> value="SAVE"
> class="saveButton" /> OR <input type="button" value="CANCEL"
> class="cancelButton" /></div></div>';
> var revert = $(obj).html();
> $(obj).after(textarea+button).remove();
> $('.saveButton').click(function(){saveChanges(this,
> false, i);});
> $('.cancelButton').click(function(){saveChanges(this,
> revert,
> i);});
> });
>
> $('a#slick-down').click(function() {
> $('#slickbox').toggle('slow');
> return false;
> });
>
> });
>
> </script>
> </head>
> <body>
> <a href="#" id="slick-down">Show test div</a><br>
> <div id="slickbox"><p>Show div</div>
> Text underneath<br>
> <a href="#" id="reply-box">Reply</a><br>
> Comment text 1<br>
> <a href="#" id="reply-box">Reply</a><br>
> Comment text 2<br>
> </body>
> </html>
>
> Best regards,
>
> Merlin
