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

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.

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.

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 $.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 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

Calling external .js from ASP.NET MVC

I'm JavaScript newbie. What I'd like to be able to do is to call a function from .js file sitting in ASP.NET MVC project's scripts folder.
The function is:
function myfunction() {
alert("HELLO");
}
...and it resides in file brfix.js
On a viewpage I call it like this:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
myfuntion();
});
</script>
But the code doesn't work. However, if I place js-code directly onto the viewpage, it works, like this:
<script type="text/javascript">
$(document).ready(function() {
alert("HELLO");
});
</script>
How to call a file-based js function? Could some JavaScript-Big-Kahuna help me out? =)
If that code is pasted directly from your source code, you have a typo so that'd be why it doesn't work!
your function is called myfunction(), but you're calling myfuntion()
you should enable js errors in your browser when developing. You don't say which browser you're using. For IE it's in Tools - Options - Advanced. Uncheck the "disable script debugging" options. In firefox I'd use something like FireBug as Dror says, if memory serves there are things that appear in the event of a javascript error. If you are still having problems I would try installing Fiddler2 (in IE) and building a request for the js file and see what comes back.
Another option would be to put a debugger; call just before you call your function, you should then be able to step through the javascript.
It may be that the reference to the external file is wrong:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
Make sure the reference is correct.
You can try by using view source to see the actual location ../../Scripts/brfix.js gets translated to in the final page.
You can also try with FireBug of FireFox.
If your mvc site is the root site in iis you can start the script src with a slash to get to the scripts. otherwise you can use an asp:ScriptManager to include the scripts
As other posters have mentioned, there is a typo. However...
Check out the Url.Content() method for referencing your site content. (images, scripts, etc...) Using ../.. isn't reliable, especially if you have varying levels of depth in your URLs or your application lives in a subdirectory.
Here's a helper I use in most of my projects, for example:
public static string Script(this HtmlHelper Html, string url)
{
UrlHelper Url = new UrlHelper(new RequestContext(Html.ViewContext.HttpContext, Html.ViewContext.RouteData));
string html = "<script type=\"text/javascript\" src=\"{0}\"></script>";
return string.Format(html, Url.Content(url));
}
And here it is being called:
<%= Html.Script("~/public/js/blah.js") %>
I had the same problem and it turned out that I had a few js files that weren't being found. If your MVC project structure is the default VS setup and your View page is in Home for example, then I think below will find the file:
<script src="../Scripts/brfix.js" type="text/javascript"></script>
But even if that one is found other js files not being found caused my $(document).ready not to work. Check your page in Firefox's Firebug, if a file isn't found you will see html markup with a message saying a resource could not be found, located underneath the offending reference. Once I resolved all the js references then my $(document).ready worked.
Strangely VS was telling me it couldn't find the js files when the references were correct, and wasn't flagging the problem when the references were incorrect.

Categories

Resources