javascript - onApprove and onDeny not triggered in modal - semantic ui - Stack Overflow

admin管理员组

文章数量:1244440

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

Share Improve this question Follow edited Feb 12, 2014 at 4:00 Chen-Tsu Lin 23.2k1616 gold badges5656 silver badges6565 bronze badges asked Feb 12, 2014 at 0:43 sabarisabari 2,62555 gold badges3232 silver badges5151 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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');      

本文标签： javascriptonApprove and onDeny not triggered in modalsemantic uiStack Overflow