Jquery document.ready not triggered without alert

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?

What does `RaiseEvent` do? There might be some asynchronous behavior and it "works" with `alert` because `alert` is blocking. — Felix Kling, Aug 21 '14 at 04:42
what is `RaiseEvent` do and how are you checking whether it is getting called — Arun P Johny, Aug 21 '14 at 04:45
It can happen because javascript is asynchronous. But here it have to be something about your overall code structure, including imports. — Maleen Abewardana, Aug 21 '14 at 04:51
@FelixKling it does a postback that will be handled later to call a C# function. the whole system is much more complex than this, bcos I'm creating an iOS app with C# and Webview as Frontend. But anyway I'm interested in ur saying, async behavior and alert is blocking. what do u mean by that? — yonasstephen, Aug 21 '14 at 04:55
If you put an alert at the beginning of `RaiseEvent`, does it appear? — Barmar, Aug 21 '14 at 04:55
@Barmar if I put the alert only before the RaiseEvent, the function RaiseEvent never get called. But if I put another alert at the end, it is called. — yonasstephen, Aug 21 '14 at 04:57
whether some of the page elements are created dynamically... — Arun P Johny, Aug 21 '14 at 04:57
I asked what happens if you put the alert inside `RaiseEvent`. — Barmar, Aug 21 '14 at 04:58
@ArunPJohny bcause the RaiseEvent initialize the content dynamically in my page, so if it gets called, everything gets initialized correctly. But if it's never called, the loading dialog never dismisses — yonasstephen, Aug 21 '14 at 05:00
@yonasstephen put that RaiseEvent before tag and remove the Scripts/hybrid.js it will work sure — cracker, Aug 21 '14 at 05:00
@Barmar oh! thanks now I just noticed different problem, it is actually get called! but I think the function inside is skipped, now I can narrow down my debugging — yonasstephen, Aug 21 '14 at 05:10
What is the `xpostback:` URI scheme supposed to do? I can't find any information about that. — Barmar, Aug 21 '14 at 05:15
@Barmar that's basically a naming I made myself. the location.href will throw an error and pass the xpostback string to a method to process. this method will determine which C# method to handle the event — yonasstephen, Aug 21 '14 at 05:20

score 1 · Answer 1 · edited May 23 '17 at 11:43

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:

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 :)

score 0 · Accepted Answer · answered Aug 22 '14 at 01:23

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!

Jquery document.ready not triggered without alert

2 Answers2

a) Callback function in ready()

b) Jquery.mobile

c) Error in function RaiseEvent(eventName)

Summary