Develop Reference

Javascript acting differently in inappbrowser vs Chrome - Undefined global variables

My problem is that when I use inappbrowser to open my web page, the main javascript file seems to be ignored, even though it is referenced in the Head of the file that I am opening using ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
I am using chrome://inspect/#devices to inspect the console and I get errors when hitting buttons.. Anything referenced in the main.js file is undefined.. whereas the actual code for the autocomplete and button seems to be executing.
Please note The url is working fine when viewed in the chrome browser. The javascript files seem to load correctly, and all variables are defined correctly. - It is only when I use inappbrowser that I see issues with undefined variables.
My code (cordova app):
ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
var myInAppBrowserCallback = function(event) {
console.log(event.url, 'LOADED');
};
ref.addEventListener('loadstart', myInAppBrowserCallback);
//Works fine.
My code (from the actual website I'm trying to view in Inappbrowser):
<script src="/Scripts/commonFunctions.js"></script>
var p = 'Hello';
<script src="/Scripts/loginPage.js"></script>
$('#btnLogin').on('click', function() {
alert(p);
});
Returns an alert with undefined.
What I have tried:
Extensive googling! (all the answers seem to be related to javascript not being enabled.. or 404 errors or things like that.. Not with global variables from one js file being undefined in another js file.)
Removing inappbrowser, using window.open.. Won't work as the app needs to execute scripts to inspect localstorage of the site.
Re-installing the android platform using cordova.
Re-installing the plugin.
Checking chrome in the inspector to ensure the files are in sources tab (they are).
Checking that the functions in main.js also exist (they do).
Thanks, JFIT

Summary:
The problem was that a javascript file was trying to load 'SpeechSynthesis' which was undefined only in the inappbrowser.
Details:
The problem with this was confusing but here are the steps I found to debug / solve:
Set up Remote Debugging on the phone so that you can view the console of the phone using chrome://inspect/#devices
View the console of the inappbrowser site (which will show as a seperate page to the inappbrowser instance.
Identify which files are being loaded and remove files until 'undefined' errors disappear.
Add back in the most recent file and start to strip out various functions (especially functions/variables before document.ready (global variables also)
Find the line/variable that way. It was handy for me this way as the actual undefined variable showed up after I removed most of the files.
The actual cause of my error was the speechSynthesis functionality.
The speechsynthesis lines were removed, and I readded all remaining files and everything works. This function works fine in chrome on desktop/android but not in the inappbrowser.

JavaScript error: "JavaScript runtime error: 'do_foo' is undefined

I am using some JavaScript in my ASP.Net page like this:-
<script type="text/javascript" src="MyScript.js"></script>
<script type="text/javascript">
function validate_everything()
{
do_foo();
}
</script>
where MyScript.js exists in the same directory as the Default.aspx, and contains this (only):-
function do_foo()
{
var fred = 2;
return fred;
}
When I attempt to run this (using Internet Explorer) it produces the error:-
0x800a1391 - JavaScript runtime error: 'do_foo' is undefined
The real code (with actual useful work) handled in the same way was working fine yesterday, and fine earlier this morning. I modified it and this error started appearing; I reverted the changes and the error still appears. Before, using Chrome, the real version worked. Now, nothing happens (I assume the reason is the same).
I appreciate this question is a hardy perennial. My problem differs from those here and here in that I'm not using JScript, and this one in that I'm not adding the script from the code-behind.
I have used this approach in several other applications and the error does not occur there. Is that path going to pick up the file from the Default.aspx directory? Is there anything I need (in web.config or anywhere else) that I am lacking?
Edit on inspecting the page source (Chrome) the JavaScript in the .aspx file is listed as expected. The included file is shown thus:
<script type="text/javascript" src="MyScript.js"></script>
but no script is shown (ought there to be?)

JavaScript not working on any browser on my machine

This issue has been driving me crazy!
I am relatively new to web design. I started to learn coding on codecademy.com. Everything worked perfectly! html, css and JavaScript went smooth. However, this is not the case when I start coding with Sublime Text or DreamWeaver on my machine. Whenever I try to run my website, the scripts that I linked doesn't work. I copy-pasted the codes from a Codecadamy tutorial(html, css, JavaScript) into a completely new file in DreamWeaver(index.html, stylesheet.css and script.css), I did this to make sure my code isn't faulty. When I ran the code in the built-in Codecadamy browser, it works perfectly. But whenever I save the files with DreamWeaver or sublime text, the website seems to "ignore" the external .js file.. I tested the website on 4 different browsers(Chrome, IE, Firefox, Opera) but found no luck!
I have no idea what might be causing this problem..
I tried to copy my code into the built-in Codecadamy but it still didn't work
Heres my simple javascript code(just to test out whether its working on my machine):
$(document).ready(function() {
$('#openDialog').click(function() {
$('.container').css('display', 'none');
});
});
Here is my website, I hosted it in a public folder on my DropBox account;
https://dl.dropboxusercontent.com/u/33331786/xbox/index.html

Look at your browser's JavaScript console:
Uncaught ReferenceError: $ is not defined global.js:2
This is your source code:
<script type='text/javascript' src='global.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
You are trying to use jQuery before you load it!

Are you using a local running server or are you using the file:// 'protocol' in your URL's? If you're not running a server then that 's the problem. Because of security constraints browsers do not run local JS files except when you explicitly enable the browser to do so.
See here for more info on how to do that: How to launch html using Chrome at "--allow-file-access-from-files" mode?

Do you ever reference the jQuery library? You could do it like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

how can I force IE9 to "see" the most current javascript when using the debugger?

I'm using IE9 to debug a web app. I made some changes to the javascript after loading the page. I'm not able to get IE9 to stop on the new code. The message is "The code in the document is not loaded". I can set breakpoints when I'm not debugging, but they won't be valid when I start debugging. I'm using IE7 Browswer Mode, IE7 Document Mode.
Things I've tried:
close dev tools window, re-open
stop debugging, start debugging
Ctrl R in dev tools window (same as Clear Browser Cache button)
Ctrl R on the IE9 web page
Ctrl F5 on the Ie9 web page
Clear browser cache for this domain
Check (set) Always refresh cache from server
Next thing to try (I guess) would be closing IE completely. Is that the fix for this? If so, yuck. It takes me a couple of minutes to set the page up so doing that after every JS change really stinks. I can use FF4 to develop the JS, but the JS issue I'm seeing is specific to IE7 so I have to do it this way.
>> How can I get IE9 (running in IE7 mode) to reliably debug the most current JS from the server?

This issue wasn't related to caching etc. IE9 was hitting a script error (missing closing paren) in the new code and not allowing breakpoints anywhere in the script. IE seemed very quiet about the script error though. Anyway, fixing the script error fixed the issues with breakpoints / caching.

If you have access to the code:
In you javascript file reference add a query string, something like this:
<script src="Scripts/main.js?v=1" type="text/javascript"></script>
And every time you change in the js file change the v value to something else, like that the browser will feel that this is a new file and will get it.

Add this:
window.applicationCache.addEventListener('updateready', function (e)
{
if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
{
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?'))
window.location.reload();
}
}, false);
I found this solution somwhere in the Net. Sorry, but I don't remember the author. It works for me when I debug Web App with JavaScript in Visual Studio and use IE.

I found this question based on the "the code in the document is not loaded" error message. I'm not using IE7 document mode or any of that, just IE9.
Like jcollum, my issue wasn't related to caching.
I'm using MVC.Net, and someone had set up a piece of javascript to rely on a string in the ViewBag. I changed a couple things, and that ViewBag string disappeared, so the resulting javascript looked something like this:
if(!()) {
// Some code
}
Javascript died right here, and wouldn't process the rest of the code in the block. This was confusing, as it was still trying to execute javascript in a different set of script tags, but which relied on a variable set in the other block it wouldn't load.
So, basically, a syntax error was introduced via strange means, and the debugger refused to load some of the code which came after it. Another lesson on the dangers of ViewBag.

Javascript Datejs

I was looking through some pages when I stumbled across this open source JavaScript date library: Datejs. Now I've been trying to use it but everytime I try any function like:
$(function() { Date.today().toLongDateString() } );
or even only
Date.today().toLongDateString()
withing tags, I get errors when the webpage loads, it tells me Date.today() is not a function but it appears as such in the documentation I've been at this for like almost 2 hours now xD it's driving me crazy and I know I just probably overlooked something...
I loaded the:
<script type="text/javascript" src="assets/js/dia_hora/date_es-MX.js"></script>

Are your script path and filename correct? You wrote:
<script type="text/javascript" src="assets/js/dia_hora/date_es-MX.js"></script>
But according to the "Getting Started" page of the project, it should be:
<script type="text/javascript" src="assets/js/dia_hora/date-es-MX.js"></script>
There are two hyphens in the original file: "date-es-MX.js", not an underscore. Or did you rename the file?
Check if the file correctly loads using Firefox Firebug (network tab) or FiddlerTool if you're using Internet Explorer.

Sounds like the script is not getting loaded. Put an alert('hello'); at the beginning of the script and see if you get that popup when the page loads.

Your path to the javascript file is incorrect.
OR
You have a syntax error in a Javascript file that is being loaded before this one. I believe the browser will stop trying to interpret the rest of the Javascript as soon as an error occurs.

Try having the JS Console open in Chrome or Firefox or Safari - you will get a much better idea of what the error is. JS Console has saved me hours or even days - I remember how I used to get frustrated about not being able to tell what happened when JS silently failed.
But with JS Console it's never a silent fail - you get some hint in the error message however small.