Salve a tutti,
anzi tutto chiedo scusa fin da subito per la mia ignoranza in materia.
Spero anche che il mio post sia In Topic, se non lo fosse scusatemi ancora ed eventualmente ditemi dove postarlo.
Ho un piccolo web server, che gira su un microcontrollore, che visualizza una semplice pagina HTML con una tabella con tre righe in cui visualizzo il nome di alcune variabili e il rispettivo valore.
I valori visualizzati in tabella vengono rinfrescati sfruttando Ajax.
La pagina completa consiste di un file html, un file .js e un file xml (vedi in fondo al post).
Questo codice l'ho "ritagliato" da un esempio funzionante, quindi non mi dilungo a spiegarvi come funziona perché sicuramente lo sapete molto meglio di me.
Il mio problema è visualizzare nella tabella solo le righe la cui variabile abbia un nome non nullo.
Per spiegarmi meglio vorrei che se il nome della variabile fosse "" (nullo), la riga corrispettiva non venisse visualizzata in tabella.
Non so se la mia richiesta sia fattibile, ma vorrei che questa funzione venisse implementata lato client (con javascript o simili) senza dover toccare il codice lato server.
Io ho provato ad inserire il codice HTML, che genera ogni riga della tabella, all'interno di uno script Java, ma probabilmente, quando lo script non genera una riga, la funzione 'document.getElementById' nella funzione 'updateStatus', non trovando l'ID corrispondente, blocca il funzionamento del rinfresco.
Ringrazio fin da ora chiunque possa aiutarmi a risolvere il problema che probabilmente per molti sarà di facile soluzione.
File 'index.html'
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Misure valori</title> <script src="/java.js" type="text/javascript"></script> </head><body> <div id="loading" style="display:none">Errore:
Connessione persa. </div> <table style="text-align: left; width: 100%; height: 72px; font-family: Verdana;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top; width: 100%; background-color: rgb(255, 153, 0);" rowspan="1" colspan="5">Misure valori</td> </tr> <tr> <td style="width: 10%; background-color: rgb(51, 51, 255); color: white;">Nome</td> <td style="width: 40%; background-color: rgb(51, 51, 255); color: white;">Valore</td> </tr> <tr> <td> <div id="display"> <span id="Nome0"> ? </span> </div>
</td> <td> <div id="display"> <span id="Valore0"> ? </span> </div>
</td> </tr> <tr> <td> <div id="display"> <span id="Nome1"> ? </span> </div>
</td> <td> <div id="display"> <span id="Valore1"> ? </span> </div>
</td> </tr> <tr> <td> <div id="display"> <span id="Nome2"> ? </span> </div>
</td> <td> <div id="display"> <span id="Valore2"> ? </span> </div>
</td> </tr> </tbody> </table> <script type="text/javascript"> </script> </body></html>
File 'java.js'
codice:
// Determines when a request is considered "timed out" var timeOutMS = 5000; //ms // Stores a queue of AJAX events to process var ajaxList = new Array(); // Initiates a new AJAX command // url: the url to access // container: the document ID to fill, or a function to call with response XML (optional) // repeat: true to repeat this call indefinitely (optional) // data: an URL encoded string to be submitted as POST data (optional) function newAJAXCommand(url, container, repeat, data) { // Set up our object var newAjax = new Object(); var theTimer = new Date(); newAjax.url = url; newAjax.container = container; newAjax.repeat = repeat; newAjax.ajaxReq = null; // Create and send the request if(window.XMLHttpRequest) { newAjax.ajaxReq = new XMLHttpRequest(); newAjax.ajaxReq.open((data==null)?"GET":"POST", newAjax.url, true); newAjax.ajaxReq.send(data); // If we're using IE6 style (maybe 5.5 compatible too) } else if(window.ActiveXObject) { newAjax.ajaxReq = new ActiveXObject("Microsoft.XMLHTTP"); if(newAjax.ajaxReq) { newAjax.ajaxReq.open((data==null)?"GET":"POST", newAjax.url, true); newAjax.ajaxReq.send(data); } } newAjax.lastCalled = theTimer.getTime(); // Store in our array ajaxList.push(newAjax); } // Loops over all pending AJAX events to determine if any action is required function pollAJAX() { var curAjax = new Object(); var theTimer = new Date(); var elapsed; // Read off the ajaxList objects one by one for(i = ajaxList.length; i > 0; i--) { curAjax = ajaxList.shift(); if(!curAjax) continue; elapsed = theTimer.getTime() - curAjax.lastCalled; // If we suceeded if(curAjax.ajaxReq.readyState == 4 && curAjax.ajaxReq.status == 200) { // If it has a container, write the result if(typeof(curAjax.container) == 'function'){ curAjax.container(curAjax.ajaxReq.responseXML.documentElement); } else if(typeof(curAjax.container) == 'string') { document.getElementById(curAjax.container).innerHTML = curAjax.ajaxReq.responseText; } // (otherwise do nothing for null values) curAjax.ajaxReq.abort(); curAjax.ajaxReq = null; // If it's a repeatable request, then do so if(curAjax.repeat) newAJAXCommand(curAjax.url, curAjax.container, curAjax.repeat); continue; } // If we've waited over 1 second, then we timed out if(elapsed > timeOutMS) { // Invoke the user function with null input if(typeof(curAjax.container) == 'function'){ curAjax.container(null); } else { // Alert the user alert("Command failed.\nConnection to development board was lost."); } curAjax.ajaxReq.abort(); curAjax.ajaxReq = null; // If it's a repeatable request, then do so if(curAjax.repeat) newAJAXCommand(curAjax.url, curAjax.container, curAjax.repeat); continue; } // Otherwise, just keep waiting ajaxList.push(curAjax); } // Call ourselves again in 10ms setTimeout("pollAJAX()",10); } // Parses the xmlResponse returned by an XMLHTTPRequest object // xmlData: the xmlData returned // field: the field to search for function getXMLValue(xmlData, field) { try { if(xmlData.getElementsByTagName(field)[0].firstChild.nodeValue) return xmlData.getElementsByTagName(field)[0].firstChild.nodeValue; else return null; } catch(err) { return null; } } //kick off the AJAX Updater setTimeout("pollAJAX()",500);
File 'status.xml'
codice:
<response> <Nome0>~Nome(0)~</Nome0> <Nome1>~Nome(1)~</Nome1> <Nome2>~Nome(2)~</Nome2> <Valore0>~Valore(0)~</Valore0> <Valore1>~Valore(1)~</Valore1> <Valore2>~Valore(2)~</Valore2> </response>