Skip to content

Instantly share code, notes, and snippets.

@cwchentw
Last active March 12, 2020 23:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save cwchentw/2011d135462e731d34517bb0fe99589e to your computer and use it in GitHub Desktop.
Respond to an AJAX call with a CGI program
<!--
Program: inch to centimeter converter
Author: Michael Chen
License: Apache 2.0
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Inch to centimeter converter">
<title>Inch to Centimeter</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class='page-header' style='margin-top: 10pt;'>
<h1>Inch to Centimeter Converter</h1>
</div>
<div id='message'></div>
<div class='form-inline'>
<div class="form-group mx-sm-3 mb-2">
<label for="inch2cm" class="sr-only">Inch to Centimeter</label>
<input type="text" class="form-control" id="inch2cm" placeholder="Inch">
</div>
<button type="submit" class="btn btn-primary mb-2" id='btnInch2CM'>Convert</button>
</div>
<div id='info'></div>
</div>
<!-- Bootstrap.Native, V4 version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.26/bootstrap-native-v4.min.js"
integrity="sha256-GlvYPu8qg3GLj5W5pC8VbjXiw+HhzSyVaWYV27ibTJY=" crossorigin="anonymous"></script>
<!-- SuperAgent -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/4.1.0/superagent.min.js"
integrity="sha256-XwGIb0dW2d+hM8XPl9RcTbaNJoTfQ/xKV1n5EBYH0n4=" crossorigin="anonymous"></script>
<script>
function showMessage(message) {
let msg = document.getElementById('message');
msg.innerHTML =
'<div class="alert alert-warning" role="alert">'
+ message
+ '</div>';
}
function clearMessage() {
let msg = document.getElementById('message');
msg.innerHTML = '';
}
function showInfo(data) {
let info = document.getElementById('info');
info.innerHTML =
'<div class="alert alert-info" role="alert">'
+ data
+ '</div>';
}
function clearInfo() {
let info = document.getElementById('info');
info.innerHTML = '';
}
let btn = document.getElementById('btnInch2CM');
btn.addEventListener('click', function () {
/* Get value from input. */
let value = document.getElementById('inch2cm').value;
if ('' === value) {
clearInfo()
showMessage('No data');
} else {
clearMessage();
/* Clear old value. */
document.getElementById('inch2cm').value = '';
superagent
.put('/cgi-bin/inch2cm.cgi')
.send({ data: value })
.then(function (res) {
showInfo(res.body.data);
})
.catch(function (err) {
if (err.response) {
showMessage(err.response.message);
} else {
showMessage(err);
}
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment