如何启用/禁用JEditable

解

感谢Arman的P.概念certificate，终于让它与我的网站一起工作了。

码

//Edit Note $(function(){ function makeEditable() { $(".edit").editable('ajax/save.php?editnotetext', { type : 'mce', submit : 'Save', event: 'dblclick', indicator : 'Saving...', tooltip : 'Doubleclick to edit...', onblur: 'ignore', width : '700px', height : '100px', callback : function(value, settings){ console.log('unlocked'); $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')}); $(this).effect("highlight", {}, 3000); $(this).parents('.panel').effect("highlight", {}, 3000); }, 'onreset' : function(){ console.log('unlocked'); $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')}); } }); }; makeEditable(); $('.edit').live('click', function() { console.log('locked'); $.post('ajax/save.php?locknotetext', {"id" : $(this).attr('id')}); }); $(".edit").click(function() { $.post('ajax/save.php?checklock', {"id" : $(this).attr('id')}, function(data) { // USE SAME OPTION IN BOTH PLACES // IF YOU USE 1ST OPTION, YOU CAN TAKE JEDITABLE OUT OF makeEditable() and do everything without that function if (data[0].is_locked == 1) { // Option 1 //$(this).editable('disable'); //alert(data[0].username.toUpperCase() + " is editing this note!"); // Option 2 $(".edit").unbind('dblclick'); } else { // Option 1 //$(this).editable('enable') // Option 2 makeEditable(); } }, "json" ); }); }); 

---

UPDATE

所以现在，根据我认为Arman的建议，如果触发自定义事件，我只能使JEdtiable工作。 我只是在找不到锁定时才试图触发事件。 但是现在JEditable没有被调用。 我试图触发它的方式有问题。 [请注意，如果我使用Click to Edit等Click to Edit测试它，则会调用JEditable Click to Edit ]

码

所以这是我的新代码

 $(function(){ $(".edit").bind("dblclick",function() { $.ajax({ // first check to see if locked type: "POST", url: "ajax/save.php?locknotetext", data: {"id" : $(this).attr('id')}, dataType: "json", success: function(data){ if (data[0].is_locked == 1){ // if locked then alert someone is editing ntoe alert(data[0].username.toUpperCase() + " is editing this note!"); } else{ $(this).trigger('custom_event'); $(this).unbind('custom_event.editable'); } } }); //close $.ajax( }); }); 

这是JEditable的作品

 $(function(){ $(".edit").editable('ajax/save.php?editnotetext', { type : 'mce', submit : 'Save', event: 'custom_event', indicator : 'Saving...', tooltip : 'Doubleclick to edit...', onblur: 'ignore', width : '700px', height : '100px', callback : function(value, settings){ console.log(this, value, settings); $(this).effect("highlight", {}, 3000); $(this).parents('.panel').effect("highlight", {}, 3000); $.ajax({ type: "POST", url: "ajax/save.php?unlocknotetext", data: {"id" : $(this).attr('id')} }); //close $.ajax( //$(this).addClass("edit"); } // }, // function(value, settings) { // $(this).unbind('settings.event'); }); }); 

---

背景

我正在创建一个人们可以共享和编辑笔记的网站。 我想要做的是，如果某人正在编辑一个笔记，则该笔记会被锁定，以便其他用户无法编辑该笔记。

我正在使用JEditable。 用户可以双击以编辑注释。

如果用户双击，我会进行AJAX调用以查看注释中是否存在锁定。 如果没有，则我锁定注释，用户可以编辑。 如果有锁定，我会提醒用户“userX当前正在编辑注释”。

问题

我的问题是我只想在没有锁的情况下调用JEditable。 否则，我只想提醒用户其他人正在编辑它。 我在下面的代码中遇到的问题是无论如何都会调用JEditable。 我也尝试使用另一个类名进行可编辑，只有在第一次AJAX调用的回调中没有锁时才添加类，但这也不起作用。

我们欢迎所有的建议！

Answer 1

JEdi​​table在这一点原生支持：

 $.fn.editable = function(target, options) { if ('disable' == target) { $(this).data('disabled.editable', true); return; } if ('enable' == target) { $(this).data('disabled.editable', false); return; } 

这似乎有效：

 $(...).editable("disable") $(...).editable("enable") 

Answer 2

尝试取消绑定以前的事件（可能是dblclick），jeditable添加到元素，添加自己的警报，然后当元素解锁时再次调用jeditable。

另一个解决方案是在元素被锁定时添加透明div或者在元素上具有绝对定位的东西，并将dblclik事件与您自己的消息绑定到该透明元素。 当你的原始元素被解锁时.remove()它们。

我在你的代码中看到的问题是：当第一个用户dblclicks元素你应用jeditable并锁定它时，当第二个用户dbclicks它你想要提醒时，但问题是jeditable已经将dblclick事件应用于元素。 而不是这个更改你的锁定到mouseenter事件的检查，如果你的锁定条件成功unbind dblclick事件（参见unbind ），如果没有人编辑只需应用jeditable， editText()的函数体。 没有必要具备单独的function。 为什么要使用.live() 。 你有dinamically添加元素？

你可以在这里找到你的问题的一些答案JQuery JEditable – 如何禁用点击编辑

我找到的解决方案看起来像这样。

HTML文件：

          
Here is the text that can be edited.
   

LOCK.PHP

UNLOCK.PHP

CHECKLOCK.PHP

SAVE.PHP

LOCK.TXT（初始）

 0 

您可以从示例中获取想法。 当然，你可以更优雅地做到这一点。 这是一个粗略的例子。 您可以通过在Web服务器上的同一目录中创建这些文件并复制粘贴内容来自行尝试。 很抱歉没有在线演示，jsFiddle不支持带变化状态的ajax（至少我是这么认为的）。 如果您需要任何进一步的帮助，请告诉我。 祝好运。

Answer 3

这确实需要对类和放置有点混乱，但它运行良好。 这是基于jquery UI的代码，用于创建控制其自身状态和可编辑文本状态的按钮

 function makeEditable(params){ //params excluded for now $("div#body").append("Edit Table"); //inserts a button into a div $("div#body button#editTable").button({icons: {primary:'ui-icon-pencil'}}); //creates button $("div#body button#editTable").unbind(); //removes all listeners $("div#body button#editTable").hover( //sets hover behaviour function(event){ //over $(this).addClass("ui-state-hover"); }, function(event){ //over $(this).removeClass("ui-state-hover"); } ); //uses a class called editText which is assigned to the td elements of the blocks you want to make editable $("div#body table .editText").editable("http://www.blah.com/Controller/CEditTable.php", { indicator : 'Saving...', tooltip : 'Click to edit...' }); //basic editable initialization $("div#body table .editText").editable("disable"); //disables by default //adds a toggle to the button which enables/disables the editable functionality $("div#body button#editTable").toggle( function(event){ $("button#editTable").removeClass("ui-state-default"); $("button#editTable").addClass("ui-state-active"); $("div#body table .editText").editable("enable"); }, function(event){ $("button#editTable").removeClass("ui-state-active"); $("button#editTable").addClass("ui-state-default"); $("div#body table .editText").editable("disable"); } ); $("div#body button#editTable").appendTo("div#body div#tableControls"); //move button to wherever to want it. }