Javascript Firefox Issue

Dynamic Link Problem

[colandy]

The follwoing code works fine in IE but the issue I have in Firefox is that the link always gives the same username.
Here's the code, I'll explain a little more at the end:

for(var i=0;i<messages.length;i++)
{
usrname=messages[(messages.length-1)-i];
if(navigator.appName=="Microsoft Internet Explorer")
{
var cdiv=document.createElement('<div id="user">');
var adiv=document.createElement('<a href="#" onclick="showpopup(event, \''+usrname+'\')">');
adiv.appendChild(document.createTextNode(messages[(messages.length-1)-i]));
cdiv.appendChild(adiv);
}
else
{
var cdiv=document.createElement('div');
cdiv.setAttribute("id", "user");
var adiv=document.createElement('a');
adiv.setAttribute('href','#');
adiv.onclick=function(e)
{
x=e.clientX;
y=e.clientY;
showpopup1(x,y,usrname);
}
adiv.appendChild(document.createTextNode(messages[(messages.length-1)-i]));
cdiv.appendChild(adiv);
}
mdiv.appendChild(cdiv);
}

OK, what this function does is run through a list of users that are online, creates a div for each user and a link, in IE the links onclick works fine by setting the variables called for each user to be the x and y co-ordinates of the mouse and the username that was clicked on. In Firefox, the username for all users in the list is the last user displayed.

So as an example, a list that shows:

user1
user2
user3
user4

In IE each user would have the username link set correctly (user1, user2......etc), in Firefox the link for all users would be user4.

Please help, major headache at the moment.

[Dabrowski]

Without writing a test page, I can't debug but I can see straight away that your cDiv has an id='something', therefore you are creating a page with multiple ID's. This isn't allowed. IE is more tolerant to this but I'd fix this first and see what happens.

Also, why don't you use setAttribute in IE?

[ericjust]

The problem is with scope. The variable usrname is being reset in every iteration of the loop. Try something like this:

------------------------------
**edit: Also, you should not use the same id for each div. Assign them a className instead, or different ids (user1,user2,etc..). If it is just for CSS, use className:

var cdiv=document.createElement('<div class="user">');
cdiv.setAttribute("className", "user");

or just cdiv.className = "user";

------------------------------

<div id="test"></div>
<script type="text/javascript">

var messages = ['user1','user2','user3','user4'];

var mdiv = document.getElementById('test');

var addUser = function(usrname) {
if(navigator.appName=="Microsoft Internet Explorer")
{
var cdiv=document.createElement('<div id="user">');
var adiv=document.createElement('<a href="#" onclick="showpopup(event, \''+usrname+'\')">');
adiv.appendChild(document.createTextNode(usrname));
cdiv.appendChild(adiv);
}
else
{
var cdiv=document.createElement('div');
cdiv.setAttribute("id", "user");
var adiv=document.createElement('a');
adiv.setAttribute('href','#');
adiv.onclick=function(e)
{
x=e.clientX;
y=e.clientY;
alert(x+'x'+y+' '+usrname);
}
adiv.appendChild(document.createTextNode(usrname));
cdiv.appendChild(adiv);
}
mdiv.appendChild(cdiv);

}

for(var i=0;i<messages.length;i++)
{
addUser(messages[(messages.length-1)-i]);
}

</script>

[colandy]

Problem in IE when setting styles using setAttribute so just decided to use this method instead.

The duplicate ID's shouldn't cause an issue as I don't access these items using the ID's. I only use the ID for styling purposes.

I have tried something new having viewed the forums and that was the following:

adiv.setAttribute('href','javascript:showpopup1("'+usrname+'")');

This gives the correct username constantly, however, I cannot pass the x and y co-ordinates this way. Have tried:

adiv.setAttribute('href','javascript:showpopup1(e.clientX, e.clientY, "'+usrname+'")');

and firefox doesn't recognise the e object this way.

[colandy]

ok, usrname should be reset every time, as this is using AJAX and is returning a list of usernames. I have changed the ID's to Classes as suggested.

I can send the correct username by using the

setAttribute("href","javascript:functionname(usrname)";

method, but cannot send the mouse pointer location, if I use the original method I can send the mouse pointer location but not the correct username (if multiple users online).

[Dabrowski]

ericjust, I'm sorry but your post was utter rubbish.

Firstly, it's blatantly obvious that usrname is supposed to be different every time, secondly, your example means usrname is still different every time, thirdly, while doing exactly the same thing, you've made it more complicated.

That aside, colandy, you said you're tried passing the mouse pointer like this....

adiv.setAttribute('href','javascript:showpopup1(e.clientX, e.clientY, "'+usrname+'")');

Well, just as you have done with the usrname variable, you have to unquote the e.clientX/Y variables.

Try this...

adiv.setAttribute('href','javascript:showpopup1('+ e.clientX +', '+ e.clientY +', "'+usrname+'")');

Now your JS should write the actual numbers in there, rather than the text 'e.clientX'.

A good way of debugging this to make sure the string being outputted is correct, is using alert to print the string first. Try doing...

alert('href','javascript:showpopup1(e.clientX, e.clientY, "'+usrname+'")');

and you'll see what I mean.

[colandy]

OK, have been running this with the Firefox console and the error I'm constantly getting is:

"e is not defined"

The line in question states (as Dabrowski suggested).

adiv.setAttribute('href','javascript:showpopup1('+e.clientX+','+e.clientY+',"'+usrname+'")');

This issue is surrounding the Firefox event handler and the only way I seem to be able to get the details for the event handler is the initial code, but as previously stated this sends the same usrname everytime regardless of the username clicked on.

PS - Using the alert is a good idea, unfortunately as the problem is that firefox dosn't recognise the e.? the same error occurs.

[Dabrowski]

My bad, it was late.

Remember the alert thing, forget my last post!

ok, let me try again, I think the problem is, with a href='javascript....' you're not firing an event, you're just calling the function. Try changing href to 'javascript:void(0);' and adding your popup function in an onClick. That is an event and should carry your mouse co-ordinates with it.

[colandy]

OK.......just managed to solve this, a little conveluted but works for now. For those that are interested here's the solution.

add an eventlistener to the adiv like so:

adiv.addEventListener("click", getcoords, false);

create a getcoords function that sets 2 previous defined global variables like so

var xcoords;
var ycoords;

function getcoords(e)
{
xcoords=e.clientX;
ycoords=e.clientY;
}

then the final part relates to the href setAttribute:

adiv.setAttribute('href','javascript:showpopup1("'+usrname+'")');

This is the final function being the showpopup1:

function showpopup1(user)
{
alert("X - "+xcoord+", Y - "+ycoord+", user - "+user);
}

This seems to work on Firefox, at least for now......

Many Many thanks for all your help guys, no doubt I'll hit another issue shortly but for now you have pointed me in the right direction so thanks.