[JQuery Plugin] Jeditable

本文介紹如何使用Jeditable來實作inline editing。
html source
<div id="talk_sth" >
What's on your mind?
</div>

javascript

$(function(){
//在加了event屬性後似乎會跟onblur事件有衝突。
 $("#talk_sth").editable(
   editableEventHandler, 
     {
        indicator : "",
           tooltip   : "Move mouseover to edit...",
            placeholder : "What's on your mind?",
           //event     : "mouseover",
           type      : "textarea",//編輯元素的樣式
//           submit    : "OK",//顯示ok按鈕
//           cancel    : "Cancel"//顯示cancel按鈕
           onblur : "submit"
     }

    );
});

//透過editableEventHandler處理post json data
function editableEventHandler(value, settings){
    console.log("update status:" + value);
    var endpoint = HOSTNAME + "/alfresco/service/slingshot/profile/userstatus?alf_ticket=" + TICKET;
    var requestBODY = "{'status':'" + value + "'}";
    var result = requestBODY;
    console.log(requestBODY);
    $.ajax({
     type: "POST",
     url: endpoint,
     contentType: "application/json",
     dataType: "json",
     processData: false,
     data: requestBODY, 
     success: function(data){
      alert(data);
     },
     error: function(){
      
     }
  }); 
    //important
    return value;
}

Reference:
Jeditable - Edit In Place Plugin For jQuery