<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name=author content="Scott D. Anderson">
<title>{{title}}</title>
<style>
#errors { color: red; font-weight: bold; }
#result { font-weight: bold; }
#result .x, #result .y { color: red }
</style>
</head>
<body>
<p>This app computes elements of the Collatz sequence using Ajax.
<p>Use a url like
<a href="{{ url_for('getCollatzNormal', num=50 ) }}">
{{ url_for('getCollatzNormal', num=50 ) }}
</a></p>
<p><button id="btn-progressive">
progressive enhancement OFF
</button></p>
<div id="errors"></div>
<form id="number-submit-form"
method='GET'
action="{{url_for('getCollatzNormal')}}">
<p><label for="form-num">Form Number</label>:
<input type="text" name="num" id="form-num"></p>
<p><input type="submit" id="btn-submit" value="submit"></p>
</form>
{% if x %}
<p id="result">The next value after
<span class="x">{{x}}</span>
is
<span class="y">{{y}}</span></p>
{% endif %}
<p>Click on the list items to append the next value!</p>
<ul id="collatzNumbers"></ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
/* global $ */
var URL = "{{url_for('getCollatzAjax')}}";
function addToList(obj) {
if(obj.error) {
$("#errors").empty().html('Error: '+obj.err);
} else {
$("<li>")
.attr("data-num",obj.out)
.text("the number "+obj.in+" produces "+obj.out)
.appendTo("#collatzNumbers");
}
}
addToList({error: false, in: 50, out: 25});
addToList({error: false, in: 27, out: 82});
$("#btn-submit").on("click", function (event) {
if(progressive_enhancement_on) {
// don't do the normal form submission
event.preventDefault();
var num = $("#form-num").val();
sendNum(num);
}
});
$("#collatzNumbers").on("click","[data-num]",function(event) {
var num = $(this).attr("data-num");
sendNum(num);
});
function sendNum(num) {
console.log("Sending "+num+" to the back end");
$.get(URL,{'num': num},addToList);
}
var progressive_enhancement_on = false;
$("#btn-progressive").on('click', function () {
progressive_enhancement_on = !progressive_enhancement_on;
if(progressive_enhancement_on) {
$("#btn-progressive").text('Progressive Enhancement ON');
} else {
$("#btn-progressive").text('Progressive Enhancement OFF');
}
});
</script>
</body>
</html>