I would like to show loading progress once i set the data
property of my html object element.
This is how i do it currently:
HTML
<div class=" container row form-horizontal">
<div id="printModal" class="modal fade in" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg print-dialog">
<div class="modal-content print-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Print Out</h4>
</div>
<div class="modal-body">
<div id="detailAlert" class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>Some Errors have occured!</span>
</div>
<div class="form-group">
<object id="pdfbox" style="width: 100%; height: 800px; overflow:hidden"
type="application/pdf"></object>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn dark btn-outline">Close</button>
</div>
</div>
</div>
</div>
</div>
Loading Url
$('#printModal').modal('show');
var url = '/PurchaseRequisitions/Print?prId=' + prId;
$('#printModal').find('object').prop('data', url);
I tried using the onloadstart
and onloadeddata
events in order to display some basic progress but they dont seem to be firing;
$('#pdfbox').on('loadstart', function () {
alert('common');
//blockComponent('#printModal.modal-content');
});
$('#pdfbox').on('loadeddata', function () {
// unblockComponent('#printModal.modal-content');
});
The above two events were described in w3school, so not sure what i am doing wrong, but there is no console errors.