AJAX example question to fill form fields

[sblair]

I've been looking all over the net to try and find a solution to what I believe is a relatively simple problem. I've implemented the Syncor AJAX / JSON framework and have that all working.

My issue now is connecting the data that comes back via AJAX to fill the value fields in a form. In a nutshell I'm pulling values from a remote system and want to dynamically update the webpage form for the settings to match the remote system. Such that if someone else changes a setting the current value will be represented in the form on the netburner without having to do a page refresh to get it.

Here's an example:

<form action="FORM_IPRO_OUTPUT_PANV" method="post" name="FORM_IPRO_OUTPUT_PANV" target="_self">
<input type="range" name="textImageProOutputPanV" value="<!--FUNCTIONCALL WebIProOutputPanV -->" min="-100" max="100" step="1" onchange="submitchange('FORM_IPRO_OUTPUT_PANV')" STYLE="width: 110px" /></form>
</td>
<td width="75" height="25" align="left" valign="middle" id="panv"><span id="Panv" style="body"></span></td>

I want to replace the: value="<!--FUNCTIONCALL WebIProOutputPanV -->" with the JSON object value being returned via AJAX which in this case is "panv".

I'm the first to admit my javascript/JSON knowledge is limited to say the least but am trying my best to figure it out but having trouble finding good resources on the subject to guide me.

Thanks.
Scott

[BillC]

Hi, I am not an expert on Javascript or Ajax but I show below how I update some text fields on a webpage using javascript.

The javascript to fetch the new data from the host is

Code: Select all

function update_boxes ()	{
  var xmlHttp = getXMLHttp();
  xmlHttp.onreadystatechange = function(){
  	if (xmlHttp.readyState==4 && xmlHttp.status==200) {
		current_values =  eval ('(' + xmlHttp.responseText +')') ;
		document.getElementById("Atoday").innerHTML = current_values["Datetime"] ;
		document.getElementById("Agallstoday").innerHTML = current_values["Cur_Irrig_Day_Total"] ;
		document.getElementById("Agallsmonth").innerHTML = current_values["Cur_Irrig_Month_Total"];
		document.getElementById("Acost").innerHTML = current_values["Cur_Irrig_Month_Cost"] ;
		document.getElementById("Amissingtoday").innerHTML = current_values["Cur_Day_Minutes_Missing"] ;
		document.getElementById("Aalertstoday").innerHTML = current_values["Cur_Month_Minutes_Missing"] ;
		document.getElementById("Araintoday").innerHTML = current_values["Cur_Rain_Day_Total"] ;
		document.getElementById("Arain24hrs").innerHTML = current_values["Cur_Rain_24_Hours"] ;
		document.getElementById("Arain48hrs").innerHTML = current_values["Cur_Rain_48_Hours"] ;
		document.getElementById("Arain72hrs").innerHTML = current_values["Cur_Rain_72_Hours"] ;
		document.getElementById("Arain96hrs").innerHTML = current_values["Cur_Rain_96_Hours"] ;
		document.getElementById("Arain120hrs").innerHTML = current_values["Cur_Rain_120_Hours"] ;
		document.getElementById("Arainmonth").innerHTML = current_values["Cur_Rain_Month_Total"] ;
	}
  }
  xmlHttp.open("GET", "latestdata.php", true); 
  xmlHttp.send(null);
}

The host (in this case a php script) sends out the data in array, this should be easy to to in the netburner.

The only data that the php code (or netburner) sends out in response to the request is shown below, nothing else just this -

Code: Select all

{"Cur_Rain_24_Hours": 0.11, "Cur_Rain_48_Hours": 1.15, "Cur_Rain_72_Hours": 1.92, "Cur_Rain_96_Hours": 1.92, "Cur_Rain_120_Hours": 3.29, "Datetime": "Thu 19 Apr 2012 11:59pm" }

The webpage HTML on the page that contains the fields that are to be updated is

Code: Select all

 
 <table id="todays_rain">
  			<tr>
    			<td colspan="2" align="center" class="AC_header">rainfall totals (inches)</td>
    		</tr>
  			<tr>
    			<td class="statsleft" > today</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Araintoday">0</span></td>
  			</tr>
  			<tr>
    			<td class="statsleft" >last 24 hours</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arain24hrs">0</span></td>
  			</tr>
  			<tr>
    			<td  class="statsleft">last 48 hours</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arain48hrs">0</span></td>
  			</tr>
  			<tr>
    			<td class="statsleft" >last 72 hours</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arain72hrs">0</span></td>
  			</tr>
   			<tr>
    			<td class="statsleft" >last 96 hours</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arain96hrs">0</span></td>
  			</tr>
  			<tr>
    			<td  class="statsleft">last 120 hours</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arain120hrs">0</span> </td>
  			</tr>
 			<tr>
    			<td class="statsleft" >this month</td>
    			<td class="statsright"><span class="AC_setting_bold" id="Arainmonth">0</span></td>
 			</tr>
 		</table>

I hope this of some help to you

Bill

[sblair]

Thanks Bill. I'm able to fill a basic table with the data coming back like that with no problem.

My issue is that I have a number of input fields on a form that I'm trying to load the current value into the field that is coming back via AJAX.

So if the value changes in the background, the field will update with the current value.

Scott

[BillC]

Hi Scott, OK then I dont really understand what you are trying to achieve, are these values changing on the netburner or on the HTML client.

In my case the values change on the host and the client javascript calls the update_boxes () function periodically to retrieve the latest data from the host and update its display fields.

Bill

[BillC]

reading your post again, I assume that its the HTML table (or similar) that is downloaded via Ajax (probably with host suppied values for input and display fields) and you want the client javascript to modify the values displayed without going back to the host.

If that is the case then your javascript can just update the display values like

Code: Select all

document.getElementById("Araintoday").innerHTML = newvalue1;
      document.getElementById("Arain24hrs").innerHTML = newvalue2 ;

Do I understand your problem correctly ?

Bill

[sblair]

Here's a screen shot that my illustrate it better. I want to update the value in these fields on the webform if they are changed in the background by another user on a different laptop or at the device itself.

So if two people are connected to the webpage for the netburner and one person makes a change the form will update with the current values in the form on the other laptop.

The issue is finding what the correct javascript is to update the form elements.

See the attached screen shot.

[BillC]

as far as I know (and I may be wrong) but I dont think that Ajax will allow you to do that from one client to another.

I think that when one client detects a local change it will have to post/get the changes to the host netburner using Ajax, the netburner can then hold these changes, all clients would periodically ask the netburner for its latest copy (using Ajax)

Bill

[sblair]

Right....when one user submits the change then it is changed in the Netburner at that point. I then want to update the other clients via AJAX with the new modified value that exists in the Netburner. I'm able to do this now if I'm just putting the data in a static table. The issue is getting it to go into the field of the form element as I was showing in the image instead though.

[BillC]

I dont think that the netburner can automatically send the new values to clients other than the one who reported the change, the netburner has to wait for each client to request the latest values, normally this is done by the client periodically sending a request to the host using something similar to the update-boxes function in my first reply. This routine takes the values that the host returs and updates the display fields.

The http protocol does not allow for persistant connections where the host can send new data to clients whenever it wants, once a page (or data) has been sent to client the connection is dropped, its up to the client to periodically request any changes.

If you want to have persistant connections so that the host can send data at anytime without waiting for the client to request it you need to look at using Flash on the client and using tcp/ip without the Http layer, this allows a connection to be established and kept open so that messages can be sent in either direction at any time.

Bill

[sblair]

I think we've diverged into a completely different topic. I am able to get the updates via AJAX from the Netburner without any problems.

The issue I have is simply how to connect the JSON object value into the html form for the value of the field.