CODEWITHSUNDEEP
javascriptjqueryhtml
Bad Discoverer
Bad Discoverer

Reputation: 96

When Click on cancel button i want to restore textarea to first step (Jquery)

source code => https://jsfiddle.net/z0njghgt/

I have multi rows for comments. I show every comment on another row. When I click on edit button, I add a textarea in div and set this textarea value to div value. After that I change the "edit" button to "cancel" button.

If the user is write something on this textarea and click on "cancel" button I want to restore this textarea to first step. But every row is going to be same value.

I add my source code to jsfiddle. You can see my error on this link. 

comment 99(this is id number)
<div class="dialogbox">
    <div class="body">
        <span class="tip tip-left"></span>
        <div class="message">
            <span id="99">
                <b><a href="/profil/index/1">User Name</a></b>
                <div class="comment">hello world first clck on this. after click on o other edit button. </div>
                <a style="float:right; font-size: 9px;" onclick="return false;" href="" title="">1 day ago</a><br>
                <a href="/posta/index/1">See the post</a> | <a class="edit" id="edit" onclick="return false;">Edit</a> | 
                <a href="/comment/deletecomment/99">Delete</a>
            </span>
        </div>
    </div>
</div>
<br><br>

comment 12 (this is id number)
<div class="dialogbox">
    <div class="body">
        <span class="tip tip-left"></span>
        <div class="message">
            <span id="12">
                <b><a href="/profil/index/1">User Name</a></b>
                <div class="comment">hello world</div>
                <a style="float:right; font-size: 9px;" onclick="return false;" href="" title="">1 day ago</a><br>
                <a href="/posta/index/1">See the post</a> | <a class="edit" id="edit" onclick="return false;">Edit</a> | 
                <a href="/comment/deletecomment/12">Delete</a>
            </span>
        </div>
    </div>
</div>


$(document).on("click", ".edit", function(event) {
    var obje = $(event.target).parent();
    var commentID = obje.attr("id");
    var prev = $(event.target).prev().prev().prev().prev(); 
    comment = prev.html();
    prev.html("<div><textarea class='commentval' style='width: 458px;'>"+comment+"</textarea><button class='save'>save</button></div>");
    $(event.target).removeAttr("class","edit");
    $(event.target).attr("class", "cancel");
    $(event.target).html("Cancel");
});


$(document).on("click", ".cancel", function(event) {
    $(event.target).removeAttr("class","cancel");
    $(event.target).attr("class", "edit");
    $(event.target).html("Edit");
    var prev = $(event.target).prev().prev().prev().prev();
    prev.html(comment);
});

Upvotes: 1

Views: 349

Answers (1)

Sudipta Mandal
Sudipta Mandal

Reputation: 245

$('.message').each(function(){
            var _this = this;
            var edit = $(_this).find('#edit');
            var comment = $(_this).find('.comment');
            var text;

            edit.click(function(){
                if($(this).hasClass('edit')) {
                    text = comment.html();
                    comment.html("<div><textarea class='commentval' style='width: 458px;'>"+text+"</textarea><button class='save'>save</button></div>");
                    $(this).addClass('cancel').removeClass('edit');
                    $(this).text('Cancel');
                } else {
                    $(this).text('Edit');
                    $(this).addClass('edit').removeClass('cancel');
                    comment.html(text);
                }

            });
        });

Upvotes: 1

Related Questions