Question

我刚刚将Jeditable插件添加到我的网站。该插件可在此处获得： http://www.appelsiini.net/projects/jeditable

一切正常但我使用“loadurl”参数加载文本进行编辑，我希望在加载文本时显示一些文字或图像。

我在默认设置中看到“loadtext”参数，据我所知，当我点击文本进行编辑时，应显示“正在加载...”。不幸的是，我没有看到任何东西。

    $.fn.editable.defaults = {
    loadtext   : 'Loading...', //Text to display while loading external content.
...
...
    };

当文本加载到textarea时，如何从“indicator”参数显示“loadtext”或图像？

谢谢。

Answer 1

我使用ajaxSend和ajaxStop来检测是否存在对加载网址的ajax调用，如果是，则隐藏/显示加载标签。

<强> HTML：

<div id="editable">select me</div>
<span id="loading">Loading dropdown..</span>

<强> JS：

var load_url = 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value';

 $('#editable').editable('/Project/UpdatePerson', {
        loadurl: load_url,
        type: 'select',
        loadtext: '<b>Loading Dropdown..." /></b>',
        indicator: '<b>Saving...',
        submit: 'OK',
        callback : function(value, settings) {
            var json = $.parseJSON(value);
            $(this).text(json.Value);

        }
    });

$(document).ajaxSend(function(r,s,t) {
    if($.trim(t.url)==load_url+"?id=editable")
     $('#loading').show();
 });

$(document).ajaxStop(function(r,s) {
   if($('#loading').is(':visible'))
   $('#loading').hide();
});

这是Updated DEMO

Answer 2

在新的jquery中弃用的同步调用，我创建快速修复 - github fork

样品

    $('.editable').editable('/Project/UpdatePerson', {
        loadurl: '/list/',
        indicator:'<div>loading...</div>',
        type: 'select',

        submit: 'OK',
        callback: function (value, settings) {
            var json = $.parseJSON(value);
            $(this).text(json.Value);
        }
    });

Answer 3

在理解了jeditable插件之后，我发现了一些奇怪的东西（即;使用ajax调用从服务器中提取数据）。 DEMO URL 这里是ajax调用，它们在jeditable插件中使用，

$.ajax({
         type : settings.loadtype,
         url  : settings.loadurl,
         data : loaddata,
         async : false,
         success: function(result) {
            window.clearTimeout(t);
            input_content = result;
            input.disabled = false;
         }
});

在上面的ajax调用中，他们使用了async : false选项。这意味着Ajax调用默认情况下，所有请求都是异步发送的（即默认情况下设置为true）。但在这种情况下，异步是错误的。所以它是同步请求。这是解释What does "async: false" do in jQuery.ajax()?

In short, synchronous requests block the execution of code which creates 
"freezing" on the screen and an unresponsive user experience.

<强>解决方案：

评论async : false选项。您可以在第224行http://pastebin.com/x8QA4a1v

找到异步选项

更新：使用此更改上述ajax代码，

$.ajax({
      type : settings.loadtype,
      url  : settings.loadurl,
      data : loaddata,
      //async : false,
      success: function(result) {
         window.clearTimeout(t);
        content.apply(form, [result, settings, self]);
         input_content = result;
         input.disabled = false;
      }
});

什么是Jeditable中的“loadtext”参数（为jQuery编辑就地插件）

3 个答案: