如何启用/禁用JEditable

Question

解决方案

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

CODE

//Edit Note 
$(function(){ 
    function makeEditable() { 
     $(".edit").editable('ajax/save.php?editnotetext', { 
      type : 'mce', 
      submit : '<button class="save_button">Save</button>', 
      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

所以现在，按照我的想法阿尔曼建议，我做了JEdtiable仅当触发自定义事件工作。只有当我发现没有锁定时，我才会触发事件。但是现在JEditable没有被调用。我试图触发它有什么问题。 [注意JEditable不会被调用，如果，如果我有像<button onclick="$('.edit').trigger('custom_event');">Click to Edit</button>一个按钮对其进行测试]

CODE

因此，这里是我的新代码

$(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 : '<button class="save_button">Save</button>', 
     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

JEditable在这一点本身就支持这样的：

$.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

尝试解除绑定jeditable添加到元素的前一个事件（可能是dblclick），添加警报，然后在元素解锁时再次调用jeditable。

另一种解决方案是在元素锁定时添加透明的div或绝对定位的东西，并将dblclik事件与您自己的消息绑定到该传输元素。 .remove()他们当你原来的元素已被解锁。

我在代码中看到的问题是：当第一个用户dblclicks元素应用jeditable并锁定它时，并且当第二个用户dbclicks它时，您要提醒，但问题在于可jeditable已将dblclick事件应用于元素。而不是将此锁定更改为mouseenter事件，并且如果您的锁定条件成功解除绑定dblclick事件（请参见unbind），如果没有人正在编辑，则只需应用jeditable，即editText()的函数体。没有必要为它分开功能。为什么使用.live()。你有添加元素吗？

您也可以找到一些答案，你的问题在这里JQuery JEditable - How to Disable on click editing

我来到了你的解决方案看起来是这样的。

HTML文件：

<html> 
    <head> 
    <title>Lock wirh jEditable</title> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     function makeEditable() { 
      $('#editable').editable("save.php", { 
      tooltip : 'Doubleclick to edit...', 
      event : 'dblclick', 
      onblur : 'ignore', 
      callback : function(value, settings) { 
       console.log('unlocked'); 
      }, 
      'onreset' : function() { 
       console.log('unlocked'); 
       $.post('unlock.php'); 
      } 
      }); 
     }; 

     makeEditable(); 

     $('#editable input').live('focus', function() { 
      console.log('locked'); 
      $.post('lock.php'); 
     }); 

     $('#editable').hover(function() { 
      $.post('checklock.php', function(response) { 
      // 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 (response) { 
       // Option 1 
       $('#editable').editable('disable'); 
       // Option 2 
       //$('#editable').unbind('dblclick'); 
      } else { 
       // Option 1 
       $('#editable').editable('enable') 
       // Option 2 
       //makeEditable(); 
      } 
      }); 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <div id="editable">Here is the text that can be edited.</div> 
    </body> 
</html> 

LOCK.PHP

<?php 
    $fileName = 'lock.txt'; 
    file_put_contents($fileName, '1'); 
?> 

UNLOCK.PHP

<?php 
    $fileName = 'lock.txt'; 
    file_put_contents($fileName, '0'); 
?> 

CHECKLOCK.PHP

<?php 
    $fileName = 'lock.txt'; 

    $locked = file_get_contents($fileName); 
    if ($locked == '0') { 
     echo false; 
    } else { 
     echo true; 
    } 
?> 

SAVE.PHP

<?php 
    $fileName = 'lock.txt'; 
    file_put_contents($fileName, '0'); 

    echo $_POST['value']; 
?> 

LOCK.TXT（初始）

0 

你可以抓住从例子中的想法。当然，你可以做得更优雅。这是一个粗略的例子。只需在Web服务器上的相同目录中创建这些文件并复制粘贴内容，即可自行尝试。对不起，没有在线演示，jsFiddle不支持与更改状态的Ajax（至少我认为是这样）。如果您需要任何进一步的帮助，请告诉我。祝你好运。

Answer 3

这确实需要有点带班搞乱的，和安置，但它工作得很好。 这里是jQuery UI的基础代码来创建控制其自身状态的按钮和可编辑文本

function makeEditable(params){ //params excluded for now 
$("div#body").append("<button id='editTable'>Edit Table</button>"); //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. 
}