Yii2当Bootstrap模态仍在加载时加载页面/图像

Question

I have this modal:

<?php
    echo Html::button(
        'Create New Staff',
        [
            'value' => Url::to(['create-new-staff']),
            'class' => 'btn btn-success btn-create',
            'id' => 'modalButton'
        ]);

    Modal::begin(['id' => 'modal']);
    echo "<div id='modalContent'></div>";     
    Modal::end();
?>  

Here's my sample loading indicator image:

<img src="http://dkclasses.com/images/loading.gif" id="loading-indicator" style="display:none" />

When I click the modal button, I want to display a loading screen or image when the modal is still loading instead of just plainly waiting for the modal to load. I tried this:

<script type="text/javascript">
    $("modalButton").click(function(event) {
        $.post( "/echo/json/", { delay: 2 } );
        $(document).bind("ajaxSend", function(){
            $("#loading-indicator").show();
            }).bind("ajaxComplete", function(){
            $("#loading-indicator").hide();
            $("#modalContent").show();
         });
    });
</script>

I based that script in this fiddle.

And I also tried those I have searched in the internet. None of them worked. I think it's because I am using Yii. I'm not sure. How do I achieve this?

Answer 1

Figured it out:

$('#modalButton').click(function (){
    $('#modal').find('#modalContent').html("")
        .load($(this).attr('value'), function(){
            var thisModal = $('#modal');
            setTimeout(function(){
                thisModal.modal('show');
                $("#loading-indicator").hide();
            }, 1000);
        });
    $("#loading-indicator").show();
});