I've recently been finishing off a site where I needed a lightbox to simplify showing several photos for each product. I've used Thickbox in the past, as it comes with WordPress by default, however this is a custom built site. I already had the latest version of jQuery running for other functions on the site, so just needed to grab a copy of thickbox, upload that, add the necessary code and that should be that.

3 hours of going around in circles later… and still no joy! After checking over my code piece by piece, trying the code out of WordPress, trying the page on another server just in case, and trying every other option I could think of, I finally tried uploading jQuery 1.2.6 from my WordPress 2.7 folder on my computer, and hey presto, it all worked!

It seems that there is a minor change required for thickbox to work with the latest jQuery version. After a bit of searching around I found out that what's needed is on line 79 of the existing thickbox file you need to change the line

Existing Thickbox Code

1. TB_TempArray = $("a[@rel="+imageGroup+"]").get();

to not include the @ sign in it ie.

New Thickbox Code

1. TB_TempArray = $("a[rel="+imageGroup+"]").get();

Such a simple change that caused a few hours of frustration! So hopefully it may be of use to someone else

I've been adding in a few jQuery additions to this site recently, and will be adding a few more. Nothing will stop working if you don't run JavaScript, I'm not that ignorant You'll just notice that on the sidebar on the right, some of the lists are now 'closed', click on the plus/minus sign to open them up. Also on the single posts the comment form has been hidden and if you click on 'Leave a Comment' it will appear (I wonder how many comments I don't get now with people not realising it's there…?!).

I've still got a bit of playing to do, but just so you're aware, a few things may change. Hopefully for the better

Any thoughts on the comment form though? I like having it out of the way until it's needed but obviously don't want people to think that the form has gone. Time to have a bit of a think I guess. All opinions/thoughts welcome

Last month (doesn't time fly!) I wrote about improving my jQuery, whereby I wanted to just improve the code I'd been using on this project I've been working on for 3 months now. I'm all for more efficient code, and of course as with most programming languages, the more you use it, the more you learn, and the more efficient and improved your code becomes.

With thanks to Sam Hampton-Smith and Marc Grabankski (who is the developer of the UI Datepicker, a fantastic jQuery popup calendar), I managed to get my questions answered, learning plenty in the process! I said I'd write up what I actually did so that it's maybe of use to others (as I couldn't find a complete answer online anywhere).
Continue Reading

Usually you blog about something, putting your opinion over about something. Well today it's my turn to ask the questions! I have a number of jQuery questions and figured I'd leave them up here for either me to then find the answer or for someone who may know the answer to give me a few hints

This isn't a 'how do I do this'. What I have already works, but I'm sure it could work a lot more efficiently and a couple of questions linger in my mind as to how or even whether it's possible.

Update: I've got the first issue working thanks to Marc Grabanski (who has an excellent site and is a must read for any jQuery user!)

1. I need to create a function that resets several select lists. However the id of each select list is dynamically generated. What I have is a select list with a list of parents in and each has an ID. Then each parent has a child select list, and the child select list uses the parent ID to make it unique (with me so far?!). At present I use PHP to generate the function by looping through the parent IDs (retrieved from a database), which gives me:

JavaScript function

1. function resetLists() {
2. $('#child1')[0].selectedIndex = 0;
3. $('#child2')[0].selectedIndex = 0;
4. $('#child3')[0].selectedIndex = 0;
5. }

However, I'm sure there must be a way that I can just use jQuery to read through all of the option values of the parent list and get the 1, 2 and 3 from that and do the same above i.e have a function that pretty much says 'get each value from the parent list and for each value set the selectedIndex to 0 for the child + value list. I'm sure it's possible, but how, I don't know (yet).

2. This is one I've not actually got working yet. I'm working on an admin area and I've got the parents listed in a table. Then at the end is the option to remove the parent. However as each parent has one or more children, the children need to be moved to another parent. So when you click 'Remove' it gives a select list of the available parents to move the children to. You can select the new parent and then click Go. However at this point I don't want the form to actually submit and reload the page (which it's currently doing), I want the form to trigger a function which runs the PHP file to move the children, delete the parent and just remove the table row of the parent off the screen.

So far I've got it to run the function, however once the function runs the page refreshes. The only way I've got this function to run is by using the onsubmit attribute in the form tag. Now I know I could change the submit button to a standard button, but surely there's a way to prevent the form form submitting? I've tried putting return false; at the end of the function that's run, but that doesn't seem to work. I've tried putting the function in the action with javascript: at the start of it, but that really didn't work!

Update: Some code may help. This is what I have at present.

Remove Function

1. function exremtrade(id) {
2. var newtrade = $('#trade_' + id).val();
3. $.get("/admin/includes/remTrade.inc.php", {id: id, nt: newtrade}, function(data) {
4. if (data) {
5. $('#message').text('Trade details removed.').fadeIn();
6. $('#row' + id).fadeOut();
7. } else {
8. $('#message').text('Error removing Trade details.').fadeIn();
9. }
10. });
11. return false;
12. }

I've then got a form that has the attribute onsubmit which runs

onsubmit="exremtrade(2)"

Where '2' is the ID of the trade to remove. The new trade ID is in the select list, also in the form. Now if I remove the form and just use a button and the select list, it works. But of course that isn't valid, and ideally the form should be there just in case the user doesn't have JavaScript (plus I'd like to understand why it's not working!). However, with the form in place, and the button as either a button or submit input, the function runs, works as it should, but then the form gets submitted which effectively refreshes the page and loses my update message.

That's my two questions so far. I'm currently reading jQuery in Action thanks to Si's recommendation, which is a great book, I'm just a slow reader! 2 months ago I didn't have a first clue about AJAX, and now I'm quite confident with the basics. My first AJAX enabled site has been live for almost a week and it's not collapsed! I'd just love to be able to improve it further

I've mentioned recently that I've had to start dabbling in AJAX (do we still write this in capitals?) and whilst my work has mixed both the Prototype and jQuery frameworks, I'm trying to learn jQuery and do everything in that so that I can drop Prototype. The main reason being that the jQuery framework is about half the size of Prototype, plus there seems to be more on the subject from what I've seen so far (also the calendar I'm using uses jQuery so it makes sense!).

I'm still on the learning curve, a very steep one at that, and have started at the beginning on Learning jQuery, which has been a good read so far, with clear explanations. I've also implemented a couple of scripts which may be of interest.

The Calendar

I've been working on a form that asks for a date input (amongst a million and one other options!). Initially I gave a drop down but the client came back asking for a popup calendar. As I'd started using Prototype on the site I was working on, I purposely went out and found a calendar that also worked on this. That was fine until the client complained that you could selected a date in the past. As this is for making bookings he wanted it to only accept present and future dates. Of course the PHP checked this, but he didn't want to have to submit the form to be told the date was invalid. That wasn't so hard, except then I was told that some options would also require the earliest date to be 2 days into the future. So I needed not only a calendar that would restrict the date on load, but also dynamically change depending on which options had been selected.

After a chat with a friend he pointed me in the direction of the UI Datepicker, which seemed to do everything I needed and more. It's taken a fair bit of playing and testing to combine the various demos together, but I've finally got it working exactly how I need it. On load it displays the available dates from 'today' onwards. Then on selecting certain options, this changes to perhaps from 'tomorrow' onwards or in two days time onwards. Certainly not standard requirements but definitely handy to have a good calendar that can deal with that.

Tabs

On another site I needed to get a tab system in place to allow more content on a page without overwhelming the visitor with it all on display. I looked at Dom Tabs and at first they seemed to do exactly what I needed, until I had to add in headers around each list item. That stopped everything from working, so a quick search for a new tab system found UI Tabs where you can see some great demos.

I've had a fair few fun and games with these. I originally found version 2 of the tabs, got them all working and then realised that they had come with an old version of jQuery (1.1.3 when 1.2.6 is available) and the next day I discovered the latest version! So I set about trying to get the latest version working but getting a download of the latest version just wasn't as easy or obvious. So today I went through the demo site, visited every page linked to, copied the source and got it working locally and then slowly transferred the content over to the site. Eventually I got it all running off the latest version of jQuery!

Lightbox

Finally, once I finally got the latest version of jQuery running, I could upgrade the lightbox script to prettyPhoto. This was relatively simple to add in, except that the gallery method creates a slot for every image linked, regardless of whether it's already been linked to. In the old lightbox it could detect this. For example, you have 3 images, and they also have a title/name below them. So you can click on the image or the name and get a larger view of the image. With the old lightbox it could detect this and just show you 3 large images in the gallery, but in this new script it shows 6 images, duplicating each one twice. Even if I set the 3 thumbnails to use gallery1 and the 3 titles to gallery2, it seems to note that there's only 3 images in the gallery but still goes by the order on the page in which the links are listed, and not by the gallery name.

Anyhow, small issues which are now irrelevant, as the site owner has changed his mind and picked a whole other lightbox script!

Prototype to jQuery

The main site I've been working on, which currently has both frameworks loading, requires just one other job moving over, which I've yet to learn. This is how to run a PHP file and subsequently write the result from that into a div or paragraph. I think the rest of my JavaScript is standard stuff and doesn't require either framework to run, and simply uses the DOM. So once I can work out this, probably simple, job then I can ditch prototype altogether.

Any other resources of learning for jQuery are welcomed. I may look at books at some point, but considering my ever growing library of unread books, an online resource may be looked at more initially!