Onmouseover For Multiple Div Created At Runtime

onmouseover for multiple div created at runtime Making sure each dynamically created div has a different onmouseover.

#1 young.steveo

New D.I.C Head

Group: Members
Posts: 37
Joined: 14-May 09

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Post icon Posted 17 May 2009 - 10:13 AM

I have a loop that creates multiple divs, and assigns each one it's own id and positioning on the page. Everything is working fine here.

However, I need to have a different onmouseover for each div (I'm going to be using an ajax call inside each onmouseover that pulls a different url depending on the div that you have pointed at)

Here is the snippet of code that I used to add the onmouseover attribute to each div. This section of code is inside a larger loop, so the "div" variable is a unique div on each iteration of the loop:

div.onmouseover = function() {
	var x1 = (str[0]+3)/9;
	var y1 = (str[1]+3)/9;
	var url = "http://space.mygamehandle.com/scripts/star_name.php?x=" + x1 + "&y=" + y1;
	new Ajax(url, {
		method: 'get',
		update: $('label_texter'),
		onComplete: function() {
			alert(url);
		}
	}).request();
}

The str array is a collection of x and y coordinates that the script at star_name.php uses to determine what information needs to be displayed inside the div "label_texter" in the ajax call. If you are not familiar with the mootools framework, you can ignore most of the code inside the function.

The real problem is that for some reason, all the div's created end up with the exact same thing within the url variable. Even though the str[0] and str[1] variables are changed on each iteration of the loop.

In fact, it seems as though they all end up with the last str array values in the loop.

I'm sure it has something to do with the function or something. not sure where to start fixing it.

Was This Post Helpful? 0

Register for Free to Make These Ads Go Away!

#2 young.steveo

New D.I.C Head

Group: Members
Posts: 37
Joined: 14-May 09

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 17 May 2009 - 02:00 PM

Okay, I figured out what is happening: the function is being overwritten during each loop. So after the final loop, every onmouseover is calling a function that will output according to the last iteration of the loop.

So... How do I stop that from happening? (I mean, I know I can't stop javascript from overwriting, so how do I achieve what I'm trying to do?)

Was This Post Helpful? 0

#3 crazyjugglerdrummer

YOUR AD HERE

Group: Authors
Posts: 685
Joined: 07-January 09

Who Cares Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 450

Posted 17 May 2009 - 03:50 PM

Since you can only assign one function to handle the event, you can just make a new function that calls the old one and the new one. You would need to get the old function from the div of course. Something like:

function() {
calloldone();
callnewone();
}

I'm not sure exactly how this would be done, post your results!

Was This Post Helpful? 0

#4 young.steveo

New D.I.C Head

Group: Members
Posts: 37
Joined: 14-May 09

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 17 May 2009 - 05:32 PM

That's an interesting approach that would have probably worked, crazyjugglerdrummer.

What I did to solve the problem:

I changed the function to

div.onmouseover = function () {
   star_name_pop(this);
};

I set the id of the div to be the x and y coordinates like so: id="234,1009"

Then in the star_name_pop() function I put this:

	function star_name_pop(div) {
		var coordinates = div.id;
		var str = coordinates.split(/,/g);
		var x1 = ((str[0]*1)+3)/9;
		var y1 = ((str[1]*1)+3)/9;
		var url = "http://space.mygamehandle.com/scripts/star_name.php?x=" + x1 + "&y=" + y1;
		new Ajax(url, {
			method: 'get',
			update: $('label_texter'),
			onComplete: function() {
			}
		}).request();
	}

That got the job done.

Was This Post Helpful? 0