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?