JSpot

I was working on the web site this morning, and I noticed a typo. "No problem!" I tell myself. I'll just hop on over and fix it. So I did.

I then went back to check my newly-corrected word. I wanted to see the work of my sheer genius. Okay... I know it's a single spelling correction, but it's the little things that make me happy. The problem was, it was still wrong.

Then it dawned on me... my browser was wrong. The website it self was right, but I was looking at a cached version. And all of you loyal readers out there would be seeing that typo all the time if you've been here before. My reputation would be ruined. Well... almost.

But being the perfectionist that I am, I still had to fix it. It is a simple fix, really. All I needed to do was add a line of meta data to my HTML page. If you have a server-side application -- such as a PHP page -- that needs to re-generate its information, or if you have JavaScript that updates frequently thanks to other services, you can use PRAGMA:NO-CACHE.

While this is not a 100% shot that the browser still won't cache your page, most of the popular borwsers (IE, Firefox, Safari, etc) obey the PRAGMA:NO-CACHE convention.

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

Just add that as the first line of your file and you're done. Oh, right... that is for HTML1.0 specification. What about HTML1.1? Well, there's the curve ball. An HTML1.1 site should use CACHE-CONTROL instead of PRAGMA.

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

Why? Who knows. Some geek in the world convinced another set of geeks somewhere that the name PRAGMA made no sense, so CACHE-CONTROL was adopted as the new standard. For safety and just to be sure, I usually add both of the tags to my site so that I know it will always load the latest version of my page.

Yes, I'm adding more work to my web server. Yes, I could use "EXPIRES" instead. But the amount I'm adding at this point is negligible, so I'm okay with that. I'll save EXPIRES for a future article. At least people will get the typo-corrected versions of the articles.

Labels: HTML, JavaScript, PHP

Okay... I know the moment I post this, I'm going to get a million messages that an ID is supposed to be unique to the page, thus there should never be more than one. Thus, "Get ElementS By Id" is a misnomer. There is no such thing. You can only "Get ELEMENT By Id."

In a perfect world, you would be absolutely correct. But JavaScript is far from perfect, especially when you add in cross-browser dependencies.

I ended up with a control that generated HTML for me, which was very nice. Unfortunately (as I always tend to do) I wanted to fiddle with the output to make it just like I wanted it. Change a font here. An alignment there. Add some text to the top of each block. Set a margin. Put some padding on it so it doesn't blend into other text... you know. The usual stuff.

I could have solved most of this with CSS, but I needed to add some javascript (one line per block) to manage some of the data in it. *IF* I could get a handle to each DIV, I could assign a proper ID to it so that it would be unique, thus I could reference it later with a simpler JavaScript function.

But the code that was generated didn't give me any clean way of deciphering its DIVs from any other DIV in the form. The code that was generated looked similar to the following:

<DIV ID='Block'>
   <DIV ID=INNER>Do some nifty stuff in block 1.</DIV>
</DIV>

Now this isn't the extent of it, but you get the idea for the purposes of this demonstration. The important part here is that I don't have a name. All I have is an ID. And Javascript doesn't allow for document.getElementsById(...)

So I wrote my own.

function getElementsById(id)
{
   var divs = document.getElementsByTagName("div");
   var arr = new Array();
   
   for (var i=0; i < divs.length; i++)
   {
      if (divs[i].id == id)
      {
         arr[arr.length] = divs[i];
      }
   }

   return arr;
}

This gave me exactly what I was looking for, works well in both IE and FireFox (I haven't tried Opera or Safari. Sorry.) and I could then loop through the returned elements and assign a proper "ID" to it so that it would fit into the nice perfect world that we've all come to expect and love.

Labels: JavaScript