netsmertia netsmertia - 26 days ago 9
HTML Question

How to use custom callback in semantic-ui modal

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

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/