Posts Tagged ‘javascript’

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

Flowchart Diagrams : Detailed Tutorial

A complete tutorial about flowchart diagrams which can help beginner programmers learn programming languages such as javascript , php or C++ . The tutorial contains lots of samples which helps beginners learn easier. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

AJAX POST Method Request

All AJAX Application are based on small requests of data between client and server. Like in the standard HTML form requests, in this AJAX requests have two types of requests – GET and POST. Sometimes POST method is better to use than GET, because he is more secure (requested parameters cant be seen normally in the url), POST method can handle more that than GET, etc.

In this tutorial I will show how you can make your AJAX applications to use POST method.

Let say that we have some Javascript function with two parameters. This parameters have to be checked for something, and when they pass this check, next to be sent with POST method. Here is our simple Javascript function:

  1. function check_data(var1,var2) {
  2.  if (var2>var1) {
  3.   return "Larger value is: "+var2;
  4.  } else if (var2<var1) {
  5.   return "Larger value is: "+var1;
  6.  } else {
  7.   return "The two values ae equal.";
  8.  }
  9. }

The result from the above function, and with sample values for var1=5 and var2=7 will returned string:

Larger value is: 7

And here is Javascript function with added AJAX POST functionality which send var1 or var2 to the server for future manipulations.

  1. function check_data(var1,var2) {
  3.  // check for bigger value between var and var2
  4.  // and send it to the server. If equal send whichever.
  5.  if (var2>var1) {
  6.   var send=var2;
  7.  } else if (var2<var1) {
  8.   var send=var1;
  9.  } else {
  10.   var send=var1;
  11.  }
  13.  // geting XMLHttpRequest object
  14.  var xmlhttp=GetXmlHttpObject();
  15.  if (xmlhttp==null) {
  16.   alert ("Your browser does not support AJAX!");
  17.   return;
  18.  }
  20.  // make unique request prameters for prevent request from caching
  21.  var date=new Date();
  22.  var timestamp=date.getTime();
  23.  var url="/ajax.php";
  24.  var param="value="+send+"&timestamp="+timestamp;
  25.  // handle ready status of request
  26.  xmlhttp.onreadystatechange=function() {
  27.   // check for really ready
  28.   if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
  29.    // simple alert of server respond
  30.    alert(xmlhttp.responseText);
  31.   }
  32.  }
  33.  // define reuqest method – POST
  36.  // define header for content type of data
  37.  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  39.  // define header for size of request and send actual request
  40.  xmlhttp.setRequestHeader("Content-length", param.length);
  41.  xmlhttp.setRequestHeader("Connection", "close");
  42.  xmlhttp.send(param);
  43. }

In this case sending headers (content-type, content-length, etc) for the request is mandatory. When GET method is used this not need.

Please note that this function uses external GetXmlHttpObject() function for handling XMLHttpRequest object which we already was examined. Also our AJAX function uses timestamp parameter for preventing the function from caching the requests.

You have to note, the in your server script (ajax.php in our case), you have to use method for handling POST data if server side scripting language which you are using is set to makes differences between GET, POST, SESSION, COOKIE, etc. global variables.

VN:F [1.9.18_1163]
Rating: 2.6/10 (15 votes cast)

100% DIV height with CSS

The latter standards do not allow the use of height 100% (height: 100%), leading to major headaches in the realization of many of the designs. Of course designers prefer to use the entire field of view, even if there is not enough content to fill it and this led to major headaches for developers. Options for implementation are two, one is to use javascript, and other using height: 100% although it is not allowed. Of course, both options have several drawbacks. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 1.8/10 (12 votes cast)