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

Question

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.

score 1 · Accepted Answer · answered Jul 25 '16 at 21:49

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.

score 0 · Answer 2 · answered Jul 25 '16 at 19:59

0

Usually there are many things Explorer can't do. Check if what you're doing in your code is possible in IE. Examples usually come with an if/else sentence specifying code for IE and code for the other browsers. This is an example:

if (window.XMLHttpRequest) { // This would be the object you want to use
    // code for browser with x tool
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browser without the tool
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    // This would be the alternative in this browser
}

I'm not sure this is what you're looking for but I hope it helps.

answered Jul 25 '16 at 19:59

Héctor J. Vásquez

159
6

Thank you for getting back to me. At this point, I have commented out every single line of code in the App.init() function, so it is only an empty function. I have done the same with most of the $(document).ready() callback function. The javascript looks the same as in the original post, but the cshtml now looks like this: `$(document).ready(function () { try { App.init(); } catch(ex) {alert(ex.message);} });` The problem persists. "'App' is undefined" – Beard Tony Jul 25 '16 at 20:07
As I said before I'm not sure what you're looking for but this link may help you. Go to unsupported features & check If something you're using is not available for WP. You have to be aware of every feature your app depends on. – Héctor J. Vásquez Jul 25 '16 at 20:13
Sorry I forgot to append the link! LOL: https://msdn.microsoft.com/en-us/library/dn629259(v=vs.85).aspx – Héctor J. Vásquez Jul 25 '16 at 20:20

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

2 Answers2