Using jQuery to solve problems: automatic checkbox checking

Recently I have really been getting into the javascript library jQuery. The more I learn the more excited I get about how slick it is and so easy to use. It can really provide some rally cool features to your website and also provide a good way for me as a programmer to circumvent some tasks that can be hard to accomplish using server side programming.

Today I was presented with a task on an existing website using the DotNetNuke publishing platform. The customer has created a form using a module in the framework. The form is used to order some stuff and the visitor has to click a number of check boxes depending on what they want to order. There is also ha a bunch of pages with information about the products. Each page has a direct link on i to get to the order page. Now, if the visitor clicks this link the check box for that particular product should be checked, just to make thing easier.

I have no intention on going in to the framework to change the behaviour of the module so I thought I'd try some jQuery on this.

First off the only thing I really know is that the order form will have a header like this "<h1>Order form</h1>" (potentially the module can exist on multiple pages, even multiple times on the same page) and that the product page will have the product name in the url, which is also the text of the check box.

My idea was that first check if the order form exist on the page by looking for the header then check the referrer url and compare this to the check box names. This is the code:

$(document).ready(function()

{

if($("h1:contains(Order form)"))

{

setOrderCheckboxes();

}

});

// Automatically set checkboxes if the visitor previously viewed

// a page named the same as the checkbox

function setOrderCheckboxes()

{

$("input[type='checkbox']").each(function()

{

// The text element is always a sibling directly following the checkbox

var checkboxName = $(this).next().text();

// DNN url replaces characters in PageName

checkboxName = checkboxName.replace(" ", "").replace("-", "");

if(document.referrer.indexOf(checkboxName) != -1)

{

$(this).attr("checked", true);

}

});

}

Pretty slick right?

Using jQuery: Looping an array of objects misstake

I recently spent some time to get some jQuery code to work, but I just couldn't. After a while I realised my mistake and thought this would make a great blog post (mostly so I'll remember this myself).

The task was to find out how many paragraphs contained a certain text. For the purpose of this example lets say "xxx".

Here is the jQuery I started out with (sorry about missing the indenting):

$(document).ready(function()
{

var pArray= $("p");

for(var i = 0; i < pArray.length; i++)
{
if(pArray[i].text().indexOf("xxx") != -1)
{
// Do something...
}
}
});

This crashed since text() wasn't a function. Strange since it's in the jQury reference. I got it to work with textContent() instead but not in IE. After a while I realised my mistake. The pArray[i] is not a jQuery object, so adding $() did the trick. This was the result:

$(document).ready(function()
{
var pArray= $("p");

for(var i = 0; i < pArray.length; i++)
{
if($(pArray[i]).text().indexOf("xxx") != -1)
{
// Do something...
}
}
});

Now don't forget this!

But wait! Sometimes you have to stop and think what you are doing. jQuery is more powerful than you think. Consider the following code, which accomplishes the same thing:

$("p:contains(xxx)")

Reminder to self: always stop and think and read the spec...