Hello Adrian,
I tried your code but on click of the button there is absolutly
nothing happening?! I also tried to locate the potential error, but my
JQuery knowledge is limited so far.
Regards,
Merlin
On Oct 26, 1:30 pm, Adrian Lynch <[EMAIL PROTECTED]> wrote:
> 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
