gpt4 book ai didi

javascript - 如何启用/禁用 JEditable

转载 作者:行者123 更新时间:2023-11-29 16:26:14 25 4
gpt4 key购买 nike

解决方案

感谢 Arman 的 P. 概念验证,终于让它可以在我的网站上使用了。

代码

//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"
);
});
});


更新

所以现在,按照我认为 Arman 的建议,我让 JEdtiable 仅在触发自定义事件时才起作用。仅当我发现没有锁时,我才尝试触发该事件。但现在 JEditable 没有被调用。我尝试触发它的方式有问题。 [请注意,如果我使用 <button onclick="$('.edit').trigger('custom_event');">Click to Edit</button> 之类的按钮进行测试,JEditable 确实会被调用。 ]

代码

这是我的新代码

$(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 调用的回调中没有锁定时添加该类,但这也不起作用。

如有任何建议,我们将不胜感激!

最佳答案

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

关于javascript - 如何启用/禁用 JEditable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5938511/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com