Posts Tagged ‘jQuery’
jQuery Checkbox Replacement
Posted by: Steve Johnstone in Web Development on February 3rd, 2010
Ordinary checkboxes on the web are a bit boring. I’ve seen a few replacement scripts, but I thought that it would be pretty easy to write my own.
function replaceCheckbox(name, on, off) { $(name+':not(.checkbox-replaced)').each(function (){ var image = ($(this).is(':checked') ? on : off); var imageElement = $('<img style="cursor:pointer;" src="'+image +'" onclick="$(this).next().click();"/>'); $(this).before(imageElement).hide() .addClass('checkbox-replaced'); imageElement.click(function (){ $(this).attr('src',(this.src.indexOf(off) > 0 ? on : off)); }); }); }
It seems to do the job fairly nicely, so I’m quite happy. It does require the use of jQuery. To use it simply go:
replaceCheckbox('input[type=checkbox]:visible','check_on.png','check_off.png');
Where Did My Event Go?
Posted by: Steve Johnstone in Web Development on September 16th, 2009
For the past day I’ve been struggling with a bit of Javascript. Like most problems involving browsers, it worked perfectly in Firefox (Whoo!) but died a horrible and confusing death in Internet Explorer (Boo!).
The code was using jQuery to clone a selection of rows in a table and append them to the same table. This worked fine, but one of the rows had an autocompleting field, which refused to work the second time someone did a search. This only applied to the duplicated rows, and only on the second search. The first time worked perfectly, no matter how many rows had been duplicated.
The culpret turned out to be a div that was wrapped around the added rows, in order to manipulate the new rows as one jQuery object. It turns out that if the DOM is not perfectly formed in IE, any future manipulation of the DOM will result in events being stripped.
jScript AutoComplete and XML
Posted by: Steve Johnstone in Web Development on January 27th, 2009
Recently I’ve been getting really into using the jQuery library for all my javascript needs. When our project needed a way of populating a listbox, I turned to the AutoComplete plugin by Jörn Zaefferer. This plugin is pretty easy to use, and allows you to filter a javascript array using an input field, and displays the results as a nice list below the input. This seemed to be pretty ideal, but unfortunatly the documentation is rather sparse on a few key points. First of all, although the plugin accepts a URL, the documentation doesn’t tell you what to do if your URL is XML instead of the standard JSON.
After going through the code, I discovered an undocumented parse function, which allowed me to do exactly what I wanted. The XML that our CMS outputs is like this:
< ?xml version="1.0" encoding="utf-8"?> <drivers> <driver id="439516"> <name>Johnstone, Steve</name> </driver> <driver id="43423"> <name>Johnstone, Bob</name> </driver> </drivers>
And the code for the Parse function was:
$("#identifier").autocomplete( "http://www.yoururl.com/results.xml", { parse: function (data) { var parsed = []; $("Driver",data).each(function() { var row = [ $("Name", this).text(), $(this).attr("id") ]; parsed[parsed.length] = { data: row, value: row[0], result: row[0] }; }); return parsed; }, } );
Where, in the parsed array that you return, value: is the value that the data is being filtered on, result: is the value that is placed in the input box, and data: is an object that contains any additional information that you wish to get from the XML (in my case the ID of the Driver).
If you wish to use the additional data that you get back, then on the end of the plugin initilization add the following:
.result(function (event, item){ // Your code goes here. });
Where item is the array of data that you created in the parse function.