CODEWITHSUNDEEP
javascriptjquery
AlwaysStudent
AlwaysStudent

Reputation: 1374

jquery edit post doesn't work

I am trying to make a edit post using jquery. But my code doesn't worked. It need to work when i click the edit button then the editMarkUp wil be put in messageB1 but it doesn't work.

Anyone can help me here what i am missing and what is the solution?

This is DEMO from jsfiddle.net

Js

$(document).ready(function() {

    $("body").on("click", ".editBtn", function() {
        var ID = $(this).attr("id");
        var currentMessage = $("#messageB" + ID + " .postInfo").html();
        var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea><button name="ok" ">Save</button><button name="cancel">Cancel</button>';
        $("#messageB" + ID + " .postInfo").html(editMarkUp);
    });
});

HTML

<div class="container">
   <div class="postAr" id="messageB1">
      <div class="postInfo">
         fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsa
      </div>
      <div class="editBtn" id="1">Edit</div>
   </div>
</div>

Upvotes: 0

Views: 51

Answers (1)

robjez
robjez

Reputation: 3788

You're not defining editobj variable anywhere in your code, and I guess you probably meant .postInfo instead: 

$(document).ready(function() {

  $("body").on("click", ".editBtn", function() {
    var ID = $(this).attr("id");
    $('.postInfo').prop('disabled', 'true');
    var currentMessage = $("#messageB" + ID + " .postInfo").html();
    var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea><button name="ok" ">Save</button><button name="cancel">Cancel</button>';
    $("#messageB" + ID + " .postInfo").html(editMarkUp);
  });
});

MODIFIED DEMO

Upvotes: 2

Related Questions