What is "loadtext" parameter in Jeditable (edit in place plugin for jQuery)

Question

I just added Jeditable plugin to my website. The plugin is available here: http://www.appelsiini.net/projects/jeditable

Everything works fine but I use "loadurl" parameter to load text for editing and I would like to display some text or image while text is loading.

I see the "loadtext" parameter in the defaults and as I understand "Loading..." should be displayed when I click on the text to edit it. Unfortunately, I don't see anything.

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

How can I display "loadtext" or image from "indicator" parameter while text is loading into textarea?

Thank you.

Answer 1

I got it to work using ajaxSend and ajaxStop to detect if there is an ajax call to the load url , if so then hide/show the loading label.

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();
});

This is an Updated DEMO

Answer 2

sync call deprecated in new jquery, i create fast fix - github fork

sample

    $('.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

After understand the jeditable plugin, I found the some strange thing (i.e; To pull the data from the server using ajax call). DEMO URL Here the ajax call they are used in jeditable plugin,

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

In the above ajax call they are used async : false option. It means Ajax Call By default, all requests are sent asynchronously (i.e. this is set to true by default). But in this case asynchronous is false. So it is synchronous request. Here is explanation 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. 

Solution:

Comment async : false option. You can find the async option at line 224 http://pastebin.com/x8QA4a1v

Update: Change the above ajax code with this,

$.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;
      }
});