I have just found out SitePoint is giving away free PDF copy of this jQuery book. I have just downloaded mine, go ahead and download yours. 
Archive for category Javascript
I have been using the excellent Datepicker Plugin by Keith Wood in one of my projects, along with Facebox and came across a gotcha today.
The Situation :-
I am basically using a link on the main page to open up a popup style window using Facebox. This main page itself is loaded via an AJAX call as one of the tabbed page content, not that it matters but I thought I would mention it. And in the Facebox window, I have a form which has some Date fields in it. I am using the mentioned Datepicker plugin to bring up a nice looking calendar for those fields.
The Problem :-
The DatePicker calendar popup doesn’t show up when you click on one of the Date fields, as it should. But when you close the window, you can see the remnants of the popup calendar, implying that it indeed opened up but was below the Facebox popup window, therefore, not visible. Read the rest of this entry »
A reader asked me a question today on how to use the jQuery Validator to validate if 8 email address fields have a unique value. I have blogged about this before but that was for only 2 fields. Simply checking if one field is not equal to another. But here, we have a different situation. We need to check if all the 8 (or however many) fields are different from each other.
So, I thought I will blog about this and post the solution I came up with. Feel free to correct/improve. What I did was wrote another custom validation rule in additional-methods.js which looked something like this :- Read the rest of this entry »
jQuery tabs and IE8 caching
Jan 20
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. Read the rest of this entry »
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.
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. Read the rest of this entry »
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 :- Read the rest of this entry »
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. Read the rest of this entry »
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 don’t 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 deprecated. 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 ?
