Search code examples
jqueryhtmlajaxtwitter-bootstrapx-editable

Adding a loader image/text in Bootstrap X-editable

How can I put a loader gif in X-editable while an update request is made?

This is my code:

$(document).ready(function() {
    $('#username').editable();
});

<a href="#" id="username">superuser</a>

$('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});
Solution

  • X-editable comes with a loader gif by default.

    Just make sure the loader gif is the following path:

    /img/loading.gif

    If you wish to provide a custom path to the loader.gif,

    Modify the following lines in the editable-form.css file, line 42:

    .editableform-loading {  
    background: url('../img/loading.gif') center center no-repeat;  
    ...