events and javascript

Jack Michaelson posted this at 08:52 — 10th July 2006.

Joined: Dec 1999

Hello all,

After lurking for a while, it seems the time is right for a new post
I've got the following situation:
- a page includes a couple of subpages.
- a function that fires onload assigns anchor elements on the page (and the included subpages!) to onclicks through getElementsByTagName('a') and using the 'rel' attribute like this:

(...)
assignEvents(allParentAnchors);

function assignEvents(arr) {
	for(i=0; i<arr.length; i++) {
		if(arr[i].rel=='rate') {
			allRateObjs.length++;
			allRateObjs[allRateObjs.length-1] = arr[i];
			arr[i].onclick = rate;
		}
(...)

- the function 'rate' calls an ajax request that updates one of the includes subpages.

And that's were a problem occures: After an update through the rate function, the anchor elements on the updated subpage aren't assigned to the 'rate' function anymore. I understand why: the content of the getElementsByTagName('a') array is updated, but the array itself is not.
My question is: how do I update it?

Unfortunately I'm not able to post you a link, as this functionality is supposed to be working on pages that are only accesible with the a valid username/password combination. And I cannot give you that

Anyway, thanx in advance for even looking at this thread

Shakespeare: onclick || !(onclick)

JeevesBond posted this at 12:15 — 10th July 2006.

He has: 3,956 posts

Joined: Jun 2002

Am having trouble conceptualising what you're trying to do! Is this code located in these subpages? Or is it located in the container document? What are these subpages, frames? Inline frames?

I also don't understand why the array containing the anchors is broken when rate is called. What happens to make it invalid?

a Padded Cell our articles site!

Jack Michaelson posted this at 15:19 — 10th July 2006.

He has: 1,733 posts

Joined: Dec 1999

Sorry for not explaining enough. Here's my second try :

A screenshot:

This box represents a collection of favorites. It's an html-table.
- Users can save favorite parts of our website in their account. Every row thats starts with a checkbox in the screenshot represents such a part (the language is Dutch btw).
- Users can rate these favorites by clicking the stars (the red box in the screenshot). Every star is a anchor element.
- Users can sort these favorites, for instance, by rating (the green box in the screenshot).

The parent page not only contains this box, but several simular boxes. Each of these tables is surrounded by a container div.
All onclick events on the parent page are assigned by a js-function that is called onload. By reading the 'rel' attribute of each element in the array document.getElementsByTagName('a') it decides which next function should be called.

Each star (red box) in the screenshot is a link that fires an ajax request that does two things:
- it saves an updated rating (through an http subrequest)
- it updates the td in the last column, which is the last updated date.

Each link (green box) in the sort bar does one thing:
- it rebuilds the table by re-sorting the data, in this case by rating. The result is put in the earlier mentioned container div. The result looks quite the same, only the table rows are in different order. This result contains the rate stars again.

But... the stars no longer have the rate function assigned. I'm guessing this is because the content of the array document.getElementsByTagName('a') has changed. Somehow I should be able to re-assign the rate function to these stars, but I don't want to refresh or rebuild the page. How do I do this?

I know I can assign it by coding '

Shakespeare: onclick || !(onclick)

Jack Michaelson posted this at 10:13 — 13th July 2006.

He has: 1,733 posts

Joined: Dec 1999

Nevermind... I fixed it.
I had to loop through the getElementsByTagName('a') of each box after the update in stead of the document onload. I actually knew, but it's kinda hard to think of it at the right moment

Shakespeare: onclick || !(onclick)