I'm using Jetty Server. So far everything is going well. The main issue is when I change something on my css and js files. Jetty keeps serving the old copies of them. At some point it starts to serve the correct one but it takes a long time until it happens.
I tried to do what is suggested here - https://blog.michaelscepaniak.com/jetty-auto-reload-javascript-and-css-files - but it was useless.
Any suggestions would be very appreciated.
Thanks
Based on what you've seen out of the Chrome dev tools, you're getting a browser-cached copy of the files. You'll need to indicate to Jetty that it should send no-cache headers to the client. You can find a solution here.
Related
The goal is to have a .html file that can be opened directly (e.g. run as file://path-to-file.../file.html in Chrome browser).
Their is a /user-json folder, where users can drop in their own .json files and the .html file loads up the json data.
I am currently using axios to a) find all files in that /user-json directory, and then b) load them in for use in the javascript.
The issue is that CORS/Browsers blocks these axios requests due to security policies.
A work around is to use --allow-file-access-from-files, but I want to provide an easy way for anyone to just drop-in their own "user-json" data into that /user-json folder, and have the .html detect and load it up, without needing to play around with their chrome browser settings or even running a web server.
Any ideas for getting this to work or alternative methods? Please don't suggest running the files on a server as I'm away of that option - I'm looking for a way users can provide their own files that the locally opened .html file can detect and load in.
There are many ways you can go about this. It's mostly a matter of picking your favourite abstraction.
Easiest would be to leverage a service like CORS Anywhere. Though of course that isn't the most robust solution, and if you're concerned with the aesthetics of your code, it likely won't appeal (note: there is an NPM package).
Alternatively, if you want to host your own solution, you can spin up a free instance, like a Cloudflare Worker; they even have an example of how to accomplish what you're after here.
Passing your requests through nginx is also possible, and arguably much more succinct and performant.
Any way you go about it, you'll have to route your requests through some kind of proxy, because a stock Chrome browser is not gonna cut it.
Bon voyage.
Using the pure html source code from the website below for a responsive youtube player on server side, it runs identical to the hyperlink's host. When I upload this into file into my google cloud server, the onclick function fails to change the ID attribute. The scrolling and other java works fine. Competently identical code.
http://woosterwebdesign.com/experiments/youtube-player.html
1st fail: link a script.js and structure the code differently
2rd fail: Change the javascript formatting.
https://stackoverflow.com/questions/27140952/how-to-change-video-source-onclick
https://stackoverflow.com/questions/23693118/how-to-change-multiple-attributes-of-a-link-using-onclick-of-radio-button
https://stackoverflow.com/questions/41354535/how-to-update-youtube-video-id-when-clicking-different-play-buttons
3th fail: After reading many variations on stack and such, I found this demo below and uploaded the identical code and now see the same problem persist.
https://jsfiddle.net/u3bntba6/
At this point i'm certain it's somehow the google cloud. After apache2 trials and tribulation, I figured I didn't have something properly installed on Google Cloud Platform VM.
4th fail: test and confirm that JQuery is installed and not the fault
Now I'm days deep in reading and I'm not sure what I'm looking for. I enjoy reading but can't find what I don't know. Any advice on how to get my server hosting a working youtube playlist would be highly appreciated.
After cycling my code into the server,
copying the code from the browser and re-pasting into my notepad,
saving,
and uploading again into the server.
I have noticed certain code is displayed with additional text that once ran again would cause functioning error. This can be easily mimiced by copying the element of an embedded youtube player and noticing additional code after the ? (meaning the break)
Same thing happened with my paypal button code. It must be an intentional layer of security. Except this time the code was rewritten in a way that could not be fixed without source. This is more likely js side I believe.
It is very likely if you're experiencing this in the future, you have broken code hiding in your html and javascript.
I'm working on my dev box and noticing that I'm having issues when I go to www.host.com vs host.com.
Specifically, I had a javascript hover effect that isn't being applied when I go to www.host.com however it works when i go to host.com.
My thoughts are that its a problem with the server and when I merge to live it will resolve itself however I am not quite sure if thats really the solution.
Has anyone ever experienced this and what should I do?
You have to check your JavaScript code in both of domain (www.host.com and host.com) because the browser usually will cache your JavaScript files to make it load the page fast rather than always take from the server. If you want to clear the cache, you can try to Ctrl + F5.
More over, to easily make your JavaScript code updated automatically when you deploy your new code in JavaScript, try versioning your JavaScript files (i.e. myCode_v_2_0_1.js) to force the browser to load new JavaScript source.
I am working on ASP.NET MVC4 Project. When i am updating JavaScript file and run my project in browsers. New changes do not reflected on page Same thing happen when I am trying on IIS Server. For that every time I have to remove browser history then it reflects but this is not correct way after deployment
Is there any other way for that?
Please guide me Thanks in advance
Your problem would be:
Browser Caching JavaScript
Check whether the browser is caching the javascript. To do it, check the header of the javascript on the browser for the attribute Cache-Control in the browser. Case yes, configure Cache-Control to no-cache on the project. Disable cache only in your development environment.
Visual Studio or IIS not reloading the javascripts
Check whether the Visual Studio or IIS are reloading your entire project after the deploy.
Suggestions to solve your problem:
Solutions to solve this problem is version the javascript.
Using different names
One way to ensure that the user will receive a fresh version of javascript is versioning the filename.
Instead of use only the name, you can concatenate a version number to the javascript.
Example:
www.example.com/script.8238823.js
www.example.com/script.3434342.js
This urls represent different paths and the browser will update.
Using query string
Another way is use a query string such v= + version.
The version can be a MD5 hash, or the timestamps or the size in bytes of the file.
Example:
www.example.com/script.js?v=999990
www.example.com/script.js?v=129
This force the browser to cache the file, and reload when the version of v, change.
I don't use ASP.NET, but I think that exists solutions for this.
I saw similar answers here which I think would help you. Specifically, the suggestion of adding a query parameter to the end of the URL which references your JavaScript file, so you can "version" them.
Not sure if this is the same problem. For my ASP.NET MVC4 project I had an Azure database and web app. The reason the javascript file was not updating was because the connection to the database had lapsed. Refreshing in Server Explorer solved the issue / reestablishing the connection with a new login fixed the issue.
Also make sure the way you are publishing has the correct database admin login and connection.
Are you using the MVC Bundle? By using bundle and js inclusion as #Scripts.Render("file name used in the bundle config file") should not sustain cache.
For a little context I'm working on a site for a client and it has to run completely offline. It's just a set of html/css/js files that you run locally. The computers it will be used on are office computers and quite locked down so I can't even use java. Luckily the project isn't overly complicated and I've accomplished most of my goals with this limited platform. The issue I'm having is I want to create some easy to change files to load the data from. Right now I have all the data loading through script tags that point to js files that can be manually edited, however I've tried to make the javascript as simple and straight forward as I can but it's still not looking very friendly to someone who hasn't programmed before.
What I would like to do is include an xml file or text file in the HTML using a script tag or something similar and then use JS to read the contents but every time I try this it doesn't actually load the file. Here's a few things I've tried:
<script type="text/xml" src="myxml.xml"></script>
<script type="text/plain" src="myxml.xml"></script>
I've tried using XMLHttpRequest but most of these attempts end in the same result.. can't do a cross-site request. Even though I'm using a url "myxml.xml" and they're in the same folder, chrome is still convinced this is a XSS attempt. So I'm starting to run out of ideas. Can anyone think of any clever way to achieve this?
IF you're goal is to just run your web-app, even offline and you do not care about cross-browser compatibility, you can consider to convert you're application to Packaged App.
It will work only in google-chrome browser but setting the right permissions, you should not have problem with cross-site requests. At this point, you could download the xml content through a noraml XMLHttpRequest.