Question

I’m using Jeditable with jQuery and it is mostly working how I want it. When the user submits some changes via jeditable (I’m using a textarea) and the server determines that there are some validation errors, I want to automatically revert to displaying the textarea containing the user’s most recent changes. This is to avoid them losing the text they had typed in (it may have been a result of a server-side error or hitting the submit button accidentally before they are ready).

Is there any easy way to have jeditable build the edit control anew?

Answer 1

Ok, so here’s what I did to solve this. I hacked jeditable.js so that it expects JSON data as the response in the AJAX success callback triggered when submitting the in-place edit. In the JSON object is an alert field which I use as so

var ajaxoptions = {
  type    : 'POST',
  data    : submitdata,
  dataType: 'text',
  accepts: 'json',
  url     : settings.target,
  success : function(result, status) {
      data = $.parseJSON(result);
      $(self).children('span.indicator').remove();
      if(!data.alert) {
        $(self).html(data.text);
        self.editing = false;
        callback.apply(self, [data, settings]);
        if (!$.trim($(self).html())) {
            $(self).html(settings.placeholder);
        }
      }
      else {
        callback.apply(self, [data, settings]);
      }
  },
  error   : function(xhr, status, error) {
      $(self).children('span.indicator').remove();
      onerror.apply(form, [settings, self, xhr]);
  }

};

So, in essence, if there is a non-NULL alert string, I just don’t to anything (except trigger the callback function, if defined). This seems to work fine, leaving the textarea field in place with the user’s changes inside it. My callback alerts the user that the change wasn’t submitted by using the text in data.alert.