如何启用/禁用 JEditable

2024-03-06

SOLUTION

感谢 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 没有被调用。我尝试触发它的方式有问题。 [请注意,如果我使用类似按钮进行测试,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 当前正在编辑注释”。

PROBLEM

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

任何建议将不胜感激!


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")
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何启用/禁用 JEditable 的相关文章

随机推荐