Ik heb een stukje js waarmee ik een tab menu op de html maak en tevens de header en footer voor de geselecteerde pagina genereer. Het vervelende nu is dat als op de pagina zelf ook een XMLHttpRequest wordt gedaan de header en footer niet ingevuld worden mbv onderstaande code...
In bijvoorbeeld de pagina:
En dan de header/footer code;
Weet iemand hoe dit probleem op te lossen is?
Alvast bedankt.
In bijvoorbeeld de pagina:
Code:
//load the specified url -asynchronously- and pass the response to the specified callback function
function ajax_asynch(url, callback) {
try {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
} else { // code for IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState == 4 && callback) {
callback(req.responseText);
}
}
req.open("GET", url, true);
req.send(null);
} catch (error) {
alert('While accessing this URL:\r\n\r\n' + url + '\r\n\r\nthe following error occurred:\r\n\r\n' + error);
}
}
function ajax(url, callback) {
try {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
} else { // code for IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState == 4 && callback) {
callback(req.responseText);
}
}
req.open("GET", url, false);
req.send(null);
} catch (error) {
alert('While accessing this URL:\r\n\r\n' + url + '\r\n\r\nthe following error occurred:\r\n\r\n' + error);
}
}
// read the nominal values
function read() {
var url = '/json.exe?_NOMINAL_F,_NOMINAL_U[0..3],_NOMINAL_I[0..3],_VTPRIM[0..3],_VTSEC[0..3],_CTPRIM[0..3],_CTSEC[0..3],time=' + new Date().getTime();
ajax_asynch(url, function(response) {
var data = eval('(' + response + ')');
var f = data['_NOMINAL_F'][0];
var vl = data['_NOMINAL_U'][0];
var il = data['_NOMINAL_I'][0];
var vtp = data['_VTPRIM'][0];
var vts = data['_VTSEC'][0];
var ctp = data['_CTPRIM'][0];
var cts = data['_CTSEC'][0];
document.getElementById('freq').value = f;
document.getElementById('v1').value = vl[0]; //same var for l1,l2,l3,n
document.getElementById('il1').value = il[0];
document.getElementById('il2').value = il[1];
document.getElementById('il3').value = il[2];
document.getElementById('il4').value = il[3];
document.getElementById('pv').value = vtp[0];
document.getElementById('sv').value = vts[0];
document.getElementById('pc').value = ctp[0];
document.getElementById('sc').value = cts[0];
});
}
// write the nominal values
function write() {
var url = '/json.exe?'+
'_gbluser,'+
'time=' + new Date().getTime();
ajax(url, function(response) {
var data = eval('(' + response + ')');
user = data['_GBLUSER'][0];
});
var pwd = document.getElementById('pwd').value
document.getElementById('pwd').value = '';
if (pwd != user) {
alert('Invalid password');
return;
}
var url = 'dummy.html?';
url += '_NOMINAL_F=' + document.getElementById('freq').value;
url += '&_NOMINAL_U[0]=' + document.getElementById('v1').value;
url += '&_NOMINAL_U[1]=' + document.getElementById('v1').value;
url += '&_NOMINAL_U[2]=' + document.getElementById('v1').value;
url += '&_NOMINAL_U[3]=' + document.getElementById('v1').value;
url += '&_NOMINAL_I[0]=' + document.getElementById('il1').value;
url += '&_NOMINAL_I[1]=' + document.getElementById('il2').value;
url += '&_NOMINAL_I[2]=' + document.getElementById('il3').value;
url += '&_NOMINAL_I[3]=' + document.getElementById('il4').value;
url += '&_VTPRIM[0]=' + document.getElementById('pv').value; //primary transformator voltage[0..3]
url += '&_VTPRIM[1]=' + document.getElementById('pv').value;
url += '&_VTPRIM[2]=' + document.getElementById('pv').value;
url += '&_VTPRIM[3]=' + document.getElementById('pv').value;
url += '&_VTSEC[0]=' + document.getElementById('sv').value; //secondary transformator voltage[0..3]
url += '&_VTSEC[1]=' + document.getElementById('sv').value;
url += '&_VTSEC[2]=' + document.getElementById('sv').value;
url += '&_VTSEC[3]=' + document.getElementById('sv').value;
url += '&_CTPRIM[0]=' + document.getElementById('pc').value; //primary transformator current[0..3]
url += '&_CTPRIM[1]=' + document.getElementById('pc').value;
url += '&_CTPRIM[2]=' + document.getElementById('pc').value;
url += '&_CTPRIM[3]=' + document.getElementById('pc').value;
url += '&_CTSEC[0]=' + document.getElementById('sc').value; //secondary transformator current[0..3]
url += '&_CTSEC[1]=' + document.getElementById('sc').value;
url += '&_CTSEC[2]=' + document.getElementById('sc').value;
url += '&_CTSEC[3]=' + document.getElementById('sc').value;
url += '&ms=' + new Date().getTime();
ajax_asynch(url, null);
alert('settings succesfully changed');
}
// initialize button handlers and field values
window.onload = function() {
//document.getElementById('read').onclick = read;
document.getElementById('write').onclick = write;
read();
}
En dan de header/footer code;
Code:
var sernr;
//load the specified url -asynchronously- and pass the response to the specified callback function
function ajax_asynch(url, callback) {
try {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
} else { // code for IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState == 4 && callback) {
callback(req.responseText);
}
}
req.open("GET", url, false);
req.send(null);
} catch (error) {
alert('While accessing this URL:\r\n\r\n' + url + '\r\n\r\nthe following error occurred:\r\n\r\n' + error);
}
}
function header(pagetitle) {
var url = '/json.exe?'+
'_gbldevname,_gblrefnr,'+
'_gbllocation,_gblpom,'+
'_gbluser,'+
'time=' + new Date().getTime();
ajax_asynch(url, function(response) {
var data = eval('(' + response + ')');
var customerName = (data['_GBLDEVNAME'][0]);
var refnr = (data['_GBLREFNR'][0]);
var location = (data['_GBLLOCATION'][0]);
var pom = (data['_GBLPOM'][0]);
document.write(' <div class="header">');
document.write(' <table>');
document.write(' <tr>');
document.write(' <td class="">EPAQ PQ system ™</td>');
document.write(' <td class="epaq">'+customerName+'</td>');
document.write(' <td class="id">'+refnr+'</td>');
document.write(' <td class="id">'+pom+'</td>');
document.write(' <td class="location">'+location+'</td>');
document.write(' </tr>');
document.write(' </table>');
document.write(' </div>');
});
}
function tab(href, title, activeTitle) {
var classes = (title == activeTitle) ? 'tab activeTab' : 'tab';
document.write(' <a class="' + classes + '" href="' + href + '">' + title + '</a>');
}
function tabs(activeTitle) {
document.write('<div class="tabArea">');
tab('index.html', 'Dashboard', activeTitle);
tab('panelpc_trends1.html', 'Trends', activeTitle);
tab('panelpc_timeplots1.html', 'Quick Charts', activeTitle);
tab('panelpc_events.html', 'Event Details', activeTitle);
tab('panelpc_wave.html', 'Waveforms', activeTitle);
tab('energy_table.html', 'Energy', activeTitle);
tab('multimeter.html', 'Configuration', activeTitle);
tab('report_choice.html', 'Report', activeTitle);
document.write('</div>');
}
function subTabsTrends(activeTitle) {
document.write('<div class="tabArea2">');
tab('panelpc_trends1.html', 'Voltage / Current / Frequency', activeTitle);
tab('panelpc_trends2.html', 'Active Power / Reactive Power / Apparent Power', activeTitle);
tab('panelpc_trends3.html', 'Harmonic Distortions', activeTitle);
document.write('</div>');
}
function subTabsTimePlots(activeTitle) {
document.write('<div class="tabArea2">');
tab('panelpc_timeplots1.html', 'Voltage / Current / Frequency', activeTitle);
tab('panelpc_timeplots2.html', 'Active Power / Reactive Power / Apparent Power', activeTitle);
tab('panelpc_timeplots3.html', 'Harmonics Distortions', activeTitle);
document.write('</div>');
}
function subTabsConfiguration(activeTitle) {
document.write('<div class="tabArea2">');
tab('multimeter.html', 'Multimeter', activeTitle);
tab('config_report_id.html', 'Device Id', activeTitle);
tab('config_nominal_values.html', 'Nominal Values', activeTitle);
tab('config_tresholds.html', 'Norm Tresholds', activeTitle);
tab('config_alarms.html', 'Event Tresholds', activeTitle);
tab('config_costs.html', 'Costs/CO2', activeTitle);
tab('config_report.html', 'Report', activeTitle);
//document.write(' <a class="tab disabled" style="color:#555;">Event Thresholds</a>');
document.write('</div>');
}
function subTabsWaveforms(activeTitle) {
document.write('<div class="tabArea2">');
tab('panelpc_wave.html', 'Separated waveforms', activeTitle);
tab('panelpc_wave_combined.html', 'Combined waveforms', activeTitle);
document.write('</div>');
}
function subTabsEnergy(activeTitle) {
document.write('<div class="tabArea2">');
tab('energy_table.html', 'Energy Table', activeTitle);
tab('energy_chart.html', 'Energy Demand', activeTitle);
document.write('</div>');
}
function subTabsReport(activeTitle) {
document.write('<div class="tabArea2">');
tab('report_choice.html', 'Report choice', activeTitle);
tab('report_csv.html', 'Trends csv', activeTitle);
tab('events_csv.html', 'Events csv', activeTitle);
document.write('</div>');
}
function footer() {
// read the values
var url = '/json.exe?'+
'_sernr,'+
'time=' + new Date().getTime();
ajax_asynch(url, function(response) {
var data = eval('(' + response + ')');
sernr = data['_SERNR'][0];
});
function addZero(number) {
if (number<10)
return '0' + number;
return number;
}
function datetime() {
var now = new Date();
var dt = '';
dt += now.getFullYear();
dt += '-';
dt += addZero(now.getMonth() + 1);
dt += '-';
dt += addZero(now.getDate());
dt += ' ';
dt += addZero(now.getHours());
dt += ':';
dt += addZero(now.getMinutes());
dt += ':';
dt += addZero(now.getSeconds());
return dt;
}
document.write(' <div class="footer">');
document.write(' <table>');
document.write(' <tr>');
document.write(' <td class="datetime" id="datetime">' + datetime() + '</td>');
document.write(' <td class="copyright">blblblblbbl</td>');
document.write(' <td class="serialno">s/n '+ sernr +'</td>');
document.write(' </tr>');
document.write(' </table>');
document.write(' </div>');
function updateDateTime() {
document.getElementById("datetime").innerHTML = datetime();
setTimeout(updateDateTime, 1000);
}
setTimeout(updateDateTime, 1000);
}
Weet iemand hoe dit probleem op te lossen is?
Alvast bedankt.