Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts

    javascript working in firefox, but not ie

    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.
    Code:
    <div id='id_1'></div>
    
    <div id='id_2'></div>
    Thanks for any help.
    Last edited by mbannonb; 12-16-2007 at 02:58 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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..)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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.

  • #4
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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]

    Code:
     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       }

  • #5
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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!

  • #6
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mbannonb View Post
    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'.

  • #7
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's a simple example of the problem:

    http://gcgz.com/js.html

    Code:
    <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?

  • #8
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
     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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •