My main objective is to allow users to call the modal multiple times for content deletion. However, I encountered issues when the modal was triggered a second time without reloading the page.
I am currently working with Angular version 1.5.6
After spending about two and a half hours searching online, I have tried various solutions but with no success. One of the attempts involved using a unique div with a random id generated through jQuery append, following an example from a stackoverflow post titled:
Twitter Bootstrap Modal Multiple event firing
Below is the HTML code snippet for my modal;
<div class='modal fade' id='deleteModalProfile' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h4 class='modal-title'>{{modal.title}}</h4>
</div>
<div class='modal-body'>
<p>{{modal.body}}.</p>
</div>
<div class='modal-footer'>
<button ng-show='modal.project' class='btn btn-default' ng-click='removeProject()'>Yes</button>
<button ng-show='modal.goal' class='btn btn-default' ng-click='removeGoal()'>Yes</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
</div>
</div>
</div>
</div>
Here is the function that I'm struggling to prevent from being called twice;
$scope.deleteModalGoal = function(goal, index) {
$scope.modal = {"goal": true, "project": false, "title": "Delete Goal?", "body": "Do you want to delete " + goal.task + " in " + goal.title + "?"}
$scope.deleteModalGoalIndex = index;
$scope.deleteModalGoal = goal;
$("#deleteModalProfile").modal("toggle");
}
This is the relevant section from my index HTML;
<div ng-include="'views/modal.html'"></div>
<button type="button" ng-click="deleteModalGoal(goal, $index)" class="btn btn-danger projectTaskDelete"> <i class="fa fa-trash"></i> Task </button>
I would appreciate any help or suggestions as I seem to have exhausted all possible options.
Thank you for your assistance, Daniel