I'm currently developing a web application using angularJs and xeditables. Within this application, I have multiple xeditable text elements following each other, with validation triggering upon pressing enter or clicking outside the text field:
<div ng-repeat="answer in item.answers track by $index">
<input type="radio" name="{{item.label.text}}"> <span editable-text="answer.text" onshow="onShow()" onhide="onClose()" buttons="no" blur="submit" onbeforesave="validateEditableText($data)">{{answer.text || "Edit this text"}}</span>
</div>
The functions onShow() and onClose() are defined as follows:
$scope.onShow = function() {
alert('onShow');
if($scope.hideMenu == true)
$scope.hideMenu = false;
};
$scope.onClose = function() {
alert('onClose');
if($scope.hideMenu == false)
$scope.hideMenu = true;
};
These functions simply toggle a boolean value. This boolean is utilized to prevent event propagation (which may seem unusual, but is necessary for my requirements).
Below is my function for blocking event propagation, although understanding it fully is not essential for this explanation:
$scope.blocEventPropagation = function(event) {
if($scope.selectedItem != null){
if($scope.hideMenu && !$scope.selectedItem.dropDownOpen)
event.stopPropagation();
}
};
My current issue arises when I click on one xeditable text field and then directly click on another. The events do not occur in the sequence I desire. The current order is: onShow() for the first xeditable text when clicked, onShow() for the second text when clicked directly after without closing the first, and finally onClose() for the first text. My ideal sequence would be: onShow() for the first text when clicked, onClose() for the first text when clicking on a second text, and onShow() for the second text.
I have extensively reviewed the xeditable documentation but have not found a solution. I attempted using a timeout to delay the event, but this was unsuccessful.
Any ideas on how to alter the event order, limit function calls, or suggest an alternative solution would be greatly appreciated.