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

Question

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

Answer 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

Answer 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);
}
},