X-Editable: Attach event to data change

Question

How to attach events to any data changes in fields done using XEditable? If not if there is any other plugin that allows that kind of behavior?

Dilorenzo

is this document vitalets.github.io/x-editable/demo.html ll help u someway??? – Irritated

nope... all that has is just what are types of elements they support not how to attach events to data change... tried searching in documentation but it didnt helped – Dilorenzo

Can you be more precise please : Do you want an event to be fired when the user changes data without saving ? Or changing data after saving ? (ignoring unchanged saved data) And is it for an input text ? or datepicker ? ... – Stancil

well i am interested in firing events when user changes data whether or not that data was saved (saving is sending to server which i dont care), i am interested in UI level events – Dilorenzo

Answer 1

I am using Angular-xeditable, And i am able to bind events and add other attributes too. Add e-onChange="alert('I am Fired')" to your needed HTML Tag. For Example:

<a href="#" editable-text="user.name" e-onChange="alert('I am Fired')" e-style="color: green" e-required e-placeholder="Enter name">

http://jsfiddle.net/cg3pLmed/

And by JavaScript

$('#username').on('save', function(e, params) {
     alert('Saved value: ' + params.newValue);
});

Fired when new value was submitted. You can use $(this).data('editable') to access to editable instance. Check with the Events in the following link http://vitalets.github.io/x-editable/docs.html

Tigre

<a href="#" editable-text="user.name" e-onChange="alert('I am Fired')" e-style="color: green" e-required e-placeholder="Enter name"> OR $('#username').on('save', function(e, params) { alert('Saved value: ' + params.newValue); }); : @wolffer-east – Tigre

This doesn't show how to invoke code on your controller. It seems that inside the e-onChange you don't have access to the controller, which is what most applications would need in order to implement complex application logic as a result of the change. – Ablative

Answer 2

You can use e-ng-change to add a callback like this:

<span editable-select="user.status" e-name="status" 
    e-ng-change="onStatusChanged($data)" 
    e-ng-options="s.value as s.text for s in statuses">

Here is a fiddle where the Status selectbox will fire the Controller method onStatusChanged:

http://jsfiddle.net/NfPcH/9713/

Hbeam

Answer 3

You can use the success or error callback functions for basic X-Editable without Angular. See http://vitalets.github.io/x-editable/docs.html#editable

Medico