0

The goal is to be able to call the modal as many times as the user needs because the modal allows the user to delete content. Issues arises when clicked a second time without a page reload.

I am using angular 1.5.6

I have googled and googled for about two and half hours now.

Ive tried placing a unique div with a random id with jQuery append with no luck, using an example from this stackoverflow question here:

Twitter Bootstrap Modal Multiple event firing

Here is my modal HTML;

    <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'>&times;</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 my function that wont call 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 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>

Please help, I only posted because I am out of options.

Thank you for your time, Daniel

Community
  • 1
  • 1
San Diego Coder 619
  • 49
  • 1
  • 9

1 Answers1

2

"TypeError: v2.myFunction is not a function" occurs on a second click when the function has the same name as a variable. Angular's $scope is being overwritten by another variable that is not a function.

I added an "s" to my function name and this fixed the problem.

$scope.deleteModalGoal is assigned in the function $scope.deleteModalGoal, so changing $scope.deleteModalGoal = function()... to $scope.deleteModalGoals = function()... fixes this.

https://github.com/angular/angular.js/issues/12353

Fixed:

      $scope.deleteModalGoals = 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");
 }

Original:

      $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");
 }

Hope that helps someone out there!

San Diego Coder 619
  • 49
  • 1
  • 9