标签: jeditable

我正在使用jQuery UI sortable交互和Jeditable。用户可以重新排序元素并影响这些元素的内容。我onblur event遇到的是jQuery可排序侦听器吞没了我要监听的Jeditable设置。

用户可以单击Jeditable元素，然后该元素变为可编辑状态，但是如果单击了li可排序元素，则单击该按钮时，onblur事件将被忽略。如果他们在外部单击，则不会忽略该事件li。当它们在内部单击时，如何使Jeditable知道模糊事件li？

这是一个说明问题的jsFiddle

HTML标记

<ul class="elementlist">
    <li id="elementSk_10">
        <span class="editable-element" id="10">TEXT!</span>
    </li>
    <li id="elementSk_33">
        <span class="editable-element" id="33">Some text</span>
    </li>
</ul>

可编辑的

$('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', {
    onblur: 'submit',
    width: 250,
    indicator: 'Saving...'
});

jQuery UI可排序

$(".elementlist").sortable({
    update: function(event, ui) {
        var elementSerialized = $(this).sortable('serialize');
        $.post('http://jsfiddle.net/echo/jsonp/', {
            elementSk: $(this).sortable('serialize')
        });
    }
});?

编辑：为了弄清楚正在发生的事情，让我逐步给出带有屏幕截图的演练。

1. 请点击 Some Text
2. 点击li包含TEXT!
3. 释放点击 TEXT!

目前，我还没有重新排序任何东西。单击li和释放并没有触发 …

我使用jEditable,我想知道,如果,如果有可能有一个选择(类型=选择)与optgroups？

我的代码是:

$(document).ready(function() {
            $('.post_title').editable('editposttitle.php', {
                cancel    : 'Cancel',
                        submit    : 'OK',
                indicator : 'Saving...',
            });
        });

保存文本时,文本"点击编辑"会插入到我的元素中吗？而不是保存的文字？

有任何想法吗？

谢谢!

这是Jeditable的延续 :如何根据dom元素属性设置参数

请在这里回复..这是我的'真实'账户..

我正在尝试将不同的参数值分配给我已启用jQuery插件'Jeditable'的不同div.我不能让它工作,我确信它的东西很简单..但我无法弄清楚..

我如何实现它？

给出以下DOM元素:

<div class="editme" id="theone" rel="test"></div>

这些不同的片段为上面的空div生成以下dafault占位符文本:

$('.editme').editable('savedata.php',{
    placeholder : "txt -  "+$(this),
    }   
);
// outputs: "txt -  [object Object]"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+this,
}   
);
// outputs: "txt - [object HTMLDocument]"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+$(this).html(),
}   
);
// outputs: "txt - undefined"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+$(this).attr('rel'),
}   
);
// outputs: "txt - undefined"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+this.attr('rel'),
}   
);
// outputs: "" (NULL / …

我看到很多谷歌帖子,但似乎所有人都在谈论这是如何进行的.有没有人知道一起工作的可编辑和自动完成功能的工作版本,所以我可以点击文本并获得一个文本框,并具有针对该文本框的自动完成功能

编辑:我打开一个赏金,因为它似乎仍然没有这些解决方案复制堆栈溢出标签+ jeditable我可以使用jeditable点击文本后得到一个可编辑的texbox然后能够输入一个逗号分隔列表自动完成每个输入为i类型(类似于在堆栈溢出中输入标记).

我在使用jeditable的IE中看到非常糟糕的页面设置时间.

该页面有一个表格,其中每行有13个span元素,jeditable应用于这些元素,如下所示:

$(document).ready(function() { 
    $('#entry_pl span.ples').editable('my_xhr.php', {
            placeholder: '<span class="placeholder">unset</span>',
            indicator: '<img src="indicator.gif" class="indi">',
            data: function(value, settings) {
                return  $('<span />').html(value).text();
            }
        });
});

功能很棒 - 一切正常.但是在IE 6 ... 8中,上面的代码每个表行需要半秒钟.因此,对于10行表,页面设置延迟已经很糟糕了.用户不会对此感到满意.WebKit和Firefox中的设置延迟可以忽略不计.

有什么想法或建议吗？

我还没有开始审查或分析可执行的可编辑代码.

而且我想可能只在单击元素时调用元素上的.jeditable()而不是$(document).ready()中的所有元素.

我正在使用jquery-ui的draragable进行拖放,并且可以进行内联编辑.

当我拖放一个也可编辑的元素时,在它被删除之后立即开始并弹出"编辑模式".

如何禁用此行为？

编辑 - 由于netsting而发生问题 - 请参阅此示例.我还添加了draggable混合,使示例更加真实(实际的真正问题是在我正在处理的这个网站)

注意 - 即使这个问题由于赏金规则而得到了接受的答案,但问题仍未解决.

只要用户点击ENTER退出输入,我的jEditables就可以正常工作.但是,如果用户点击TAB,则不会发布更改.这是正确且记录在案的行为.

我希望TAB像ENTER一样工作.我不需要影响任何其他jEditables,只需让当前活动的jEditables回复,就好像ENTER被击中一样.

有没有办法做到这一点,没有将keydown处理程序绑定到jEditable控件？

如果我必须提供一个keydown处理程序,有没有办法以编程方式告诉jEditable控件发布自己而不从控件中提取id和值？

我正在使用JEditable jquery插件来更新我的网页上的一些数据.通过服务器上的JEditable插件保存数据后,我想用新的内容替换容器div中的旧内容,实际上与插入的数据不同(应用程序在保存之前处理了数据并添加了一些更多信息它).

我已经尝试过以下代码来做同样的事情,它第一次工作但是一旦在容器div中替换了数据,就会丢失可编辑的功能.

$(".editableComments").editable( function(value, settings) {
            selectedId = $(this).attr("id");
            $.ajax({
                url:'ajaxApproveRequests',
                type:'post',
                data:{
                        requestType: "Trans",
                        idList : $(this).attr("id"),
                        comment:  value
                    },
                success: function(data) {
                    if (data != "Error")
                        {
                            $("#"+selectedId).html(data);
                        }
                },
                error: function(req) {
                    alert("Error in request. Please try again later.");
                }
            });
        },
        {
            indicator : "Saving...",
            type   : 'textarea',
            submit : '<input type="button" id="okBtn" value="Ok" onMouseOver="rollOnAutoButton(this)" onMouseOut="rollOffAutoButton(this)" class="autobtn" >',
            cancel : '<input type="button" id="cancelBtn"  value="Cancel" onMouseOver="rollOnAutoButton(this)" onMouseOut="rollOffAutoButton(this)" class="autobtn" >',
            cssclass : "editableArea",
            rows: 5,
            cols: 25, …

我知道我可以使用像这样的css文件设置Jeditable创建的"Ok"和"Cancel"按钮:

form.editable > button {
color : #F00
}

我希望Jeditable使用现有的Bootstrap类btn btn-danger和btn btn-success.

我知道我可以将CSS从bootstrap复制并粘贴到我的自定义css文件中,但这看起来很恶心.

这样做的正确方法是什么？我没有取得太大的成功,并且阅读了可编辑的文档,但解决方案对我来说并不明显.