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 5 of 5
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    ie choking on script

    IE wont render the page with the javascript.
    If I take out the link to the script the page renders fine but with the script the whole page is blank.

    In FF it renders perfectly. The page validates and there are no script errors come up. The 'view source' shows the source is there but the page is blank.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>My Application!</title>
    	<link href="/default_style.css" rel="stylesheet" type="text/css" />	
    	<script type="text/javascript" src = "/scripts/ajax.js" />
    </head>
    <body>
    <form action = "/users/create" method="post">
    <label for = "users_id"></label> <input type = "hidden" name = "users[id]" id = "users_id" value = "" /><br />
    
    <label for = "users_name">Name</label> <input type = "text" name = "users[name]" id = "users_name"  value = "" /><br />
    
    <label for = "users_display_name">Display Name</label> <input type = "text" name = "users[display_name]" id = "users_display_name"  value = "" /><br />
    
    <label for = "users_email_address">Email Address</label> <input type = "text" name = "users[email_address]" id = "users_email_address"  value = "" /><br />
    
    <label for = "users_password">Password</label> <input type = "password" name = "users[password]" id = "users_password"   value = "" /><br />
    
    <label for = "users_height">Height</label><span id = "users_height"><select name = "users[height_feet]" id = "users_height_feet">
    	<option value = "3" >3</option>
    	<option value = "4" >4</option>
    	<option value = "5" selected = "selected" >5</option>
    	<option value = "6" >6</option>
    	<option value = "7" >7</option>
    </select>
    feet <select name = "users[height_inches]" id = "users_height_inches">
    	<option value = "0" >0</option>
    	<option value = "1" >1</option>
    	<option value = "2" >2</option>
    	<option value = "3" >3</option>
    	<option value = "4" >4</option>
    	<option value = "5" >5</option>
    	<option value = "6" >6</option>
    	<option value = "7" selected = "selected" >7</option>
    	<option value = "8" >8</option>
    	<option value = "9" >9</option>
    	<option value = "10" >10</option>
    	<option value = "11" >11</option>
    </select>
    inches</span><br />
    
    <label for = "users_frame_size">Frame Size</label> <select name = "users[frame_size]" id = "users_frame_size" ><option value = "0">Small</option>
    <option value = "1">Medium</option>
    <option value = "2">Large</option>
    </select>
    <br />
    
    <label for = "users_start_weight">Start Weight</label> <input type = "text" name = "users[start_weight]" id = "users_start_weight" size = "3"  value = "" />lbs<br />
    
    <label for = "users_goal_weight">Goal Weight</label> <input type = "text" name = "users[goal_weight]" id = "users_goal_weight" size = "3"  value = "" />lbs <a style = "cursor:pointer" onclick = "suggest_weight();">suggest</a><br />
    
    <label for = "users_gender">Gender</label>
    <select name = "users[gender]" id = "users_gender" ><option value = "f">Female</option>
    <option value = "m">Male</option>
    </select>
    <br />
    
    <label for = "users_date_of_birth">Date Of Birth</label> <span id = "users_date_of_birth"><select name = "users[date_of_birth][days]" id = "users_date_of_birth_days">
    	<option value = "01" >01</option>
    	<option value = "02" >02</option>
    	<option value = "03" >03</option>
    	<option value = "04" >04</option>
    	<option value = "05" >05</option>
    	<option value = "06" >06</option>
    	<option value = "07" >07</option>
    	<option value = "08" >08</option>
    	<option value = "09"selected = "selected"  >09</option>
    	<option value = "10" >10</option>
    	<option value = "11" >11</option>
    	<option value = "12" >12</option>
    	<option value = "13" >13</option>
    	<option value = "14" >14</option>
    	<option value = "15" >15</option>
    	<option value = "16" >16</option>
    	<option value = "17" >17</option>
    	<option value = "18" >18</option>
    	<option value = "19" >19</option>
    	<option value = "20" >20</option>
    	<option value = "21" >21</option>
    	<option value = "22" >22</option>
    	<option value = "23" >23</option>
    	<option value = "24" >24</option>
    	<option value = "25" >25</option>
    	<option value = "26" >26</option>
    	<option value = "27" >27</option>
    	<option value = "28" >28</option>
    	<option value = "29" >29</option>
    	<option value = "30" >30</option>
    	<option value = "31" >31</option>
    </select>
    <select name = "users[date_of_birth][months]" id = "users_date_of_birth_months">
    	<option value = "01" >January</option>
    	<option value = "02" >February</option>
    	<option value = "03" >March</option>
    	<option value = "04" >April</option>
    	<option value = "05" >May</option>
    	<option value = "06" >June</option>
    	<option value = "07"selected = "selected"  >July</option>
    	<option value = "08" >August</option>
    	<option value = "09" >September</option>
    	<option value = "10" >October</option>
    	<option value = "11" >November</option>
    	<option value = "12" >December</option>
    </select>
    <select name = "users[date_of_birth][years]" id = "users_date_of_birth_years">
    	<option value = "1900" >1900</option>
    	<option value = "1901" >1901</option>
    	<option value = "1902" >1902</option>
    	<option value = "1903" >1903</option>
    	<option value = "1904" >1904</option>
    	<option value = "1905" >1905</option>
    	<option value = "1906" >1906</option>
    	<option value = "1907" >1907</option>
    	<option value = "1908" >1908</option>
    	<option value = "1909" >1909</option>
    	<option value = "1910" >1910</option>
    	<option value = "1911" >1911</option>
    	<option value = "1912" >1912</option>
    	<option value = "1913" >1913</option>
    	<option value = "1914" >1914</option>
    	<option value = "1915" >1915</option>
    	<option value = "1916" >1916</option>
    	<option value = "1917" >1917</option>
    	<option value = "1918" >1918</option>
    	<option value = "1919" >1919</option>
    	<option value = "1920" >1920</option>
    	<option value = "1921" >1921</option>
    	<option value = "1922" >1922</option>
    	<option value = "1923" >1923</option>
    	<option value = "1924" >1924</option>
    	<option value = "1925" >1925</option>
    	<option value = "1926" >1926</option>
    	<option value = "1927" >1927</option>
    	<option value = "1928" >1928</option>
    	<option value = "1929" >1929</option>
    	<option value = "1930" >1930</option>
    	<option value = "1931" >1931</option>
    	<option value = "1932" >1932</option>
    	<option value = "1933" >1933</option>
    	<option value = "1934" >1934</option>
    	<option value = "1935" >1935</option>
    	<option value = "1936" >1936</option>
    	<option value = "1937" >1937</option>
    	<option value = "1938" >1938</option>
    	<option value = "1939" >1939</option>
    	<option value = "1940" >1940</option>
    	<option value = "1941" >1941</option>
    	<option value = "1942" >1942</option>
    	<option value = "1943" >1943</option>
    	<option value = "1944" >1944</option>
    	<option value = "1945" >1945</option>
    	<option value = "1946" >1946</option>
    	<option value = "1947" >1947</option>
    	<option value = "1948" >1948</option>
    	<option value = "1949" >1949</option>
    	<option value = "1950" >1950</option>
    	<option value = "1951" >1951</option>
    	<option value = "1952" >1952</option>
    	<option value = "1953" >1953</option>
    	<option value = "1954" >1954</option>
    	<option value = "1955" >1955</option>
    	<option value = "1956" >1956</option>
    	<option value = "1957" >1957</option>
    	<option value = "1958" >1958</option>
    	<option value = "1959" >1959</option>
    	<option value = "1960" >1960</option>
    	<option value = "1961" >1961</option>
    	<option value = "1962" >1962</option>
    	<option value = "1963" >1963</option>
    	<option value = "1964" >1964</option>
    	<option value = "1965" >1965</option>
    	<option value = "1966" >1966</option>
    	<option value = "1967" >1967</option>
    	<option value = "1968" >1968</option>
    	<option value = "1969" >1969</option>
    	<option value = "1970" >1970</option>
    	<option value = "1971" >1971</option>
    	<option value = "1972" >1972</option>
    	<option value = "1973" >1973</option>
    	<option value = "1974" >1974</option>
    	<option value = "1975" >1975</option>
    	<option value = "1976" >1976</option>
    	<option value = "1977" >1977</option>
    	<option value = "1978" >1978</option>
    	<option value = "1979" >1979</option>
    	<option value = "1980" >1980</option>
    	<option value = "1981" >1981</option>
    	<option value = "1982" >1982</option>
    	<option value = "1983" >1983</option>
    	<option value = "1984" >1984</option>
    	<option value = "1985" >1985</option>
    	<option value = "1986" >1986</option>
    	<option value = "1987" >1987</option>
    	<option value = "1988" >1988</option>
    	<option value = "1989" >1989</option>
    	<option value = "1990" >1990</option>
    	<option value = "1991" >1991</option>
    	<option value = "1992" >1992</option>
    	<option value = "1993" >1993</option>
    	<option value = "1994" >1994</option>
    	<option value = "1995" >1995</option>
    	<option value = "1996" >1996</option>
    	<option value = "1997" >1997</option>
    	<option value = "1998" >1998</option>
    	<option value = "1999" >1999</option>
    	<option value = "2000" >2000</option>
    	<option value = "2001" >2001</option>
    	<option value = "2002" >2002</option>
    	<option value = "2003" >2003</option>
    	<option value = "2004" >2004</option>
    	<option value = "2005" >2005</option>
    	<option value = "2006" >2006</option>
    	<option value = "2007"selected = "selected"  >2007</option>
    	<option value = "2008" >2008</option>
    	<option value = "2009" >2009</option>
    	<option value = "2010" >2010</option>
    	<option value = "2011" >2011</option>
    	<option value = "2012" >2012</option>
    	<option value = "2013" >2013</option>
    	<option value = "2014" >2014</option>
    	<option value = "2015" >2015</option>
    	<option value = "2016" >2016</option>
    	<option value = "2017" >2017</option>
    </select>
    </span><br />
    
    <input type = "submit" name = "submit" value = "Submit" /></form>
    </body>
    </html>
    Code:
    var xmlHttp
    var field
    
    function suggest_weight()
    {
    	frame = document.getElementById('users_frame_size')[document.getElementById('users_frame_size').selectedIndex].value;
    	height_feet = document.getElementById('users_height_feet')[document.getElementById('users_height_feet').selectedIndex].value;
    	height_inches = document.getElementById('users_height_inches')[document.getElementById('users_height_inches').selectedIndex].value;
    	url = '/suggest_weight.php?frame='+frame+'&height_feet='+height_feet+'&height_inches='+height_inches;
    	changeField(url, 'users_goal_weight');
    	
    }
    function changeField(url,fieldName)
    {
     	field = fieldName;
    	xmlHttp.onreadystatechange=stateChanged;
    	xmlHttp.open("GET",url,true);
    	xmlHttp.send(null);
    } 
    
    function stateChanged() 
    { 
     
    	if (xmlHttp.readyState==4)
    	{ 
    		document.getElementById(field).value=xmlHttp.responseText;
    	}
    }
    
    onload = function()
    {
    	try
    	  {
    	  // Firefox, Opera 8.0+, Safari
    	  xmlHttp=new XMLHttpRequest();
    	  }
    	catch (e)
    	  {
    	  // Internet Explorer
    	  try
    	    {
    	    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    	    }
    	  catch (e)
    	    {
    	    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    	    }
    	  }
    	return xmlHttp;
    }
    Last edited by NancyJ; 07-09-2007 at 03:33 PM.

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    IE might be fussy over the spacing in

    src = "/scripts/ajax.js"

    as a guess, try deleting the spacing

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Nightfire View Post
    IE might be fussy over the spacing in
    src = "/scripts/ajax.js"
    as a guess, try deleting the spacing
    Nahh... that doesn't really matter. Not even to IE.

    It looks like the problem is that this:
    Code:
    <script type="text/javascript" src = "/scripts/ajax.js" />
    should be changed to this:
    Code:
    <script type="text/javascript" src = "/scripts/ajax.js"></script>
    I don't know if the original version is technically correct?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by koyama View Post
    Nahh... that doesn't really matter. Not even to IE.
    I seems that such syntax is well‐formed XML too. I don’t know about HTML though.

    Quote Originally Posted by koyama View Post
    I don't know if the original version is technically correct?
    When you serve XHTML as HTML (fake XHTML) instead of as XML, you cannot get away with using XML self‐closing syntax except for empty elements. (Technically, you can’t get away with that either, but major browsers have never parsed HTML as SGML.) <script /> ends up being interpreted as an unclosed start tag (the slash is incorrectly stripped by major browsers); the source code for everything thereafter ends up being processed as one large, erroneous script since the browser perceives the script end tag to be missing. There are some more “technically”s to go with that, but I’ll spare you from those explanations.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Thank you very much for your explanation, Arbitrator.

    I surely hope that I will get a full understanding of the underlying technical details. I have bookmarked this post of yours together with some of your other related posts that I have collected. Thanks to you I now feel sufficiently armed for gaining new knowledge on this field.


  •  

    Posting Permissions

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