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

所以现在，根据我认为Arman的建议，我认为只有触发自定义事件才能使JEdtiable工作。我只是在找不到锁定时才试图触发事件。但现在JEditable没有被召唤。我试图触发它的方式有些不对劲。 [请注意，如果我使用<button onclick="$('.edit').trigger('custom_event');">Click to Edit</button>]

之类的按钮对其进行测试，则会调用JEditable

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，{{1}的函数体}。没有必要为它分离功能。为什么要使用editText()。你有dinamically添加元素？

您也可以在JQuery JEditable - How to Disable on click editing

找到问题的一些答案

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

HTML文件：

.live()

LOCK.PHP

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

UNLOCK.PHP

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

CHECKLOCK.PHP

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

SAVE.PHP

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

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

LOCK.TXT（初始）

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

  echo $_POST['value'];
?>

您可以从示例中获取想法。当然，你可以更优雅地做到这一点。这是一个粗略的例子。您可以通过在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.
}

如何启用/禁用JEditable

3 个答案: