Page 2 of 2
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Thu Feb 21, 2013 11:26 am
by Arturino
Hi All,
Thanks a lot for the code.
If I have many variables to be displayed on the webpage, what would be the best way to do that, using this technology?
What I do - I generate part of the webpage with all variables that way, but I would like to update only fields with needed variables.
Thanks.
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Fri Feb 22, 2013 8:20 am
by ecasey
Here is a snippet of javascript that I use to change data in specific cells in a table.
If you send a well formed JSON, you can use this sort of code to change specific variables.
The function call is in HeatThermoms.htm. It passes the JSON object.
The "getElementById('heat_table')" function access the varible by name, in this case it's a table called "heat_table" in the web page html. Then you can access the variable to change it, in this case it is an inner element of a table.
Hope this helps.
Ed
Code: Select all
//==============================================================================
// This function "GET"s a JSON object from the URL and then inserts the table
// values into the HTML Table "main_table" in specific cells. This needs to
// work on a table with a variable number of rows.
//==============================================================================
function updateHeatThermoms(){
$(document).ready(function() {
$.ajax({
type: "GET",
url: "HeatThermoms.htm",
cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{}",
success: function(res) {
var objArray = res.HEATER;
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var x = document.getElementById('heat_table');
for (var i = 0; i < array.length; i++) {
var y = x.rows[i+1].cells;
var j = 1;
for (var index in array[i]) {
y[j].innerHTML = array[i][index];
j += 3;
}
}
}
});
});
}
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Mon Feb 25, 2013 6:27 am
by Arturino
Thanks a lot. Actually, I'm not sure, how to pass array of variables to the webpage.
Can you help me with that?
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Mon Feb 25, 2013 11:58 am
by ecasey
I can try.
Because you can only pass a string to a webpage with the Netburner "<!--FUNCTIONCALL [callback function name] -->" you have to format the string to be a JSON object with the array elements. I think Tod's examples cited earlier in this post show you how to do that in a callback function.
The "<!--FUNCTIONCALL [callback function name] -->" goes all alone in a separate .htm file like "HeatThermoms.htm" from my earlier code example. The javascript $.ajax function (like "function updateHeatThermoms" from my example) is run every few seconds by the javascript set up in the webpage and "GETs" the JSON object from the FUNCTIONCALL. It then parses the JSON object and puts in a var (called "res" in my example code) with the structure and data that was defined in the JSON object. Then you put the data into the HTML variables specified with the getElementById() function. The webpage updates the content of the variables and you get new data presented every few seconds.
That is a very brief explanation. You will have to play with it. JSON objects have to be properly formatted and javascript is very doesn't give much feedback.
Hope this helps.
Ed
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Mon Feb 03, 2014 9:44 pm
by Pamelia75
Same my problem.
Re: Simple Ajax app (update html page, no refreshing/no flic
Posted: Tue Feb 04, 2014 5:33 am
by ecasey
I think we will need a bit more detail.