...

View Full Version : javascript working in firefox, but not ie



mbannonb
12-16-2007, 03:54 PM
I've created a memory card game using javascript/ajax to talk to php.

In general, the user clicks on a card, ajax posts it to php which stores it and returns values that javascript than uses to recreate the playing table for the next move.

Works perfectly in firefox. In ie, after about 2 card reveals, things go bonkers. Cards don't turn over when clicked and other times, clicking reveals cards other than what was clicked on.

Here is the javascript:

http://gcgz.com/js/memory.js

Unfortunately, you have to be a member to play, but here is the game:

http://inflash.com/memory/table.php

For reference, here is an unserialized string that php sends to javascript in order for javascript to create the playing table:

1:6:1`2:7:1`3:5:1`4:3:1`5:8:1`6:3:1`7:4:1`8:2:1`9:4:1`10:7:1`11:6:1`12:1:1`13:2:1`14:1:1`15:8:1`16:5 :1~1~0~0~0

I've tried work arounds using styles to make the cards 'hidden' and 'visible' instead of using innerHTML, but with the same result.

One more thing, the card table is simply a bunch of divs with numbered ids.

Javascript sets the div to a card face, card cover or empty ''.

eg.


<div id='id_1'></div>

<div id='id_2'></div>


Thanks for any help.

Kor
12-17-2007, 10:04 AM
innerHTML is not a standard DOM method, thus it will not really insert DOM elements into the DOM tree. Use DOM methods (createElement(), createTextNode(), appendChild(), setAttribute(), removeChild()... and the rest of..)

mbannonb
12-18-2007, 05:35 AM
innerHTML is not a standard DOM method, thus it will not really insert DOM elements into the DOM tree. Use DOM methods (createElement(), createTextNode(), appendChild(), setAttribute(), removeChild()... and the rest of..)

Ok, thanks.

mbannonb
01-02-2008, 10:17 PM
Ok, some success, but not quite.

Javascript displays all the cards using, among other things, appendChild.

Once displayed, I need to use replaceChild instead (correct?)

However, replace child requires 2 arguments. How do I get at the old node?

This generates in firebug... uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.replaceChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://10.10.1.103/js/memory.js?v=1 :: ajaxMemory :: line 64" data: no]




49 var href=document.createElement("a");
50 href.setAttribute("href","javascript:void(0);");
51 href.setAttribute("onclick","sndReq(\"table_process.php?card_index="+index+"&action=view\");");
52
53 var cover=document.createElement("img");
54 cover.setAttribute("src","../cards/"+dir+"/cover.jpg");
55 cover.setAttribute("height","75");
56 cover.setAttribute("width","75");
57 cover.setAttribute("border","0");
58
59 href.appendChild(cover);
60
61 if (document.getElementById(id)==null){
62 document.getElementById(id).appendChild(href);
63 }else{
64 document.getElementById(id).replaceChild(href,document.getElementById(id).firstChild);
65 }

mbannonb
01-09-2008, 07:43 PM
innerHTML is not a standard DOM method, thus it will not really insert DOM elements into the DOM tree. Use DOM methods (createElement(), createTextNode(), appendChild(), setAttribute(), removeChild()... and the rest of..)

Ok, done, but it still only works in firefox.

I've made the game only require cookies to be enabled, so you can see what is happening easily:

http://inflash.com/memory/index.php

The javascript code in question:

http://gcgz.com/js/memory.js

Thanks for any help!

mbannonb
01-09-2008, 09:27 PM
Ok, done, but it still only works in firefox.

I've made the game only require cookies to be enabled, so you can see what is happening easily:

http://inflash.com/memory/index.php

The javascript code in question:

http://gcgz.com/js/memory.js

Thanks for any help!

It appears it is element.onclick=blah instead of element.setAttribute().

However, I can't seem to set a variable url for use by the onclick. It always uses the values from the last iteration.

eg. //href.onclick=function(){sndReq('table_process.php?card_index='+index+'&action=view')};

The 'index' value in this case is always the last value, '16'.

mbannonb
01-09-2008, 10:36 PM
Here's a simple example of the problem:

http://gcgz.com/js.html



<div class='blah' id='div_1'>1 </div>
<div class='blah' id='div_2'>2 </div>
<div class='blah' id='div_3'>3 </div>
<div class='blah' id='div_4'>4 </div>
<div class='blah' id='div_5'>5 </div>

<script>

for(i=1;i<=5;i++){
var elem=document.createElement('a');
elem.setAttribute("href","javascript:void(0);");
elem.onclick=function(){ alert('i:'+i); };
var text=document.createTextNode('click'+i);
elem.appendChild(text);
document.getElementById('div_'+i).appendChild(elem);
}

</script>


No matter what link is clicked on, it is always 6. This is in ie and ff.

Any solutions?

mbannonb
01-10-2008, 12:00 AM
Well, I got it working.

Basically, set a property of the element to hold the dynamic value (eg. element.index=i), set onclick to a reference of the function call. (eg. element.onclick=ajaxCall;) and in the ajaxCall function, reference the element.index property. This works for both ie and ff.



55 var href=document.createElement("a");
56 href.setAttribute("href","javascript:void(0);");
57 href.index=index;
58 href.onclick=callAjax;

And the function:
function callAjax(){
var i = Math.round(1000000000*Math.random());
sndReq("table_process.php?card_index="+this.index+"&action=view&i="+i);

}


You can see the code here: http://gcgz.com/js/memory.js

Finally, I had to append some random numbers to the ajax call to keep ie from returning cached pages. In the end, that is all that may have been needed to get ie working with innerHTML as the original post asked about. Not sure.

Hope someone finds all this helpful. It's taken hours out of my life.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum