When I show my modal, the onApprove event is called automatically. How can I stop this? My code is as below

<div class="item">
    <div class="content">
       <a href="#" ng-click="showItemPanel()">Deactivate Account</a>
       <div id='showItemModal' class='ui modal'>
       <i class="close icon"></i>
       <div class="header">
         Deactivate User
       </div>
       <div class="content">
       <form class="ui form" name="ItemModalForm">
          <div class="field">
            You want to go to shopping?                 
          </div>
       </form>
       </div>
       <div class="actions">
        <div class="ui tiny button">Cancel</div>
        <div class="ui tiny green button" ng-click="showItems()">De-Activate</div>
        </div>
       </div>
   </div>

controller.js

$scope.showItemPanel= function() {
            var modalElem= $('#showItemModal').modal('setting', {
            closable  : false,
            onDeny    : function(){
              window.alert('Wait not yet!');
              return false;
            },
            onApprove : itemPanelOpen()
            });
          modalElem.modal('show');           
        }
        function itemPanelOpen()
        {
            console.log(user.name + " can now shop!");
        }

For me, as soon as showItemPanel function is called, itemPanelOpen function is also getting call automatically. Please let me know where I went wrong.

When I show my modal, the onApprove event is called automatically. How can I stop this? My code is as below

<div class="item">
    <div class="content">
       <a href="#" ng-click="showItemPanel()">Deactivate Account</a>
       <div id='showItemModal' class='ui modal'>
       <i class="close icon"></i>
       <div class="header">
         Deactivate User
       </div>
       <div class="content">
       <form class="ui form" name="ItemModalForm">
          <div class="field">
            You want to go to shopping?                 
          </div>
       </form>
       </div>
       <div class="actions">
        <div class="ui tiny button">Cancel</div>
        <div class="ui tiny green button" ng-click="showItems()">De-Activate</div>
        </div>
       </div>
   </div>

controller.js

$scope.showItemPanel= function() {
            var modalElem= $('#showItemModal').modal('setting', {
            closable  : false,
            onDeny    : function(){
              window.alert('Wait not yet!');
              return false;
            },
            onApprove : itemPanelOpen()
            });
          modalElem.modal('show');           
        }
        function itemPanelOpen()
        {
            console.log(user.name + " can now shop!");
        }

For me, as soon as showItemPanel function is called, itemPanelOpen function is also getting call automatically. Please let me know where I went wrong.

• javascript
• angularjs
• semantics

4 Answers 4

I had this problem today and find out the definition of buttons should be

<div class="actions">
        <div class="ui tiny button deny">Cancel</div>
        <div class="ui tiny green button approve">De-Activate</div>
</div>

With the 'approve' in button's class attribute, the onApprove and onDeny event can work.

You can find document of Semantic UI of modal DOM selector:

selector    : {
  close    : '.close, .actions .button',
  approve  : '.actions .positive, .actions .approve, .actions .ok',
  deny     : '.actions .negative, .actions .deny, .actions .cancel'
}

I had spend a couple of hours on figuring out on event not triggered and feel the document is not very well written here.

onApprove : itemPanelOpen()

The parentheses at the end means you want to call the function, and set onApprove to whatever itemPanelOpen() evaluates to.

Since you just want to reference the function, leave out the parentheses:

onApprove: itemPanelOpen

This is because, in javascript, functions are first class objects. You can read more about them in Functions and function scope at Mozilla Developer Network.

Not sure if you are still looking for answer, but you need to add the "positive" or "approve" or "ok" class to your button. According to the documentation: "Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons."

 <div class="actions">
    <div class="ui tiny button cancel">Cancel</div>
    <div class="ui tiny green button ok" ng-click="showItems()">De-Activate</div>
 </div>

Probably any of the following

positive / approve / ok

will work.

don't add word 'settngs'

$('.mini.modal.delete').modal({
    onApprove : function(){alert("delete")}
}).modal('show');