Unknown Browser Issues with Javascript - javascript

I am having some weird issues getting with javascript running on a friend's machine. I have a form wizard that perform certain checks and operations. I use external jquery and bootstrap libraries with a custom script also. The script works on all browsers I've test so far including old IE , however a friend reports the following errors when accessing the form url.
The strange thing to me is every error is on line 1 and haven't touched any of the libraries.
External Library linking
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/scripts.js"></script>
custom script.js overview
jQuery(document).ready(function() {
...
// javascript code
...
});
Anything I should try or do?

Related

FBInstant is not defined

Sentry is showing that certain Facebook users are receiving the error:
FBInstant is not defined
My HTML file includes scripts like so just after the opening <body> tag:
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/app.js"></script>
In app.js, FBInstant.initializeAsync is only called after the entire page has loaded:
window.onload = function() {
FBInstant.initializeAsync().then(function() {
//Load stuff, etc.
});
}
Is fbinstant.6.2.js not being loaded for some reason? This is working for the vast majority of people. It seems to be mostly Chrome users, with a smaller portion of Firefox users as well.
You should always check if it exists before using it, i had the same problem with the JS SDK of Facebook and found out that those people just installed a browser plugin like Ghostery to disable third party plugins.

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 doesn't work in Cordova project

i have a web project which works find in web. I want to transfer it into phonegap windows phone project .
Everything works fine but in a search option whenever i click in the search option it shows nothing showing a message "We are having trouble to display this message". N:B: this search option works properly in the web.
here is my search code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>
var c=getCatalogue();
var bestNew=getBestNew();
$("#recherche").click(function(){
var v=$("#search").val();
window.localStorage.setItem("search",v);
if(v!="") routePage("recherche.html?search="+v);
});
</script>
I think problem is when i pass the value to another page that is "search="+v".
When i use if(v!="") routePage("recherche.html); instead of if(v!="") routePage("recherche.html?search="+v); then it works.
Try downloading and using JavaScript imports locally instead of fetching a remote version if not strictly necessary.
See:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also phonegap.js should be included:
<script type="text/javascript" src="phonegap.js"></script>
You will need to move the JQuery source to a local file and update your script tag, like you have with materialize.min.js. Loading library JS from the network is not a good idea as it slows your app's startup down and also will cause it to fail when started in a situation where there is no network access.
Additionally Cordova/PhoneGap's Content Security Policy may be blocking remote script loads for security reasons - you don't state which PhoneGap/Cordova version you are using, but this may be a problem for you in Cordova 5. There's a tutorial on dealing with that here. You can configure around this by adjusting the Content Security Policy meta tag to allow script-src from other than "self" but I wouldn't recommend this.
When running in Cordova/PhoneGap you should also wait for the "deviceready" event before trying to do anything, to make sure that the framework is fully initialized and that you have access to call plugins.
Also instead of loading new pages you should architect your app so that it is a single page app and generates page fragments from templates as needed. Try looking at something like Handlebars for this unless you have another preferred solution. I have a complete demo app that uses this approach that you can look at the source for here.

Error in console: uncaught error history.js adapter has already been loaded

I'm creating an small module for activeCollab composed by some webpages. I'm using PHP and Javascript/jQuery/AJAX. When I enter into the main page of the module I'm creating everything is working fine, but if later I try to go to other modules my web application is crashing. Is not showing any information. The only way for reviving it is refreshing the navigator.
If I check the error console of my navigator, I see that when I'm exiting from my custom webpage it says
`Uncaught Error: History.js Adapter has already been loaded...`
The header of my HTML file has this information:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
And this code is making my Javascript functions work properly.
What can be happening? I googled and I didn't found much information about this issue. Every help would be appreciated.
Finally I solved it, the problem was that my application is loading by default its own jQuery file and there was a conflict between this one and the ones I was trying to import. The solution was easy: I only had to delete the lines I wrote inside the "head" tag.
Thanks for your help!

Google Maps API - Slow loading javascript

I am using Google Maps API to display a map on a certain page.
Problem is that the file http://maps.google.com/maps?file=api..... sometimes happens to load very slow - decreasing the page's performance, because the rest of the JavaScript is first loaded on document ready, which its rarely reaches - because the browser locks up waiting for the file from Google.
I have tried to move the JavaScript file from the <head> tag to under my content. But the rest of the JavaScript is never fired because the browser waits for the file from Google.
Is there a way around this, or have anyone else experienced same problem? It began recently, and I have no idea why.
This is my code, if anyone is interested:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew"> </script>
<script type="text/javascript" src="/js/maps.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Google Maps
initialize();
// Other JavaScript comes here....
});
</script>
If I access
http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew
The file loads instantly.
This is a rather old question now - the solution was to disable firebug (atleast for me).
Use Google's Ajax APIs. From some time past, all of Google's services can be accessed through the JavaScript API. It's a modular system, you only have to include the JSAPI library, and then you can dynamically load the modules you need—it won't block your site.
<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2");
google.setOnLoadCallback(function() {
// Your logic goes here.
// It will be run right after the maps module was loaded.
});
</script>
For further details, see JSAPI's developer documentation.
On JavaScript optimization: always put your JS at the bottom of your even your Maps API script. I can't really think of any good reason to have any JS in the head.

Categories

Resources