Modify Button template in X-Editable on a per item basis?

Question

I am trying to use a custom Buttons template with the X=Editable jQuery Library.

I know that there is a way to set a button template using a Global method which affects all form fields on the page. I am trying to figure out how I can use a custom template on a per item basis?

Here are the DOCS page and section where it shows how to set a global buttons template: http://vitalets.github.io/x-editable/docs.html#global

It says:

---

$.fn.editableform.buttons

Buttons template. Automatically inserted into .editable-buttons. Must contain classes .editable-submit and .editable-cancel.
Default value:

<button type="submit" class="editable-submit">ok</button>
<button type="button" class="editable-cancel">cancel</button>

---

So you can see that you can easily set the buttons template into a JavaScript variable globally like this...
$.fn.editableform.buttons = 'button HTML here';

How can I set a custom Button template for just 1 specific Form field?

Answer 1

I found this solution which does this for me. I wanted to have a text send button instead of glyphicon-ok for a specific x-editable object. So I listen with a MutationObeserver if a popover appears and if this popover is for my button:

var MutationObserver = MutationObserver || WebKitMutationObserver || MozMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(mutation) {
        if($(mutation.target).find('.popover-title').text() === 'Title of my button' && $(mutation.target).find('.glyphicon-ok')){
            $(mutation.target).find('.editable-submit').html('process');
        }
    });
});
observer.observe(document, {
    subtree: true,
    attributes: true
});

Not realy nice, but works.