Develop Reference

Unknown Browser Issues with 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?

Firefox Mac Javascript problems

I am having a problem with my JavaScript where it runs into problems on the Mac version of Firefox only. The only console errors are
TypeError: $.tweets.tweet is not a function
TypeError: $.smartbanner is not a function
Using these plugins:
http://forsmo.me/jquery.tweet.js/
https://github.com/jasny/jquery.smartbanner
However, when I try to access other Javascript functions that are defined in other scripts through the console, they are almost all undefined.
If I copy and paste the source code from the functions or plugins into the console, then try recalling them, the code can be executed without problem.
Has anybody got any tips on how I can identify the source of the problem? It seems to me like there is probably one or two errors in the JavaScript that are then trickling down and breaking everything else, but I see no way of identifying where those problems are happening.
There are no errors on Firefox for Windows, or any other browsers that I am aware.
The Mac is running OSX 10.9.5 and Firefox 38.0.1.
Any help would be appreciated. Thanks.
! UPDATE:
I am including the code in the page with this big script element:
<script type="text/javascript" src="/javascript_combine/?file%5B%5D=ls_core_jquery&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery-ui-1.10.2.custom.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.easing-1.3.min.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fbootstrap.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.isotope.min.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.tdautocomplete.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.sharrre-1.3.4.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.tweet.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fimagesloaded.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Finfinite_scroll.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fmega_menu.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.thumbnailslider.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Floadproductimage.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fhighlight_selected_colour.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.smartbanner.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fsizechartswitch.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fhelperwindow.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Ffield_validate.js&file%5B%5D=%2Fmodules%2Fflynsarmyslideshow%2Fresources%2Fnivo-slider3.2%2Fjquery.nivo.slider.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fla_boutique.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fcolour_squares.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.elevatezoom.js&ver=1.33"></script>
Which is a merged version of all of our javascript files (to reduce the number of files loaded in the page). The two plugin files are included in this file.
The scripts are then called via inline script elements:
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
<script src="/themes/main/resources/js/loadtwitter.js" async=""></script>
the contents of the loadtwitter.js file:
(function() {
$tweets = $('#tweets');
$tweets.tweet({
username: $tweets.data('username'),
favorites: false,
retweets: false,
count: 3,
avatar_size: 60,
template: '<div class="tweet"><div class="avatar">{avatar}</div><div class="text">{text}{time}</div></div>'
});
})();
Interestingly, when I look in the 'debugger' window in Firefox's inspector, the large file with all of our JS in does not appear in the list of resources, even though it does appear in the pages HTML.
Does this mean that the file is not being loaded in for some reason, despite being in the page itself?
In Firefox for Windows, the js file appears in the list of sources.

Website not loading jQuery

I'm a new web developer, and at the suggestion of Richard Bovell at JavaScript is Sexy, I've decided to test my skills by making a... well, test!
I did the basic HTML, and I've written a function to display any given question, and it works perfectly in JSFiddle.
However when I test it with PHPStorm (run it with my browser), it seems like the JavaScript/jQuery is not loading.
In fact, when I use Chrome's error console, jQuery.min says, "failed to load resources."
I'm using this code in my source:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I've also tried using this source:
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
but also not loading resource.
As a result, my entire JavaScript code is not working since it was jQuery based.
If I load the link into my web browser it works perfectly fine, so it doesn't seem like a network error.
Edit:
Here is my fiddle: http://jsfiddle.net/abustamam/3CY7g/
And the error reads:
Uncaught ReferenceError: $ is not defined script.js:2
(anonymous function) script.js:2
Failed to load resource file://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Can anyone give me some pointers as to why jQuery isn't loading? Thanks!
Edit 2: Got the answer. http: is required! Thanks!

Try:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
You were not entering a valid URL

When testing a file locally, i.e. not running it from an actual server, you need to specify the http:// or https://. So change:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Javascript in asp.net MVC... Beginner issue

I created an Asp.Net MVC Internet Aplication and in my Index view of the Home Controller I have this
This is the first line, before the script results.
<script type="text/javascript" src="~/Script/Teste.js"></script>
<br />
This line comes after the script.
In my Teste.js I have this:
document.write("Yes! I am now a JavaScript coder!");
But nothing happens. If I change the src attribute and put some random name src="aaaa", despite the fact "aaaa" doesnt exist, I get no error in runtime.

EDIT
Also, check your path again. The default MVC templates in VS create a folder called Scripts, not Script. ("~/Scripts/teste.js")
Per the comment below, this was not the root cause of the issue, but in other cases can easily bite new JavaScript developers.
Most likely, your document.write function is firing before the document is ready, leading to the appearance that nothing is happening. Try the following in your Teste.js file
window.onload = function ()
{
document.write("Yes! I am now a JavaScript coder!");
//or even better as a test
alert("This alert was called");
}
Check the source of your page as well, it could be the document is being written to, you just can't see it due to markup/page styling.
As for you second issue, there will be no 'Runtime Exception' thrown if you reference a non-existent file. If you are using tools like Firebug or Chrome's developer tools, you should see a request to http://siteDomain/Scripts/aaaa.js with a response of 404, not found.

You generally should avoid using document.write() unless you absolutely have to use it for some reason... I don't think I've ever come across such a situation, and write a lot of Javascript.
Try this:
1) Put this in your HTML:
<script src="/scripts/teste.js"></script>
2) Put this in your JS:
alert('Yes! I am now a JavaScript coder!');
3) Open Chrome since it makes it easy to look for external resources loading and open the Network tab in Developer Tools (click the menu button at top-right, Tools > Developer Tools, Network tab).
4) Run your project and copy/paste the URL in the browser that comes up into this Chrome window, and hit enter.
When your page loads one of 2 things will happen:
A) You'll get the alert box you wanted or
B) You'll find out why it isn't loading because the Network tab will show the browser attempting to fetch teste.js and failing in some fashion, for example a 404, which would indicate you've got a typo in the path, or the script isn't where you thought it was, etc.

Put the following line at the very end of your document. There should not be anything after. Then try to load the page.
<script type="text/javascript" src="~/Script/Teste.js"></script>
Also, try pressing F12 once the page loads to see the source. Check if you script is there.

In MVC, the tilde is used to refer to the root URL of your application. However, it cannot normally parse this information. If you write:
<script src="~/Script/Teste.js"></script>
The lookup will fail, because the ~ means nothing special in HTML. If you're using Razor as your view engine (not ASPX), you need to wrap that call in Url.Content like so:
<script src="#Url.Content(~/Script/Teste.js)"></script>
Doing this will ensure a valid URL is provided to the browser.
With that in mind, you need to check that you have the file name and folder name both correct. You also need to ensure that the file is being deployed with your application. You can do this my opening the properties panel while the file is selected in the Solution Explorer and pressing F4.

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.