How to write this JavaScript?

Question

If you take a look on this post, you will see that there is a "add comment" link below it. When I click on it, a textarea will be added and allow user to write comment.

I am wondering how I can write a similar function?

Updated

Thank you everyone for your help.

I made a working code. However, if it is running with Google Chrome, I will get a terrible lag. I have to wait about 15 seconds to get the textarea out.

But if I run it with IE, then no problem at all... That is a very strange issue.

Here is my code for the JavaScript function

function testCall(id) {

var divName = "#Post-Number-" + id;

var appenedDiv = "<div class='container2' id='r1'>";
appenedDiv+="<div class='acc_container'>";
appenedDiv+=" <div class='block'>";
appenedDiv += "<form method='post' action='' id='loginForm' name='loginForm'>";
appenedDiv+="<p>My Reply:</p>";
appenedDiv+="<p>";
appenedDiv += "<textarea id='test' name='txtReply' cols='8' rows='10'></textarea>";
appenedDiv += id;
appenedDiv+="</p>";
appenedDiv+="<p>";
//appenedDiv+="<%= Html.ActionLink('Submit Reply', 'Login', 'User', new { returnUrl = Request.Url }, new { @class = 'linkButton' })%>";
appenedDiv+="</p>";
appenedDiv+="</form>";
appenedDiv+="</div>";
appenedDiv+="</div>";
appenedDiv += "</div>";

$(divName).after(appenedDiv);
$('html, body').animate({ scrollTop: $('#r1').offset().top }, 100);
//$('#test').focus();

}

Here is how I call this function

<a href="#" onclick="testCall(<%:item.QAID %>);">Test</a>

This does not require using jQuery or any other framework/library. Although, those can be helpful. — Jared Farrish
– Jared Farrish, Commented Jun 26, 2011 at 4:56
The reason I say that is because looking into a library will just make your life easier. You can do this in one line using jquery. — Jess
– Jess, Commented Jun 26, 2011 at 5:18

Jared Farrish · Accepted Answer · 2011-06-26 05:18:10Z

1

Simple example: http://jsfiddle.net/zBUgZ/

<a onclick="addComment(this)">add comment</a>

function addComment(el){
    var t = document.createElement('textarea');
    document.body.appendChild(t);
    el.style.display = 'none';
}

Using jQuery: http://jsfiddle.net/zBUgZ/1/

<a class="addcomment">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment"></textarea>').hide();
});

EDIT

Since it's more likely that the ANCHOR will have a HREF attribute, you should also return false:

<a class="addcomment" href="http://somelink.somewhere.com">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment"></textarea>').hide();
    return false;
});

And if you want to set an ID on the TEXTAREA, you might use one based on the ANCHOR:

<a id="addcomment1" class="addcomment" href="http://somelink.somewhere.com">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment" id="'+this.id+'-textarea"></textarea>').hide();
    return false;
});

http://jsfiddle.net/zBUgZ/2/

EDIT 2

And, noting that you're trying to focus on the element, you can do this if you add an ID to the TEXTAREA:

Plain Javascript:

document.getElementById(this.id+'-textarea').focus();

jQuery:

$('#'+this.id+'-textarea').trigger('focus');

http://jsfiddle.net/zBUgZ/4/

edited Jun 26, 2011 at 5:18

answered Jun 26, 2011 at 4:56

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HorseKing Over a year ago

hi Jared Farrish, what if I have several links and have different ID? what should I do with the onclick event?

Jared Farrish Over a year ago

You mean the links have the ID? I would use a class to add the event handler. What do you want to do with the ID?

Nitesh · Accepted Answer · 2011-06-26 04:54:43Z

1

You can call a jQuery function on the click of "Add Comment" link. In the function, you can do two things:

Show a hidden div that contains the textarea.
Append a textarea to the calling div to the innerHTML property.

answered Jun 26, 2011 at 4:54

Nitesh

2,3532 gold badges44 silver badges72 bronze badges

5 Comments

HorseKing Over a year ago

I was trying the second method. I append the textarea to the end of my current div. It is not inside current div, but right under it. The text area shows, but I lost the focus. The page goes all the way to the top, but it supposes to set focus on the text area...

Nitesh Over a year ago

just append the textarea with an id and after appending set the focus to the id..hope that helps

Nitesh Over a year ago

Can't you try the 1st option..I generally use the 1st one...its sort of very easy to use.

HorseKing Over a year ago

the first one is easy.. but I am actually building a forum style project. If there is 100 reply, then I have to use 100 hidden div, which will be crazy...

Nitesh Over a year ago

You can use the "Edit 2" provided by Jared above..Thats the way you can set the focus.

matchew · Accepted Answer · 2011-06-26 05:28:57Z

1

I suppose some validation would be in order to make this identical to the stack overflow addComment box.

http://jsfiddle.net/CKzsn/

HTML

<div id="container">
    <a href="#" title="Add comment" class='addComment'>Add Comment</a>
    <div class="hide">
        <textarea id="commentBox"></textarea>
        <button> Submit </button>
    </div>
</div>

Jquery

$('.addComment').click(function(e) {
    e.preventDefault();
    $(this).fadeOut();
    $(this).next('div').slideToggle();   

}); 

$('button').click(function() {
    $('.hide').fadeOut();
    var text = $('#commentBox').val();
    $('.addComment').fadeIn();
    $('<div class="comment">' + text + '</div>').insertBefore('.addComment');

});

edited Jun 26, 2011 at 5:28

answered Jun 26, 2011 at 5:10

matchew

19.8k5 gold badges46 silver badges48 bronze badges

4 Comments

Jared Farrish Over a year ago

Your's "will actually function" eh?

matchew Over a year ago

of course it needs some method to be saved server side. I think that is rather obvious. But yes. this will function.

Jared Farrish Over a year ago

"difference between mine and the accepted answer is that mine will actually function." I guess you could explain what you mean if you're going to say things like that. ;)

matchew Over a year ago

I guess, that could come off a bit improper. I'll remove that for you =)

Collectives™ on Stack Overflow

How to write this JavaScript?

3 Answers 3

2 Comments

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related