jquery - x-editable - reset 'new record' after submit

问题:

I have been trying to figure this out for hours to no avail.

I have the following

http://vitalets.github.com/x-editable/docs.html#newrecord

the new record module/code. Its functionality is, once all the rows have their data, and it is submitted, it retains its value so that it can stay editable.

I have tried adding input, select clearing code in the success of the ajax request and tried putting the .editable function inside an ajaxComplete function to see if it would reload the element on submit but it didnt. look at the demo. enter data, and submit. it then makes the data "permanent" so that it can continue to be editable.

I have removed the code that hides the button.

What i want it to do is, submit the record and reset so i can submit another with the form being 'Empty' and back to default.

I am developing an equipment tracker and would love if techs could just enter records, one after another. im sure its a simple fix to reset the form, i just cannot figure it out.

I have attached a screencast video of it.

http://www.youtube.com/watch?v=dPDuQCgOOSw

回答1:

as it's popular question, I've added Reset button to documentation.

$('#reset-btn').click(function() {     $('.myeditable').editable('setValue', null) //clear values         .editable('option', 'pk', null)         //clear pk         .removeClass('editable-unsaved');       //remove bold css      $('#save-btn').show();     $('#msg').hide(); }); 

It's better to use .editable('setValue', null) instead of .text('Empty') as we need also to reset internal value.
HTH

回答2:

If you look how the "save new user button" is implemented, it just selects the anchor tags that have classname myeditable

Either you bind a function to your 'reset' button or have this script onclick

IF onclick:  jQuery.each($('.myeditable'),function() {      $(this).text('Empty') ; //this is your default text });  OR as a function  function reset_myeditable() {     jQuery.each($('.myeditable'),function() {          $(this).text('Empty') ; //this is your default text     }); } 

and attach this to the onclick handler of your reset button This I assume you will be putting a 'reset' button

EDIT

Ok zoom in to your $('#save-btn').click(function() success handler

    success: function(data, config) {     if(data && data.id) {  //record created, response like {"id": 2}      $(this).editable('option', 'pk', data.id);     //remove unsaved class     $(this).removeClass('editable-unsaved');     //show messages     var msg = 'New user created! Now editables submit individually.';     $('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();     $('#save-btn').hide();      $(this).off('save.newuser');   /**this the edited part**/   jQuery.each($('.myeditable'),function() {       $(this).text('Empty') ; //this is your default text   }); /**end of edit**/        } else if(data && data.errors){             //server-side validation error, response like {"errors": {"username": "username already exist"} }            config.error.call(this, data.errors);        }                   }, 

文章来源: jquery - x-editable - reset 'new record' after submit