Develop Reference

Javascript running from html but not php

I've read a similar question here, but can't seem to get around it in this case, so would appreciate any clarification. I have a page in php that runs several instances of JavaScript that work on cue on localhost. However one particular instance of JavaScript (that makes an arrow hide when it scrolls beyond 10px) does not run, but when i run the same from an html version of the same php page, the arrow action works as desired. Why is this the case? Here is the code of the page in jsfiddle (exactly the same is used for respective sections in the php page.)
To clarify i have added this bit of JavaScript in the following manner at the end (after footer, before body end) of the index.php file (along with other blocks of JavaScript which work as desired for their respective targets):
<script type="text/javascript">
$(window).scroll(function () {
if ($(this).scrollTop() > 10)
document.getElementById('arr_downpoint').style.visibility = 'hidden';
else
document.getElementById('arr_downpoint').style.visibility = 'visible';
});
</script>
I have added jquery as follows (and it works for all other instances on the php page except for the arrow):
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Lastly, there are no console errors. Would like to know why only this block of JavaScript isn't working from php, but works from HTML (while the other JavaScript instances work fine on both php and HTML), and how to find out what's wrong?
RESOLUTION: Just found that I'd erroneously added # while assigning arrowpoint id. That's why the script couldn't do anything with the arrowpoint, since <a> now had a # as part of its name. sorry about that careless oversight, for the time it may have taken to consider.

If you are trying to load the page directly from the file (your page url start with 'file://...') the problem is that the browser is trying to load jquery using the same protocol (file instead of http) because you didn't specify a protocol for the external files (the src attribute starts with '//', which mean something like "use the same protocol of the current page"). You can verify if this is the reason behind your problem, opening the browser console looking for errors like:
GET file://code.jquery.com/jquery-1.11.3.min.js net::ERR_FILE_NOT_FOUND
GET file://code.jquery.com/jquery-migrate-1.2.1.min.js net::ERR_FILE_NOT_FOUND
Uncaught ReferenceError: $ is not defined
To fix this problem, you should always run you html from a server (like Apache with PHP, as you already did) or you can write the external scripts url including the protocol (but this can cause other problems if you will run your page under https)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Qtip2 loads a "jquery.qtip.min.map" from internet and slows down site

I included Qtip2 on my site and used the following snippets while the files are hosted on my own server as mentioned here:
<!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) -->
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="/scripts/jquery.qtip.js"></script>
Though hosted on the same server as the website the script loads the following additional file from the CDN of Qtip2:
https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.map
This slows down my side extremely:
I could not find any information about this. Any idea how to avoid (if not necessary) or replace and host on my own server?

The final line of the Qtip2 script is a line lke this:
//# sourceMappingURL=http://cdnjs.cloudflare.com/.../jquery.qtip.min.map
Unfortunately the URL currently returns a 404. If you're hosting Qtip2 yourself, you should be able to find and remove that line at the end of the script. Otherwise, don't worry too much because the .map file is only requested when Developer Tools is open. Normal visitors won't download it.
Here's more info on .map files: jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

The *.map file is a source map. It contains informations like function positions of the non-minified source code of Qtip2. Notice that I used the minified version of it on my webpage.
Source maps help to develop with a postprocessed (e.g. minified) source code without losing the ability to look into the code, for example when errors occur.
The chrome debugger as you can see on the image in my question above downloads it by default. After disabling that function in the debugger settings the file won't be downloaded any longer.
Take a look at this video for a short information or this documentation from Google.
Firefox offers the same feature as you can see here.

I have downloaded this plugin from here and the problem is solved!
http://qtip2.com/v/2.2.1/

jQuery $.cookie is not a function

I am trying to set a cookie using jQuery:
$.cookie("testCookie", "hello");
alert($.cookie("testCookie"));
But when I load my page, I receive the error "$.cookie is not a function". Here is what I know:
I have downloaded the jQuery cookie plugin here.
I am linking to jQuery and THEN the cookie plugin.
Both jQuery and jQuery.cookie are loading correctly with 200 OKs.
I have looked at several other answers (here and here among others), to which most people suggested renaming the cookie.js file. I have renamed my cookie file "jquery.cookeee.js" but the results are the same.
Any ideas on what is going on here?
If it helps, I am creating a web application in MVC 4.

Here are all the possible problems/solutions I have come across:
1. Download the cookie plugin
$.cookie is not a standard jQuery function and the plugin needs to be downloaded here. Make sure to include the appropriate <script> tag where necessary (see next).
2. Include jQuery before the cookie plugin
When including the cookie script, make sure to include jQuery FIRST, then the cookie plugin.
<script src="~/Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src="~/Scripts/jquery_cookie.js" type="text/javascript"></script>
3. Don't include jQuery more than once
This was my problem. Make sure you aren't including jQuery more than once. If you are, it is possible that:
jQuery loads correctly.
The cookie plugin loads correctly.
Your second inclusion of jQuery overwrites the first and destroys the cookie plugin.
For anyone using ASP.Net MVC projects, be careful with the default javascript bundle inclusions. My second inclusion of jQuery was within one of my global layout pages under the line #Scripts.Render("~/bundles/jquery").
4. Rename the plugin file to not include ".cookie"
In some rare cases, renaming the file to something that does NOT include ".cookie" has fixed this error, apparently due to web server issues. By default, the downloaded script is titled "jquery.cookie.js" but try renaming it to something like "jquery_cookie.js" as shown above. More details on this problem are here.

The old version of jQuery Cookie has been deprecated, so if you're getting the error:
$.cookie is not a function
you should upgrade to the new version.
The API for the new version is also different - rather than using
$.cookie("yourCookieName");
you should use
Cookies.get("yourCookieName");

add this cookie plugin for jquery.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Check that you included the script in header and not in footer of the page. Particularly in WordPress this one didn't work:
wp_register_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array(), false, true);
The last parameter indicates including the script in footer and needed to be changed to false (default). The way it worked:
wp_register_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js');

You should add first jquery.cookie.js then add your js or jQuery where you are using that function.
When browser loads the webpage first it loads this jquery.cookie.js and after then you js or jQuery and now that function is available for use

I had this problem as well. I found out that having a $(document).ready function that included a $.cookie in a script tag inside body while having cookie js load in the head BELOW jquery as intended resulted in $(document).ready beeing processed before the cookie plugin could finish loading.
I moved the cookie plugin load script in the body before the $(document).ready script and the error disappeared :D

Solve jQuery $.cookie is not a function this Problem
jquery cdn update in solve this problem
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

jQuery CDN is not loading on LocalHost

I have a jquery cdn loading from the following:
<head>
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
then in the body I have my source for my script
<body>
.
.<script src="app.js"></script>
</body>
This is all on local, but when I view in browser I keep getting the following errors in console:
GET file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Uncaught ReferenceError: $ is not defined
I assume this is saying the jQuery function "$..." is undefined because there is an error in GET of the CDN, why would this be happening on local?

You aren't actually running on localhost (http://localhost) but on the local file system (file:///path/to/whatever.html). The protocol is copied with the // link to file://ajax.googleapis.com which of course doesn't exist.
You should set up a server on your computer so that you'd have an actual localhost accessed with the http protocol. It would have other benefits as well since browsers act a bit differently also in other regards when the page is loaded directly from the file system.

Have you tried removing the "//" at the beginning of the "src" attribute and instead using "http://"? It is probably appending "localhost" to the beginning of the URL because of those slashes.

I've answered a similar question in How to use Bootstrap CDN? and, as Juhana said, the problem is the missing protocol when loading jQuery.
The protocol-less CDN works when you are using http or https, because browsers will add the prefix to the jQuery URL with it.
But when using a local html file, the missing protocol will be file: and browsers will not be able to find jQuery in something like file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js failing to load it. In that case you must add the protocol manually, which is a pitty if you finally use the page on-line because a protocol-less URL is better and more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).

jquery.js call from HTML syntax error

I have an HTML page generated by an objective-C application and I want to load and open it in a local directory (not in a web server). The javascripts jquery.js and jquery.plot.js are stored in the same directory before the page is loaded.
I made the HTML page by following closely the examples available on http://flot.googlecode.com/
The scripts are declared in the HTML page as follows :
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>
When I open the page, the expected graph (generated by the scripts) doesn't show up and I have the following syntax error in the javascript console :
Uncaught SyntaxError: Unexpected token ILLEGAL
The script source in the javascript console is made of strange (chinese ?) ideograms which are obviously "unexpected token" if it is what the browser sees.
I have the same problem with Chrome, Firefox and Safari.
The problem is not systematic because sometimes, it works !.
I have made tests with files prepared manually and again it works sometimes only.
I have also copied the same file which didn't work in another directory where the jquery scripts were present and, surprise, it worked ! but not always...
I have exhausted all my ideas on this problem and your help will be very much appreciated

Did you copy the JavaScript from an external source? I know I have had problems when copying from JSFiddle for example. Try removing any whitespace and see if that will get rid of the illegal token error.

I just had this problem and it was because the server on which my javascript was being hosted wasn't configured to send the javascript file with the correct MIME type. See this question.
Instead of fixing my server, I just opted to use a CDN path from cdnjs.com:
//cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js