[JavaScript] innerHTML and quotes...

Discussion in 'Programming' started by Jecht, Oct 7, 2009.

to remove all ads.
  1. Jecht

    Jecht New Member

    Messages:
    5
    Picture this:
    HTML:
    [...]
    <div id="container">Ooops...! Looks like your browser doesn't support JavaScript</div>
    [...]
    <div id="navigator">
       <div id="nav_login" onclick="navLinkClick(this)">Login</div>
       <div id="nav_lostpw" onclick="navLinkClick(this)">Lost PW</div>
       <div id="nav_register" onclick="navLinkClick(this)">Register</div>
    </div>
    [...]
    <div id="hiddenForms"> /* visibility:hidden; */
       <div id="login"><form name="login" ...>[...]</form></div>
       <div id="lostpw"><form name="lostpw" ...>[...]</form></div>
       <div id="register"><form name="register" ...>[...]</form></div>
    </div>
    
    The function navLinkClick(tgt) change the clicked button bg and load the HTML into div#container:
    Code:
    	function navLinkClick(tgt){
    		var navLink=getByID('navigator').getElementsByTagName('div');
    		var navLinkDiv=tgt.id.replace('nav_','');
    		for(i=0;i<navLink.length;i++){
    			if(navLink[i].className=='navButton'){
    				if(navLink[i]==tgt){
    					navLinkBuffer='bottom';
    					tgt.style.backgroundPosition='bottom';
    				}else{
    					navLink[i].style.backgroundPosition='top';
    					if(getByID(navLink[i].id.replace('nav_','')).innerHTML==''){
    						getByID(navLink[i].id.replace('nav_','')).innerHTML=getByID('container').innerHTML.replace(/"/g,'&quot;');
    					}
    				}
    			}
    		}
    		if(getByID(navLinkDiv).innerHTML!=''){
    				getByID('container').innerHTML=getByID(navLinkDiv).innerHTML.replace(/"/g,'&quot;');
    				getByID(navLinkDiv).innerHTML='';
    		}
    		return;
    	}
    
    On page load navLinkClick(getByID('nav_login')) is performed (the getByID function is my version of getElementByID, working with any browser)
    Everything works fine in IE, Firefox, Safari, mobile Safari (iPhone), but not on Opera for Wii (the Nintendo console)... The script works if the content to load is plain text, so i'm sure the issue is all about quotes...

    i tried to replace with ' (single quotes), \\", \", &quot; without success...

    \\" and &quot; load something but misformatted (for instance, in text inputs you see \\" or "" respectively, probably due to value=\\"\\" or value=&quot;&quot; and the input fields are one-under-another instead of side-by-side)

    replacing < and > with &lt; and &gt; transform the content into plain text, and it is loaded into div#container as plain text, not html elements... useless!

    I need your help!
     
    Last edited: Oct 7, 2009
  2. Jecht

    Jecht New Member

    Messages:
    5
    omg, I have no idea about what's going on...
    I added the final alert to see how the div#content innerHTML changed its content:
    Code:
    	function navLinkClick(tgt,mode){
    		var navLink=getByID('navigator').getElementsByTagName('div');
    		var navLinkDiv=tgt.id.replace('nav_','');
    		for(i=0;i<navLink.length;i++){
    			if(navLink[i].className=='navButton'){
    				if(navLink[i]==tgt){
    					navLinkBuffer='bottom';
    					tgt.style.backgroundPosition='bottom';
    				}else{
    					navLink[i].style.backgroundPosition='top';
    					if((mode.toLowerCase()=='showdiv')&&(getByID(navLink[i].id.replace('nav_','')).innerHTML=='')){
    						getByID(navLink[i].id.replace('nav_','')).innerHTML=getByID('container').innerHTML.replace(/"/g,"'");
    					}
    				}
    			}
    		}
    		if((mode.toLowerCase()=='showdiv')&&(getByID(navLinkDiv).innerHTML!='')){
    				getByID('container').innerHTML=getByID(navLinkDiv).innerHTML.replace(/"/g,"'");
    				getByID(navLinkDiv).innerHTML='';
    				alert(getByID('container').innerHTML);
    		}
    		return;
    	}
    The result is quite odd:
    Now, where the hell are all the inputs gone?? Remember: this behavior regards just Opera (on Wii console), works perfect on computers (IE,FF and Safari) and on Iphones (mobile safari)

    Additional information: I write here the DIVs
    HTML:
    		<div class="hiddenForm">
    			<div id="ooops"></div>
    			<div id="login">
    				<form name="login" method="POST" action="index.php">
    					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="mail">..:: MAIL ::..</label><br />
    						<input name="mail" type="text" value="" style="width:90%;" /></div>
    					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="pass">..:: PASSWORD ::..</label><br />
    						<input name="pass" type="password" value="" style="width:90%;" /></div>
    					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="gui">..:: GUI ::..</label><br />
    						<?php print($iGUI); ?></div>
    					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Login" style="width:90%;" /><br /><input name="submit" type="submit" value="Guest" style="width:90%;" /></div>
    				</form>
    			</div>
    			<div id="lostpw">
    				<form name="lostpw" method="POST" action="_kernel/lostpw.php">
    					<div style="width:75%; float:left; text-align:center; font-size:7pt;"><input name="mail" type="text" value="" style="width:90%;" /><br />
    						<label for="mail">Insert your email address (the same used to sign up) to start</label></div>
    					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Send" style="width:90%;" /></div>
    				</form>
    			</div>
    			<div id="register">
    				<form name="register" method="POST" action="_kernel/register.php">
    					<input name="accept" type="hidden" value="yes" />
    					<div style="width:75%; float:left; font-size:7pt;">In order to sign up you should have at least 18 years old. If you are younger, you need your parent's approvation.</div>
    					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Accept" style="width:90%;" /><br /><input name="cancel" type="button" value="Cancel" style="width:90%;" onclick="navLinkClick(getByID('nav_login'),'showdiv');" /></div>
    				</form>
    			</div>
    		</div>
     
    Last edited: Oct 7, 2009

Share This Page