Jump to content

Update option lists on page load


Mark Wheeler

Recommended Posts

I have been working on this problem for a while now and don’t seem to be able to find a solution and was wondering if someone could help.

 

I have a form which is submitted and passes two form object values and saves them to a text file held on the server, this works ok.

 

After the submit button is pushed the file is saved with the function

<?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'-->

 

I read back the contents of the file and try to set the "selectedindex" on my speedUnits and rateUnits option list, however the option lists "selectindex" does not seem to update.

 

I use an "input" "hidden" text field to hold the contents of the text file which is read in with the function

<?--#exec cmd_argument='IncludeFile("settings.cfg")'-->

 

My main HTML and Javascript are shown below and I was hoping something could give me some pointers.

 

The "settings.cfg" contains

 

designUnits#3

speedUnits#0

save#Submit Query

settingsFile#

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR...tml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="content-type" charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen">

<title>Siemens BW500</title>

<script type="text/javascript" src="js/convert.js"></script>

</head>

<body>

<div id="outer_wrapper">

<div id = "wrapper">

<div id = "banner">

<h1>BW500</h1>

</div>

<div id ="logo">

<img src="images/logo_siemens.jpg">

</div>

<div id ="topnav">

<ul>

<li><a id="onlink" href='index.html'>Process</a></li>

<li><a href='status.html'>status</a></li>

<li><a href='control.html'>Control</a></li>

<li><a href='PID.html'>PID</a></li>

<li><a href='spa.html'>Parameters</a></li>

<li><a href='Manuals.html'>Manuals</a></li>

<li><a href='network.html'>Network</a></li>

</ul>

</div>

<div id ="data">

<form action="settings.html" method="get" id="unitsSetup" name="unitsSetup">

<table>

<tr>

<td>Design Units</td>

<td><select name="designUnits"id="designUnits">

<option value="0">T/h(tons / hour)</option>

<option value="1">t/h (tonnes / hour)</option>

<option value="2">LT/h(long tons) / hour</option>

<option value="3">kg/h (kilograms / hour)</option>

<option value="4">lb/h(pounds / hour)</option>

<option value="5">kg/min (kilograms / minute)</option>

<option value="6"> lb/min (pounds / minute)</option>

</td>

</tr>

<tr>

<td>Design Speed Units</td>

<td><select name="speedUnits" id="speedUnits">

<option value="0">Feet/min</option>

<option value="1">Metres/s</option>

</td>

</tr>

<tr>

<td><input type="submit" name="save"></input></td>

</tr>

</table>

<input type="hidden" name="settingsFile" id="settingsFile"value="<?--#exec cmd_argument='IncludeFile("settings.cfg")'-->"></input>

<script language="javascript" type="text/javascript">readFileSettings()</script>

</form>

<?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'-->

</div>

<div id ="copywrite">

<p>Copywrite</p>

</div>

</div>

</div>

</body>

</html>

 

 

 

The Javascript function "readFileSettings() is shown below.

 

function readFileSettings()

{

var readFile,designUnits,speedUnits;

readFile =document.getElementById('settingsFile').value;

designUnits = readFile.charAt(12);

speedUnits = readFile.charAt(25);

 

document.getElementById('speedUnits').selectedIndex = speedUnits;

document.getElementById('designUnits').selectedIndex = designUnits;

}

Link to comment
Share on other sites

what debugging are you doing? what does the output of your file actually look like in the source though (in your hidden input field)? You probably need to split on some values. It might be better to just have PHP output the actual values individually in their own hidden input instead of trying to output the entire contents of a file.

Link to comment
Share on other sites

Thanks very much for your reply thescientist

 

I am using Firebug to debug and my file is being read into the "hidden" input field element.

The data in the <input> id= "settingFile" value seems to have all of the text from the file when I look at the debug panel in Firebug.

value="designUnits#3speedUnits#0save#Submit QuerysettingsFile#

 

What I have found is the following.

If I make a selection on the option list and hit submit the file is saved but the option list revert back to when the form was loaded.

If I go to another page in my site and type in the url the "settings.html" I return back to the page and see the update of my option lists.

I know this is my lack of knowledge but it seems that when the submit button is pressed my page does not reload or does not update the option lists.

 

So I guess it's something to do with the way the page loads but i'm not entirely sure as I thought when the submit button is pressed the page would reload but I must be wrong.

 

 

I don’t think I have the option of using PHP on this embedded web server but I could be wrong.

 

Many thanks

Mark

Link to comment
Share on other sites

this stripped down example works for me

<!DOCTYPE html>    <head>    <title>Config Option Updater</title>      <script>        function readFileSettings(){          var readFile,designUnits,speedUnits;                    readFile = document.getElementById('settingsFile').value;          console.log('readFile value => ' + readFile);           designUnits = readFile.charAt(12);          speedUnits = readFile.charAt(24);           console.log('designUnits => ' + designUnits);          console.log('speedUnits value => ' + speedUnits);             document.getElementById('speedUnits').selectedIndex = speedUnits;          document.getElementById('designUnits').selectedIndex = designUnits;        }         window.addEventListener('load',  readFileSettings);    </script>  </head>   <body>    <h2>Design Units</h2>    <select name="designUnits"id="designUnits">      <option value="0">T/h(tons / hour)</option>      <option value="1">t/h (tonnes / hour)</option>      <option value="2">LT/h(long tons) / hour</option>      <option value="3">kg/h (kilograms / hour)</option>      <option value="4">lb/h(pounds / hour)</option>      <option value="5">kg/min (kilograms / minute)</option>      <option value="6"> lb/min (pounds / minute)</option>    </select>     <h2>Design Speed Units</h2>    <select name="speedUnits" id="speedUnits">      <option value="0">Feet/min</option>      <option value="1">Metres/s</option>    </select>     <input type="hidden" name="settingsFile" id="settingsFile" value="designUnits#3speedUnits#1save#Submit QuerysettingsFile#"></input>  </body> </html>

Note of two things:

  1. I changed charAt(25) to charAt(24), since it was one index too long
  2. I made your readFileSetting run in an onload event handler instead of inline with the HTML

 

so I would make your config file is getting saved correctly on each submit. Verify it with some sort of editor. I was able to manually set any of the selects by changing the number, so the front end part of this is confirmed as working as expected.

Edited by thescientist
  • Like 1
Link to comment
Share on other sites

thescientistMay I first say thankyou very much for your help and time you spent on the sample code, I managed with your help to find the problem.After loading your code and adding the server code I ended up with thinks almost working however I started to look at how the server is processing the saving and loading of the "setting.cfg" file.It appeared that the file would be read with the<?--#exec cmd_argument='IncludeFile("settings.cfg")'-->function and then immediately written with the<?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'-->I wondered if I moved the savetofile function to the HEADER<?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'-->it would seperate the two functions.With your modified code I downloaded it to the server and it worked.Once again thankyou for your help I very much appreciate it.Mark<!DOCTYPE html> <head> <?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'--> <title>Config Option Updater</title> <script> function readFileSettings(){ var readFile,designUnits,speedUnits; readFile = document.getElementById('settingsFile').value; console.log('readFile value => ' + readFile); designUnits = readFile.charAt(12); speedUnits = readFile.charAt(25); console.log('designUnits => ' + designUnits); console.log('speedUnits value => ' + speedUnits); document.getElementById('speedUnits').selectedIndex = speedUnits; document.getElementById('designUnits').selectedIndex = designUnits; document.getElementById('settingsFile').value=""; } window.addEventListener('load',readFileSettings); </script> </head> <body> <h2>Design Units</h2> <form action="test.html" method="post" id="test" name="test"> <select name="designUnits"id="designUnits"> <option value="0">T/h( tons / hour)</option> <option value="1">t/h (tonnes / hour)</option> <option value="2">LT/h (long tons) / hour</option> <option value="3">kg/h (kilograms / hour)</option> <option value="4">lb/h (pounds / hour)</option> <option value="5">kg/min (kilograms / minute)</option> <option value="6"> lb/min (pounds / minute)</option> </select> <h2>Design Speed Units</h2> <select name="speedUnits" id="speedUnits"> <option value="0">Feet/min</option> <option value="1">Metres/s</option> </select> <input type="hidden" name="settingsFile" id="settingsFile" value="<?--#exec cmd_argument='IncludeFile("settings.cfg")'-->"></input> <input type="submit" name="save"></input> </form> </body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...