Clearing bootstrap editable forms

Question

I am currently using bootstrap editable for the front end of my application.

See plugin: http://vitalets.github.io/x-editable/index.html

What I am doing is loading data onto a page via Ajax and allowing each item on the page to be editable. For example; I load a user onto a page and allows for his first name, last name and date of birth to be editable.

Because I am loading via Ajax, when a second user is loaded for example or third and i try to edit the first name etc, I keep getting the values of the first user loaded initially.

I am presuming it may be cache. I have tried setting display on the function and even auto-text.

Is there anyway I can reset or clear the editable form?

see sample code below:

function editable(obj) {
    $('#title, #lastName, #firstName).editable('option', {
       pk: obj.lId,
       placement: 'bottom',
       emptytext: 'Empty',
       display: function(value) {
         $(this).text(value);
        },
       validate: function(value) {
         if ($.trim(value) === '') {
            return 'This field is required';
         }
      }
    });
}

Answer 1

Assuming that obj is your new user, and it contains the title, last name, and first name of the new user, all you have to do is set the values of the x-editable objects:

$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);

The reason why your example is not working is because x-editable separates the display from the actual value. Your display function is called whenever the user changes an x-editable value. By default, x-editable displays whatever the value is set to. But perhaps the internal value is different from a displayed value, that is what the display function is used for - it has no impact on the actual value, just the display of the value.

X-Editable has a lot of different methods you can take advantage of, you can find them on the 'Methods' tab here: http://vitalets.github.io/x-editable/docs.html#editable