Simple Ajax app (update html page, no refreshing/no flicker)

Post your example source code and application notes to share with others
Arturino
Posts: 11
Joined: Tue Jan 15, 2013 6:05 am

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by Arturino » Thu Feb 21, 2013 11:26 am

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.

ecasey
Posts: 146
Joined: Sat Mar 26, 2011 9:34 pm

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by ecasey » Fri Feb 22, 2013 8:20 am

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;
        			}
        		}
	        }
	    }); 			    
	});
}


Arturino
Posts: 11
Joined: Tue Jan 15, 2013 6:05 am

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by Arturino » Mon Feb 25, 2013 6:27 am

Thanks a lot. Actually, I'm not sure, how to pass array of variables to the webpage.
Can you help me with that?

ecasey
Posts: 146
Joined: Sat Mar 26, 2011 9:34 pm

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by ecasey » Mon Feb 25, 2013 11:58 am

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

Pamelia75
Posts: 1
Joined: Mon Feb 03, 2014 9:22 pm

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by Pamelia75 » Mon Feb 03, 2014 9:44 pm

Same my problem.

ecasey
Posts: 146
Joined: Sat Mar 26, 2011 9:34 pm

Re: Simple Ajax app (update html page, no refreshing/no flic

Post by ecasey » Tue Feb 04, 2014 5:33 am

I think we will need a bit more detail.

Post Reply