It seems like loadtext property in jeditable doesn

问题:

I am using jeditable and i am loading a select dropdown from my server (it takes a few seconds to load via ajax) and i want to display a loading image or text while the ajax call is running so people know that the dropdown list is being loaded from the server.

I see there is the "indicator" property to show a loading image or text when saving the value to the server (which works perfect) but for some reason there is no working option to set a loading message when you are loading items for the select dropdown.

When i look into the plugin, i see a "loadtext" property that seems like it should be doing this but when i click on my text i don't see this "Loading . ." text displayed when it kicks off the ajax query to get the list of dropdown.

Here is my code:

 $('#person').editable('/Project/UpdatePerson', {
        loadurl: '/Project/GetPeople',
        type: 'select',
        loadtext: '<b>Loading Dropdown...<img src="/Content/Images/ajax-loader.gif" /></b>',
        indicator: '<b>Saving...<img src="/Content/Images/ajax-loader.gif" /></b>',
        submit: 'OK',
        callback : function(value, settings) {
            var json = $.parseJSON(value);
            $(this).text(json.Value);
        }
    });

Any suggestions?

回答1:

Try this,

  $(document).ajaxStart(function() {
      $('#person').append('<span>Loading..</span>')
  });

    $(document).ajaxStop(function() {
      $('#person').find('span').remove()
  });

Update:

Change the ajax code with this in jeditable plugin ,

$.ajax({
   type : settings.loadtype,
   url  : settings.loadurl,
   data : loaddata,
  beforeSend: function(){
    if(settings.type == 'select'){
      $(self).append('<span>Loading...</span>')
    }
  },
   //async : false,
   success: function(result) {
      window.clearTimeout(t);
     content.apply(form, [result, settings, self]);
     $(self).find('span').remove()
      input_content = result;
      input.disabled = false;
   }
});

Hope this is works for you.

回答2:

I would just do this manually. Before launching your ajax request, add a loading image to you document. Then, when the ajax request returns, remove the image from the document in the success callback.