internet explorer - JavaScript functions run from local machine, but not from server -
i writing script show/hide cascading lists options selected each of 4 pull-down menus. example, when person chooses state, hides default empty list of cities, , shows instead appropriate city list state.
here simplified version of html:
<!doctype html> <html> <head> <script type="text/javascript" src="mapselector3.js"></script> <link rel="stylesheet" type="text/css" href="mapselectorstyles3.css" /> </head> <body onload="reset('selectstate')"> <div id="wrapper"> <h1>device installation</h1> <p>select specific printer location:</p> <form name="mapselector"> <div class="selectholder"> <label>select state:</label> <!--states list--> <select id="stateselector"> <option class="selectstate" selected="selected" >select state</option> <option onclick='showcities("mn")'>minnesota</option> <option onclick='showcities("tx")'>texas</option> <option onclick='showcities("ca")'>california</option> </select> </div> <div class="selectholder"> <label>select city:</label> <!--cities default list--> <select id="cityselector"> <option>city</option> </select> <!--cities options--> <select id="mn" class="hidden"> <option class="selectcity" selected="selected">then city</option> <option onclick='showbuildings("mn-maplewood")'>maplewood</option> </select> </div> <div class="selectholder"> <label>select building:</label> <!--building default list--> <select id="buildingselector"> <option>building</option> </select> <!--mn buildings options--> <select id="mn-maplewood" class="hidden"> <option class="selectbuilding" selected="selected">then building</option> <option onclick='showfloors("mn-maplewood-b224")'>building 224</option> <option onclick='showfloors("mn-maplewood-b220")'>building 220</option> <option onclick='showfloors("mn-maplewood-b223")'>building 223</option> </select> </div> <div class="selectholder"> <label>select floor:</label> <!--floors default list--> <select id="floorselector" name="floorselector"> <option>floor</option> </select> <!--mn-maplewood floors lists--> <select id="mn-maplewood-b224" class='hidden'> <option class="selectfloor" selected="selected">then floor</option> <option onclick='setbuttonpath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor1.htm")'>floor 1</option> <option onclick='setbuttonpath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor2.htm")'>floor 2</option> <option onclick='setbuttonpath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor3.htm")'>floor 3</option> </select> </div> <a id="submit" href="mapselector3.htm"><div id="button">floor map</div></a> </form> <div id="test"></div> <div id="currentstate"></div> <div id="currentcity"></div> <div id="currentbuilding"></div> <div id="currentfloor"></div> </div> </body> </html> i've pared down 1 option, lists include 25 states, , varying number of cities per state, buildings per city, , floors per building. i've generated lists in html , hidden them off screen css, , javascript intended swap in appropriate lists when option clicked.
here's script looks like:
var currentstate = 'cityselector'; var currentcity = 'buildingselector'; var currentbuilding = 'floorselector'; function reset(selector) { var reset = document.getelementsbyclassname(selector); for(i=0; i<reset.length; i++) { reset[i].selected = "selected"; } } function hide(element) { document.getelementbyid(element).classname = "hidden"; } function show(element) { document.getelementbyid(element).classname = "shown"; } function showcities(statename) { document.getelementbyid('test').innerhtml = 'in showcities()'; //hide current selections , reset lists show "then city" hide(currentstate); hide(currentcity); hide(currentbuilding); reset('selectcity'); //set currentstate value clicked , reset currentcity , currentbuilding original defaults currentstate = statename; currentcity = 'buildingselector'; currentbuilding = 'floorselector'; //rebuild list show(statename); show(currentcity); show(currentbuilding); document.getelementbyid('currentstate').innerhtml = 'currentstate = ' + currentstate; } function showbuildings(cityname) { document.getelementbyid('test').innerhtml = 'in showbuildings()'; //hide current selections , reset lists show "then building" hide(currentcity); hide(currentbuilding); reset('selectbuilding'); //set currentcity value clicked , reset currentbuilding its' original default currentcity = cityname; currentbuilding = 'floorselector'; //rebuild list show(cityname); show(currentbuilding); document.getelementbyid('currentbuilding').innerhtml = 'currentbuilding = ' + cityname; } function showfloors(building) { document.getelementbyid('test').innerhtml = 'in showfloors()'; //hide current selections , reset lists show "then floor" hide(currentbuilding); reset('selectfloor'); //set currentbuilding value clicked currentbuilding = building; //rebuild list show(building); } function setbuttonpath(path) { document.getelementbyid('test').innerhtml = 'in setbuttonpath()'; submitbutton = document.getelementbyid('submit'); submitbutton.href = path; } the script functions expected when run in ie local hard disk, when save file shared network folder within our domain , run there, script doesn't run (except <body onload="reset('selectstate')">. i've tried rewriting entire thing jquery, , ran same problem. work in firefox , chrome, , unable find errors firebug, need usable in ie. ideas?
Comments
Post a Comment