The system setup as follows:
Page is a normal html page served from server. Once page loads, a jquery load request is made to a controller on server which is spring mvc. Controller then sends down a freemarker template with the rest of the page content (note this is placed in div).
The freemarker template itself has some javascript file includes (i.e.,
<script type="text/javascript" src="..."/>.
So I read that doing a ajax load this way, the javascript files are going to be inlined in the page, rather than treated as external files. My question then is how best to tell the browser not to cache these javascript files as getting them refreshed while developing often requires actually clearing the cache manually versus just force reloading the page.
Would appending a timestamp to the javascript includes work in this case (i.e.,
<script type="text/javascript" src="somefile.js?v=(timestamp)">
or setting
$.ajaxSetup({ cache: false });
timestamp should work... like (new Date()).getTime() should generate you a number that is different each time you send your request, so the browser shouldn't be able to cache the file.
Related
I am trying to achieve the below in ASP.NET MVC3 web application which uses razor.
1) In my Index.cshtml file, I have the below reference.
<script src="/MySite/Scripts/Main.js"></script>
2) I load my home page for the first time and a http request is made to fetch this file which returns 200.
3) Then, I made some changes to the Main.js and saved it.
4) Now I just reload the home page (please note that I am not refreshing the page) by going to the address bar and typing the home page url and pressing enter. At this point, I want the browser to fetch the updated Main.js file by making a http request again.
How can I achieve this? I don't want to use System.Web.Optimization bundling way. I knew that we can achieve this by changing the URL (appending version or some random number) everytime the file changes.
But the challenge here is the URL is hardcoded in my Index.cshtml file. Everytime when there is a change in Main.js file, how can I change that hardcoded URL in the Index.cshtml file?
Thanks,
Sathya.
What I was trying to achieve is to invalidate browser cache as soon as my application javascript file (which already got cached in the browser) gets modified at the physical location. I understood that this is simply not achievable as no browsers are providing that support currently. To get around this below are the only two ways:
1)Use MVC bundling
2)Everytime the file is modified, modify the URL by just appending the version or any random number to the URL through querystring. This method is explained in the following URL - force browsers to get latest js and css files in asp.net application
But the disadvantage with the 2nd method is, if there are any external applications referring to your application's javascript file, the browser cache will still not be invalidated without refreshing the external application in browser.
Just add a timestamp as a querystring parameter:
var timestamp = System.DateTime.Now.ToString("yyyyMMddHHmmssfff");
<script src="/MySite/Scripts/Main.js?TimeStamp=#timestamp"></script>
Note: Only update TimeStamp parameter value, when the file is updated/modified.
It's not possible without either using bundling (which internally handles version) or manually appending version. You can create a single file bundle as well if you want.
Im having a really difficult time here. Actually when I load a HTML file with Jquery which contains Javascript files (included in my html), jquery adds timestamp to the file source to prevent it from being cached whereas this timestamp is not available in our source. What I want to do is remove the timestamp from javascripts to allow them to get cached. It would be great if someone could help me with this.
I have personally used code like the following to set HTML content obtained from an AJAX request, without adding the caching busting query string to any scripts in the HTML.
// Get ajaxHTML from an AJAX request.
var ajaxCache = $.ajaxSetup().cache;
$.ajaxSetup({cache: true});
$('.someelement').html(ajaxHTML);
$.ajaxSetup({cache: ajaxCache});
Basically it changes the default settings temporarily before calling .html, then sets it back afterwards.
In a page that I work with, we load content from an external server from a provided dynamically created javascript file.
In one of the sections of the document that displays header content, we have the sample line:
<script type="text/javascript" src="externalScriptLocation"></script>
The problem is that when the external script location is down (it could be a 404, but in this case it's actually a 503 - service not available), most of the page's functionality appears to work but the page is not able to properly submit data.
Is there a way I can wrap this with a try/catch or something similar so that failure to load this bit of javascript (which is for a header element that, while it should be there, shouldn't cause these issues!) so that the site can function normally?
If it matters, the server side language is Java with Java Server Pages as the view.
Often, when creating single page apps, you need to populate the app with some form of data (i.e. in the json-format). This is usually done through an AJAX-call.
Now, this isn't the best possible solution. The DOM needs to be loaded before the AJAX call is launched, and it's semantically awkward to do this async through javascript.
Is it possible to load a JSON-resource in the same fashion as a <script src="some-file.js"> automatically fetches some-file.js, or fetches some-image.png automatically when the DOM loads?
The correct MIME type for JSON is application/json
It is possible to include it in the JSON file, as a script. If the path is relative, just use this code
<script type="application/json" src="path/to/json/file.json"></script>
I would disagree, however, that this is semantically awkward. Simply load it with $.getJSON
I'm loading some content into a jquery-ui dialog via .ajax. That's all working fine but now I've been given an OpenX ad to embed into the dialog & can't figure out how to do it. I know all the script is stripped when coming in via ajax, & I know how to use $.getScript to load .js files for use in the dialog, but the OpenX ad script I've got uses document.write so I think it's expecting to be embedded inline into the desired position on the page.
I've tried appending the escaped script string into the div on ajax success of the main content as below, but this results in the page being redirected to a page with just the ad on it.
Attempt shown below:
$("#" + idHelpPage).find(".adScript").append("<script type='text/javascript'>var m3_u = (location.protocol=='https:'?'https://d1.openx.org/ajs.php':'http://d1.openx.org/ajs.php');var m3_r = ... etc etc
I'm ok with jquery but not great with javascript, would really appreciate any help! Also if you want to see any other code.
Certainly this question was asked quite some time ago; however, the openX ajs.php file returns a document.write() function. If you use jQuery's $(document).ready() class method, it will overwrite your current page.
document.write() will only correctly execute (without overwriting your current page) if it is called during the page load procedure.
There's two ways to overcome this obstacle, and that would entail using AJAX (if your openX server is on the same URL domain as your website, or if you have server side scripting such as PHP, ASP, etc) or JSONP (if your openX server is on a different domain).
You'll have to setup a server side script with PHP, ASP, etc to have your jQuery call using AJAX/JSONP and have that server script load in the URL and return the contents of the document.write() function that the ajs.php file returns.