php - Yii2 Loading Page/Image when Bootstrap Modal is still Loading -

i have 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 sample loading indicator image:

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

when click modal button, want display loading screen or image when modal still loading instead of plainly waiting modal load. 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 script in fiddle.

and tried have searched in internet. none of them worked. think it's because using yii. i'm not sure. how achieve this?

because loading of modal window depends on ajax request, can show indicator right before , hide in callback, this:

... $("#loading-indicator").show(); $.post(     "/echo/json/",     { delay: 2 },     function(data) {         ...         $("#loading-indicator").hide();     } ); ...