jEditable上的Autogrow提交所有内容而不是进行AJAX调用

时间:2013-05-01 02:07:53

标签: jquery struts2 jeditable autogrow

我目前正在使用jEditable插件来编写可更新的文本。我的服务器端是使用Struts2开发的,我调用的服务器URL是返回JSON结果的struts操作。我使用以下代码将jeditable加载到我的字段(这是H1):

 $("h1.myclass").editable("/MyApp/dinamic/updateText.action", {
    indicator : "<center><img src='/MyApp/images/loading.gif'></center>",
    submit    : 'Save',
    cancel    : 'Cancel',
    tooltip   : "Click to edit",
    onblur    : "ignore",
    name      : "myField",
    callback : function(value, settings) {
            alert(JSON.stringify(value));
    }
});

正如您所看到的,在此代码中我还没有使用type : autogrow功能,到目前为止工作正常。问题是,当我添加type : autogrow时,会显示相应的文本,但是当我单击“保存”按钮时,浏览器会重定向到类似

的网址。
http://localhost:8080/MyApp/myform.action?myfield=YadaYada

其中YadaYada是我尝试保存的实际文本,而myform.action是我已经存在的页面。

有没有人知道为什么会出现这个错误? \

OBS :我也尝试使用growfield2而不是自动增长,结果是一样的。

1 个答案:

答案 0 :(得分:0)

好的,所以我不能完全确定我是否正确,但我一直在努力解决这个问题。我发现如果某些代码“略微”关闭,那么它将导致页面重新路由。我已经让autogrow工作了,我相信这对你有用:

        $.editable.addInputType('autogrow', {
            element: function (settings, original) {
                var textarea = $('<textarea />');
                if (settings.rows) {
                    textarea.attr('rows', settings.rows);
                } else {
                    textarea.height(settings.height);
                }
                if (settings.cols) {
                    textarea.attr('cols', settings.cols);
                } else {
                    textarea.width(settings.width);
                }
                $(this).append(textarea);
                return (textarea);
            },
            plugin: function (settings, original) {
                $('textarea', this).autogrow(settings.autogrow);
            }
        });

       $("h1.myclass").editable("/MyApp/dinamic/updateText.action", {
            type: "autogrow",
            indicator: "<center><img src='/MyApp/images/loading.gif'></center>",
            submit: 'Save',
            cancel: 'Cancel',
            tooltip: "Click to edit",
            onblur: "ignore",
            name: "myField",
            callback: function (value, settings) {
                alert(JSON.stringify(value));
            },
            autogrow: {
                lineHeight: 16,
                maxHeight: 512
            }
        });