Seaside: click a link using jQuery


Sometimes there are things that sound easy in the first place and then take a lot of time trying, yahooing and stackoverflowing etc. Lots of mosaic pieces are found on each iteration of the famous search-try-fail cycle. This is one of these.

So what do we have?

I wanted to add a double click handler to table rows that does the same thing as if the user clicked on one of the links that are also rendered in this row. One possibility would be to add another callback to the tr tag and have it invoke the same server side callback block.

But that’s multiple things in one:

  1. Error prone: What if I change the block in one place but forget the other one? One solution would be a temp var for the change block an so on, but you haven’t read #2 yet…
  2. Lame: On my way to being a jQuery super hero (I hadn’t expected this to be such a long journey, and I guess I have no idea how long it will actually take)
  3. Wasteful: I’d have to produce loads of Javascript code for each row and send it down to the Browser. I already have some code of that kind and am hoping to find the time to change that any time soon. Repetitions like these do waste lots of bandwidth and therefor make the page slooow for long tables.

So I needed something better. What if I could just add a dblclick handler to each tr that simply looks for the link inside itself and clicks it.

Ha! Easy, right?

Well, yes, somewhat.
In theory.
There is a .trigger(‘click’) or a .click() method in jQuery. Unfortunately, it does invoke a click handler, but it doesn’t actually do what a link usually does: navigate to a new page. So a simple

$(this).find('.editAnchor').trigger('click')

Does not do the job. Because the fact that an anchor tag navigates to another page is not achieved by a ‘click’ event handler. It is behavior that is inherent to the Link as it is.

People know that, of course. And lots of people know solutions to this. One of them being to simulate the navigation by setting the window location to the new url.

Aha! So that’s easy, right?

Well, yes it is.
In pure Javascript.

What I had to do was this:

window.location=$(this).find(".editLink").attr( "href")

for each tr in a table. So all I’d have to do was find the table and bind the above code to the dblclick event of each of it’s tr subelements.

So here is what I ended up with:

aTable := html table id: 'myTable'.
aTable blah blah ... .
aTable script: ((html >> html Query id: 'myTable') find: 'tr')
			bind: 'dblclick'
			do: (JSStream on: 'window.location=$(this).find(".editLink").attr( "href")'))

And it works very nicely. The only thing I wonder is if I could have used some JS-Wrapper object to render ‘window.location=’ and so on, but this is definitely shorter and still easy to read…