jQuery document.ready没有警报就不会触发

Question

I'm facing this very weird issue that my function in document ready is not triggered, unless I put alert after the function. I found this out when I debug using the alert , and apparently everything was working fine. But when I removed the alert , function 'RaiseEvent' never get called.

Here's my HTML:

<script src="../Content/jquery.mobile-1.4.2/js/jquery.js"></script>
<script src="../Content/jquery.mobile-1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/hybrid.js"></script>
<script>
$(document).ready(function(){
            //populate form
            //alert('Calling POPULATE-FORM');
            RaiseEvent('POPULATE-FORM');
            //alert('After POPULATE-FORM');
});
</script>

The RaiseEvent function is retrieved from hybrid.js:

function RaiseEvent(eventName)
{
    if (!eventName) eventName = '';
    var qs = '';
    var elms = document.getElementsByTagName('*');
    for (var i = 0; i < elms.length; i++) {
        if (elms[i].name) {
            qs += (qs.length > 0 ? '&' : '') + encodeURIComponent(elms[i].name) + '=' + encodeURIComponent(elms[i].value);
        }
        if (elms[i].type == 'checkbox' && elms[i].checked)
            qs += (qs.length > 0 ? '&' : '') +
            'checked:' + encodeURIComponent(elms[i].name) + '=1';
    }
    location.href = 'xpostback:' + eventName + ':' + qs;
}

I've googled this issue and found few people facing this also Here but I followed his solution already to no avail.

Anyone facing the same issue or have any suggestions/advice what might go wrong?

Answer 1

I have some thoughts on your problem.

a) Callback function in ready()

From documentation handler is callback function which means that when DOM element is ready your function is beeing called. I suppose that is not the problem.

document.ready( handler );

b) Jquery.mobile

Fast googling told me that you could use different function. See pagecreated documentation.

 $(document).on('pagecreated',function(){ 
                RaiseEvent('POPULATE-FORM');
            });

Also look here:

1. jQuery mobile $(document).ready equivalent
2. jQuery Mobile: document ready vs page events

c) Error in function RaiseEvent(eventName)

Even if your function works with alert this doesn't guarantee that you function is working properly. I had a lot of situations that in all modern browsers my code works but there was some bugs. Only Internet Explorer was so kind and throw me errors. I suggest running your code with JS debugger.

Summary

I would start from b) and then try to look at c) . Good luck :)

Answer 2

Apparently there is another "document.ready" function in hybrid.js that caused inconsistent RaiseEvent calling. Probably because the asynchronous nature of Javascript, the RaiseEvent('POPULATE-FORM') get overlapped by the RaiseEvent('DOCUMENT-READY') in hybrid.js:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        RaiseEvent("DOCUMENT_READY");
        Init();
        clearInterval(readyStateCheckInterval);
    }
}, 50);

Credits to @Barmar for helping me debugging the isssue!