March 22, 2006

Client side woes

I spend most of my time programming server side stuff and don't really have to spend long knocking out a bit of HTML/CSS here and there.

However, we have recently got a bit more adventurous in terms of what we do on the client side so I've had to spend a bit more time on that side of things. My most recent and fiddly job was doing a nice DHTML/AJAX user and group finder for SiteBuilder (our CMS).

We have recently had designed a lovely new look and feel for the editing side of SiteBuilder2. One of the first screens for a proper make over is the permissions screen. Part of that is getting this new user and group picker working. Traditionally we did this with a good old fashioned popup window and javascript to populate the fields back again.

SiteBuilder Permissions screen

Now with our emphasis on smoother client side operations, I've done it with AJAX and a floating DHTML window.

SiteBuilder Permissions screen with AJAX

The popup is still a bit ugly as it's awaiting a new skin, but it functions well. However, my journey to this point has been a painful one.

  1. Getting my head around the Prototype library has taken a while, but now I have, I am pretty pleased with it
  2. Getting the CSS working for this popup when it can be positioned either above or below the little icon depending on what screen you're on and positioning arrows is nasty nasty work
  3. My crappy windows Apache 1.3 has been rubbish lately and complaining lots about (Resource deadlock avoided: mod_rewrite: failed to lock file descriptor) so I've finally upgraded to Apache 2 and all is well again
  4. I've moaned for ages about how hard it is to debug CSS problems in IE, but have just discovered that they do in fact have quite a nice DOM inspector very similar to the Firefox one. IE Developer Toolbar although you can't actually edit CSS live with it :(
  5. It is harder than it should be to do AJAX within AJAX. By this I mean that the popup has 4 tabs, each of which is loaded on demand from a different server side controller. Then, on 2 of those tabs, there is a search which shows results in a "find as you type" kind of way in another AJAX results box beneath the search boxes. Phew…nasty. The problem is the way javascript functions are registered with the browser, you have to pre-register all your javascript functions in the main page and can only call functions from returned AJAX content but can't create new functions :(

However, all the above trials were overcome and we now have quite a neat little user and group picker so that our users can really easily assign permissions to individual users or groups of users as defined in our WebGroups system. Yay for us.


- 6 comments by 3 or more people Not publicly viewable

[Skip to the latest comment]
  1. Slightly random comment, just to say I'm in awe of all of this :o). I've been using sitebuilder to write the Music Centre site for about 2 years and I really don't understand how any of it works (sorry) – it's all just cool.

    The fact that it's all been developed in house is frankly amazing. Well to my mind, anyway. (I did know that anyway, this just seemed an appropriate point to mention it).

    That was all really!

    Ta.

    22 Mar 2006, 21:31

  2. Robert O'Toole

    Did you find any useful documentation that explains how to use the xml object once it is loaded? Anything that tells you that you have to use Element.data rather than Element.text to get it to work in Moz as well as IE? (Grrrrrrrrr several hours waisted).

    23 Mar 2006, 11:53

  3. We don't actually send back XML and then parse it, we just send back HTML and insert it straight into a DIV. It is a lot easier then doing post processing on the client side.

    23 Mar 2006, 14:45

  4. me

    Prototype is very cool, I'm curious as to what you're trying to do that requires new functions to be defined?
    link provides a couple of ways of doing similar things

    23 Mar 2006, 23:38

  5. Thanks very much for that pointer, the problem is that we were not doing:

    afunc = function() {

    }

    or

    function afunc() {

    }

    These would not work in IE. However, if you do:

    self.afunc = function() {

    }

    This works as it registers the function against an existing object. Yay! Time to refactor some code.

    24 Mar 2006, 10:06

  6. Nick Howes

    Hopefully will be seeing an even shinier popup box courtesy of me! Still using all Kieran's clever AJAX stuff, but with cross-browser drop shadows, oohh, ahhh.

    24 Mar 2006, 14:48


Add a comment

You are not allowed to comment on this entry as it has restricted commenting permissions.

March 2006

Mo Tu We Th Fr Sa Su
Feb |  Today  | Apr
      1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31      

Tags

Search this blog

Most recent comments

  • One thing that was glossed over is that if you use Spring, there is a filter you can put in your XML… by Mathew Mannion on this entry
  • You are my hero. by Mathew Mannion on this entry
  • And may all your chickens come home to roost – in a nice fluffy organic, non–supermarket farmed kind… by Julie Moreton on this entry
  • Good luck I hope that you enjoy the new job! by on this entry
  • Good luck Kieran. :) by on this entry

Galleries

Not signed in
Sign in

Powered by BlogBuilder
© MMXX