[jQuery] Displaying same input box
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>
<div id="slickbox">Show div</div>
Text underneath
<a href="#" id="reply-box">Reply</a>
Comment text 1
<a href="#" id="reply-box">Reply</a>
Comment text 2
</body>
</html>
Best regards,
Merlin