javascriptasp.net-mvcrazorwindows-phoneie-mobile

Javascript code undefined in IE11 Mobile browser but working in Chrome, Firefox, IE


I am running into a problem on a website I'm trying to test on Windows Phone IE11 Mobile. Basically, on Iphone, Android, Chrome, Firefox, and even non-windows phone IE11, this code is working properly, but on IE11 Mobile the following code alerts "'App' is undefined."

Here is the razor cshtml:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/app")
    <script>
        $(document).ready(function () {
            try {
                var overlayUrl = "@Url.Content("~/Content/Images/front_license_outline.png")";
                var handleUrl = "@Url.Action("HandlePicture")";
                App.init(overlayUrl, handleUrl);
            } catch(ex) {alert(ex.message);}
        });
    </script>

And here is an abridged version of the app.js file that is defined on all of the other browsers I have tested.

var App = function() { 
    var init = function(overlayurl, hpu) {
        //My Code
    }

    return { init: init };
}();

I don't really have much of an idea as to what could be going on and I would like help figuring out how to either fix this for WP EI11 Mobile or some way to work around the problem.

Jquery - version 1.10.2
Modernizer - version 2.6.2
Boostrap - version 3.3.6

If you need any more information about my code or think I may not have included something important to working out this issue, please let me know and I would be more than happy to provide it. Thank you in advance for your help.

::EDIT::
I have tested editing out every single line in the App.init function and as many extraneous lines I could find elsewhere and the problem persist.

var App = function() { 
    var init = function() {
        //This is now literally no code here.
    }

    return { init: init };
}();

and the razor .cshtml file:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/app")
    <script>
        $(document).ready(function () {
            try { App.init(); } 
            catch(ex) { alert(ex.message); }
        });
    </script>

alert(ex.message) is still fired. 'App' is undefined.


Solution

  • I had stepped away from this problem for now and decided I would work on something I thought was completely unrelated; figuring out why the bootstrap grid system wasn't working presenting correctly. While I was doing that I stumbled across an article suggesting that I needed to add a meta-tag:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    This meta tag in the head of my .cshtml file fixed the problem for reasons completely unbeknownst to me. As far as I can tell, this doesn't have any side effects in other browsers either. With this tag, the app.js file is loading correctly in IE11 Mobile.

    For now, it fixes the problem, but I plan to look into exactly what it is doing. I hope this helps anyone dealing with similar issues.