jQuery $.cookie is not a function - javascript

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>

Related

javascript stopped working but works on diffrent server

I need your help with a strange problem.
The company I work for has a company website.
I have been updating pages on their website the last couple of days.
After updating, I decided to upload the website,
but suddenly the javascript doesn't work anymore.
I get the following error when I press f12
Uncaught SyntaxError: Invalid or unexpected token
base.js:1 Uncaught ReferenceError: $ is not defined
at base.js:1
On the test server (my own server) it works without any problems.
On the main server (company server) it doesn't work.
What could be the issue for this?
It's not on just one page, it's on every single page that the Javascript doesn't work.
[update]
I know about the different versions of Javascript.
This is already fixed in the testing environment of the company website.
This still doesn't fix the current problem.
Thank you
Wesley
On the test site you use jQuery 3.3.1:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
On the main site you use jQuery 1.10.1:
<script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
Please both use v3 if you don't have specific needs.
It looks like you are using jQuery for your JavaScript code.
The header of the first page contains a tag for loading jQuery:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
But on the second page, you never load jQuery.
As I don't know how the file structure of your server is, I cannot tell you the exact path, but you need to make sure you load jQuery in a similar way on your company website.
EDIT:
I noticed that you load jQuery from https://www.aska-ltd.jp/js/jquery-1.10.1.min.js. However, this file is not the original file (compared to https://code.jquery.com/jquery-1.10.1.min.js using MD5). If you want to use this old version (not recommended), you can try to re-download it or simply load jQuery in its latest version from its official server (recommended).
As #NoobTW and #SapuSeven have said, there is an error in the jQuery script on the production site.
On the production site, try replacing this <script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
with this <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
Also, if you load jQuery from a CDN, it may help simplify things. Here is one option for jQuery 3: <script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
See here for more options: https://code.jquery.com/
JQuery never loads at all on the main server. I tried taking the code from the file on the server and evaluating it, but discovered some sort of corruption in the JQuery file your server is returning:
If the same thing happens with an updated version of JQuery, check whether it’s also corrupted. It may be some sort of transformation the server is incorrectly performing.

How to make external javascript link with variable version parameter (changeable parameter)

I want other web sites to link to js file from my domain, like this:
<script language="javascript" src="http://mySite/jsfile.js"></script>
To avoid the cache problem then I need to add a version parameter to the JS file.
But if the version parameter is static then they have to keep updating the link with every new version, so I need a "CHANGEABLE" parameter like this:
<script language="javascript" src="http://mySite/jsfile.js?new Date().getTime()"></script>
How to do that?
in other way: HOW TO MAKE THEM ALWAYS GET THE LATEST VERSION OF MY JS FILE WITHOUT THE NEED TO RE-UPDATE THE JS URL IN THEIR PAGES.
Thanks in advance for your help :)
You can write your <script> tag with js:
<script language="javascript" src="http://mySite/jsfile.js?new Date().getTime()"></script>
with:
<script>
document.write("<script language="javascript" src="http://mySite/jsfile.js?k=" + Date.now() + "'><\/script>");
</script>
this way its posible to add some number or timesamp after your jsfile.
I would make a script, which call my api. Get the lastest js script code, And include it on site,
this way, it's doesn't matter if it's cached the url for the script.
First, Make a .js file, which use Jquery getScript to get and execute. the script you won't have cached .
get the people to use this. then whenever the site is loaded, it get's a new version of the script from your server.
Jobs done.
Im not providing anycode, since, it's more or less using the Jquery getscript. and the docs for that, is better then any sample i could make.

Append timestamp on src or href attribute with JavaScript

For 2 days I've been looking an answer, but I can't find a good solution to my problem.
I'm developing a web application where I can only use standard front-end files (HTML, CSS, JavaScript (I use jQuery)). There's no back-end script merged with the HTML.
What I'm trying to achieve is to add an <script> tag to my HTML, but with a timestamp added as a variable, such as: <script type="text/javascript" src="js/javascript.js?c=1421656264439"></script>.
With PHP it would be simple to achieve, because you can just add the timestamp along with the HTML. But since I must work with front-end code only, what would be the best way to add a script or link tag with a timestamp, so the script doesn't get loaded from the cache?
Since the client uses Internet Explorer 10, I will need an answer that will work with that...
Could anyone help me out?
While creating an element, setting the attributes and appending it to the document kind of worked, the beforeSend headers weren't set on the AJAX calls in the javascript.js for some reason. This was also the issue by using $.getScripts('js/javascript.js');
I suddenly realised that I could try a simple document.write() within a script tag. Turns out that it works like a charm.
My fix:
<script type="text/javascript">
var _c = new Date().getTime();
document.write('<script type="text/javascript" src="js/javascrtipt.js?c='+_c+'"><\/script>');
</script>
</body>
(I can't believe I couldn't come up with this solution earlier)
Since you are working with jQuery I recommend you to do it this way:
$.getScript( "js/javascript.js" );
From jQuery docs:
By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.
Dynamically load the javascript/css. Also while loading add the random version.
e.g. http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Anyway, I believe you already know what you are doing is not the best practice. In case of more specific requirement HTTP header can be set to no-cache for the JS/css files. This information can be set in the HTTP server being used without need of a programming language.
How to control web page caching, across all browsers?
Please take a look at jQuery getScript().
I think it could solve your problem:
By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.

jquery not work with local reference but work with google reference

I use jQuery in my web project.
When I use local reference like this;
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
I receive this error:
$ is not a function
but when I use the Google reference in my project like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Everything works fine.
It is noteworthy I use telerik component in my project.
It looks like the problem is simply that the relative path for the import is incorrect. Hence it's not loading jQuery and the call to $(document).ready is undefined.
You need to correct the path to the Scripts folder.
most probably ur not loading jquery right
Take these steps :
use developper tools in your browser (my favorite is firebug for firefox)
go to the scripts tab and check if jquery.js is there
if its there and its empty, check the url, maybe ur relative path is incorrect. to verify it you can put the url in your browser and fix it until the js file loads

jQuery conflicts with another jQuery library

I am currently trying to implement a jquery slider into a joomla website.
I already implemented NoConflict(); so that it doesn't step into joomla. And it works, BUT for another reason wich I do not understand it enters another jquery file called jsloader.js of a plugin I use for picture gallery display.
I suppose all the module jquery files get preloaded before the one im calling inside the template.
it enters the function() in the jsloader.js instead of the one in my jquery file.
How Can I force it to enter my jquery file instead of other
The first problem is that you've got the jquery.js file coming after the jsloader.js file. You need to make sure that jquery.js is included before any plugins - the order is important.
The second problem is that this:
<script type="text/javascript" src="//templates/template/js/jquery-1.2.6.min.js"></script>
Doesn't do what you think. When there are two slashes at the beginning of the URL, the browser interprets the first entry after the double-slash as the hostname, not a directory. What you actually want is:
<script type="text/javascript" src="/templates/template/js/jquery-1.2.6.min.js"></script>
With only one slash.
In case you're wondering, the reason for this is so that you can specify a file on a different host, but using the same scheme. So if you have a page that works in HTTP and HTTPS, then you can specify files on a different site, using the same scheme (HTTP vs. HTTPS) by using the src="//example.com/script/whatever.js" format.

Categories

Resources