How to use custom callback in semantic-ui modal

Question

I want to use more than 2 button in semantic-ui modal for feedback purpose as easy,normal and hard. And I also need to perform action according to button clicked.

I know how to use approve and deny button (I can use it for 2 buttons). But how to handle these 3 buttons with 3 different callback.

Or any alternative solution for this.

Answer 1

Well, the perfect solution would be if it were possible to know which button was pressed in any of the callbacks. Unfortunately I can't find a way to do that.

onApprove: function () {
    console.log(this); // returns the modal
    console.log(arguments); // returns an empty array
}

So, instead of above, add an event listeners to your buttons. This way you know which callback to execute.

<button class="show">Open</button>

<div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">Test title</div>
    <div class="content">Test content</div>
    <div class="actions">
        <div class="ui button approve green" data-value="easy">Easy</div>
        <div class="ui button approve blue" data-value="normal">Normal</div>
        <div class="ui button approve red" data-value="hard">Hard</div>
    </div>
</div>

<div>Result: <span id="result"></span></div>

<script type="text/javascript">
$(document).on("click", ".show", function () {
    $(".ui.modal").modal("setting", {
        closable: false,
        onApprove: function () {
            return false;
        }
    }).modal("show");
}).on("click", ".ui.button", function () {
    switch ($(this).data("value")) {
    case 'easy':
        $("#result").html("easy");
        $(".ui.modal").modal("hide");
        break;
    case 'normal':
        $("#result").html("normal");
        $(".ui.modal").modal("hide");
        break;
    case 'hard':
        $("#result").html("hard");
        $(".ui.modal").modal("hide");
        break;
    }
});
</script>

Working demo: http://jsfiddle.net/osgg8kzL/1/

Answer 2

onApprove: function (e) {
    console.log(e); // returns the button
}

So html:

<div class="ui modal">
  <div class="content">
    choose
  </div>
  <div class="actions">
    <button class="ui button easy ok">easy</button>
    <button class="ui button normal ok">normal</button>
    <button class="ui button hard ok">hard</button>
  </div>
</div>

and js:

$('.ui.modal').modal({
  onApprove: function (e) {
    if (e.hasClass('easy')) {
       yourstuff()
    }
    if (e.hasClass('normal')) {
       yourstuff()
    }
    if (e.hasClass('hard')) {
       yourstuff()
    }
  },
}).modal('show')