I have been using jQuery tabs in several places in one of my websites. And most of the tabs I have are setup as AJAX tabs. ie they are fetching data only when they are clicked on. This has been working fine in all other browsers except in IE8. IE8 doesnt show the latest content within a tab. If I go and delete a data row or add a data row, IE8 will keep on showing the old dataset. At first, I thought, this must be a case of telling IE8 not to cache anything. So, I added the following 2 meta tags in the page.
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
I thought that should fix it, but it didn’t. I was still having the same issues. I then started looking into jQuery docs to see if some attribute I could use. Sure enough, there is a “cache:false” option you can pass in on your tabs. So, I did this next.
$("#tabs").tabs({
cache:false
,spinner: ''
});
Unfortunately, that didnt solve it as well. Then, my last option was to just add some random number to the URL so IE8 identifies it as a different URL and gets new data. So, I did this :-
<li><a href="url/rows?randomseed=<cfoutput>#randrange(1,10000)#</cfoutput>" id="favorites"><span>Favorites</span></a></li>
And that solved my issue. So, I guess jQuery cache:false is not doing something right here.
I just wanted to share my experience here and see if anyone has any different thoughts.
I had been using the super jQuery Validator plugin in one of my projects. And everything was working fine, except in IE8. Isnt that typical of IE? Anyways, the problem was that I was using the validator plugin quite heavily and one of the forms simply refused to work in IE8. I did not try in IE6 but I would assume the problem would be the same in IE6 as well. I tried all kinds of things, like validating my Javascript code and going over it line by line and making sure there are no bugs that I missed.
None of that worked. After about a million WTF’s and approx. 6.5 hours of time wasted, I found this out. http://www.seodenver.com/jquery-validator-annoyances/
The solution is to use jquery.validator.min.js instead of jquery.validator.pack.js (which I was using). As soon as I changed the .pack.js file to .min.js file, everything started working. I would think its something to do with the the encoding of the JS etc. But I am glad I found the solution, finally.
I just wanted to blog about it so someone else can save some time with this little tip.
I have been using the excellent jQuery Validation plugin in my latest project. It provides all the basic rules that you will need for validating your form. However, I had a form with 2 username fields on it and the requirement was that they should not be equal to each other. I guess this is not a very common scenario, which is why the “notEqualTo” rule was not included in the original ruleset of the plugin. There is a “equalTo” rule already, though.
More »
I have been using this excellent jQuery Form Plugin lately and I came across a little gotcha today. First of all, this jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. More »
I had a situation today, where I wanted to replace part of the class of a given DOM element. To be more precise, the DOM element I was dealing with was like this :- More »
I just finished reading the Learning jQuery 1.3 book, authored by Karl Swedberg and Jonathan Chaffer and published by Packt Publishing . They sent me a free review copy of the book and this is a personal and independent review of the book. More »
We can use the onerror event of an img tag to load an alternate image if the main image is not found. Something like this :-
<img src="my_image.jpg" onerror="this.src='offline.jpg'" />
The above HTML code tries to load my_image.jpg and if not found, loads offline.jpg as an alternate. This is pretty good because this means you dont have to do any server-side checks for file existence which can be really heavy if there are 50+ or so images on the page. This is all good, except that this code wont be treated as valid XHTML. Apparently, onerror is depracated. So, what to do?
The solution is to not use onerror in the <img> tag but to add the onerror event to the <img> via Javascript. And jQuery is the best option I think for this job. Here is what I came up with :-
// wait for page to load
$(document).ready(function() {
// add fixBroken code to all images on the document
$('img').fixBroken();
});
$.fn.fixBroken = function(){
return this.each(function(){
var tag = $(this);
var alt_img = 'offline.jpg';
tag.error(function() { // this adds the onerror event to images
tag.attr("src",alt_img); // change the src attribute of the image
return true;
} );
});
};
This code only runs after the page has loaded and adds the onerror event to all img tags on the document. And the page would validate as XHTML as well.
Does anyone have a better solution to this little issue ?
I had a cftextarea with richtext enabled and I had another dropdown which was supposed to change the value of the cftextarea when selected. So, I was doing it the old way as I would have imagined. More »
I just finished reading the Learning Dojo book, authored by Peter Svensson and published by Packt Publishing . They sent me a free review copy of the book and this is a personal and independent review of the book. More »
I have used several Javascript libraries in the past (including ExtJS, jQuery etc) and they are all pretty good in what they do. Recently, I got a chance to look into the Dojo AJAX JavaScript Toolkit and from the looks of it, it appears to be a promising and impressive toolkit. Here is a little bit of what Dojo is :- More »
