carthage webdev

One of the only problems that has slowed us down while developing our CMS has been the steep learning curve associated with changing some functionality in the built-in admin without writing it as a custom view. This problem reared its head again when I was building the score module which essentially extends our calendar module (i.e., some calendar events happen to be athletic competitions, and athletic competitions have additional information like scores, etc.) The way we have laid things out, creating a score happens on its own page (separate from the main calendar editing page) and involves selecting the calendar item to establish the foreign key relationship between the score and calendar item. The problem was that the list of calendar items was too long – at best I could filter it so that it would only display sporting events, but I really needed to filter one step further to the specific sport.

Since the Score class requires a sport to be selected, it seemed as though there had to be some way to whittle down the list so that it would only display the calendar items for a particular sport. Not knowing a ton about Python, I began fishing around for solutions. Fortunately, we had already gotten some good things happening with Dojo, so I decided to manipulate the contents of the calendar item select box with a little Ajax sleight of hand. The first step was to add an onchange() event handler to the calendar item select box, which was easy enough to do through javascript:

To add beginswitch() to the page itself I simply added a block inside the body tag which I populated with onload="beginswitch();". The sendreq() function that beginswitch() assigns to the select box uses Dojo request an updated list of calendar items.

This sends a call to the views.py file with a URL variable of the sport to match. The function filters the returned values to calendar items that are games that have already happened for the specified sport.

The calendar events that are sent back are delimited by "|" because I have not yet found an effective means for sending complex data objects back and forth through XMLHttpRequests. With a unique character as a delimiter, I split the results with javascript on the page itself. It is also worth noting that since the value attribute of the option tags is different than the content of them, I need to return two variables for every one calendar item.

Having gotten the filtered list of calendar items back, the next step is to remove all the existing records (several hundreds) from the calendar drop-down and repopulate it with the new, improved, smaller list of events that were returned from my view function.

There are several important things to note in the code above. First is that MSIE has its own way of doing some things. Since IE doesn't properly handle the appendChild() function and most good browsers (*cough*Firefox*cough*) don't understand the MS-specific .outerHTML attribute, we need to do a check on which browser we're using so that we can actually add the code that we want to the page. Next, the for loop that goes through our entire array of data that we worked so hard to retrieve has to loop two items at a time. Since the data that we returned has both an id and a value to display, respectively, we need to loop in increments of two allowing us to refer to the current index and the successive one when building our option list.

Voila! We have a select box of calendar items that displays only the games associated with a particular sport.

There may be more elegant ways to accomplish this extra filtering, but this is what we've been able to get to work.

This entry was posted on Saturday, August 5th, 2006 at 3:31 pm and is filed under Mike, tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.