<!doctype html>
<html>
<head>
<title>Promises Primer Tutorial - RJM Programming - October, 2017</title>
<script type='text/javascript'>
var lleft=false, lright=false, cell="left", damdone=false;
var wis, adate;
// Promise.all([promise1, promise2]).then(function(results) {
// // Both promises resolved
// })
// .catch(function(error) {
// // One or more promises was rejected
// });
// From Jake Archibald's Promises and Back:
// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequest
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onreadystatechange = function () {
//document.title='' + req.readyState + ' ' + req.status;
if (req.readyState == 4 && req.status == 200) {
console.log(req.responseText);
if (cell != "centre") {
document.getElementById(cell).innerHTML=req.response;
if (req.response.indexOf('ighthous') != -1 || damdone) {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php Ajax response<br><br>';
adate=new Date();
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php IFRAME src<br><br>';
if (1 == 1) {
document.getElementById('h' + cell).innerHTML+='<iframe id="i' + cell + '" onload="ldone(' + "'australian_lighthouses.php'" + ');" style="display:none;width:800px;float:left;height:900px;" src="//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort" title="Lighthouses in Australia"></iframe>';
} else {
document.getElementById('h' + cell).innerHTML+='<iframe onload="ldone(' + "'australian_lighthouses.php'" + ');" style="width:800px;float:left;height:900px;" src="//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort" title="Lighthouses in Australia"></iframe>';
}
//document.getElementById('h' + cell).innerHTML+='<iframe onload="ldone(' + "'australian_lighthouses.php'" + ');" style="width:800px;float:left;height:900px;" src="//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=56" title="Lighthouses in Australia"></iframe>';
} else {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm Ajax response<br><br>';
damdone=true;
//alert(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue("width"));
wis='' + eval(eval(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue("width").replace('px','')) - 0) + 'px';
adate=new Date();
if (document.getElementById('hmiddle').innerHTML == "") document.getElementById('hmiddle').innerHTML=document.getElementById('middle').innerHTML;
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm IFRAME src<br><br>';
if (1 == 1) {
document.getElementById('h' + cell).innerHTML+='<iframe id="i' + cell + '" onload="ldone(' + "'dams_usa.htm'" + ');" style="display:none;width:' + wis + ';float:left;height:900px;" src="//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm" title="Dams in the USA"></iframe>';
} else {
document.getElementById('h' + cell).innerHTML+='<iframe onload="ldone(' + "'dams_usa.htm'" + ');" style="width:' + wis + ';float:left;height:900px;" src="//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm" title="Dams in the USA"></iframe>';
}
}
if (cell == "right") {
cell="centre";
} else {
cell="right";
}
} else {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'sleep.php?n=75 Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'sleep.php?n=75 Ajax response<br><br>';
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
}
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
function ldone(what) {
adate=new Date();
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + what + ' IFRAME loaded<br><br>';
}
function ol() {
if (1 == 1) {
document.getElementById('trajax').style.display='none';
var promise1=get('//www.rjmprogramming.com.au/PHP/australian_lighthouses.php').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
var promise2=get('//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
var promise3=get('//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=75').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
Promise.all([promise1, promise2, promise3]).then(function(results) {
// All promises resolved
//alert(97);
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
})
.catch(function(error) {
// One or more promises was rejected
//alert(997);
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
});
} else {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php get()<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php get()<br><br>';
//get('//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=56').then(function(response) {
get('//www.rjmprogramming.com.au/PHP/australian_lighthouses.php').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm get()<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm get()<br><br>';
get('//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
}
}
</script>
</head>
<body onload='ol();'>
<h1>Promises Primer Tutorial</h1>
<h3>RJM Programming - October, 2017</h3>
<h3> Thanks to <a target=_blank title='Useful link, thanks' href='https://davidwalsh.name/promises'>https://davidwalsh.name/promises</a></h3>
<table style='width:100%;'>
<tbody>
<tr><th id='hleft' style='vertical-align:top;width:550px;'></th><th id='hmiddle' style='vertical-align:top;'></th><th id='hright' style='vertical-align:top;'></th></tr>
<tr id='trajax'><td id='left' style='vertical-align:top;width:550px;'></td><td id='middle' style='vertical-align:top;'></td><td id='right' style='vertical-align:top;'></td></tr>
</tbody>
</table>
</body>
</html>