Utilizing xeditable.js, I am able to dynamically update the content of a cell within a table. My goal is to capture these changes and send them via an HTTP request (PUT) to the backend in order to update the database.
Below is the table that can be edited:
<tbody class="connectedSortable" style="display: block; height: 262px; overflow: auto; width: 100%;">
<tr ng-repeat="station in stations | orderBy:sortType:sortReverse | filter:searchStation" style="width: 100%">
<td> <a href="#" editable-text="station.id">{{ station.id }}</a> </td>
<td> <a href="#" editable-text="station.name">{{ station.name }}</a> </td>
<td> <a href="#" editable-text="station.lon">{{ station.lon }}</a> </td>
<td> <a href="#" editable-text="station.lat">{{ station.lat }}</a> </td>
</tr>
</tbody>
An issue I am facing is identifying the entire row where a change occurred so that it can be sent to the backend. Xeditable handles the editing process automatically which complicates this task.
If further information is required, please feel free to inquire as I have additional code available for reference ;)
PS: The AngularJS module initialization snippet below might provide some insights.
var app = angular.module("liveSearchApp", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});