Ajaxified fact example
This commit is contained in:
parent
7ab3b406db
commit
921dbf9b6c
@ -2,11 +2,29 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Factorials</title>
|
<title>Factorials</title>
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
$("#num").parent().append("<span id='result'></span>");
|
||||||
|
$("#submit").click(function() {
|
||||||
|
$.getJSON($("#num").attr("value") + "/", function(o) {
|
||||||
|
$("#result").text("fact(" + o.input + ") = " + o.result);
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
#result {
|
||||||
|
padding-left: 1em;
|
||||||
|
color: #090;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form method="get" action="fact/">
|
<form method="get" action="fact/">
|
||||||
<p><label for="num">Number:</label> <input type="text" id="num" name="num"></p>
|
<p><label for="num">Number:</label> <input type="text" id="num" name="num"></p>
|
||||||
<p><input type="submit" value="Get the factorial!"></p>
|
<p><input id="submit" type="submit" value="Get the factorial!"></p>
|
||||||
</form>
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -16,7 +16,10 @@ instance Yesod Fact where
|
|||||||
|]
|
|]
|
||||||
|
|
||||||
index = return $ StaticFile TypeHtml "examples/fact.html"
|
index = return $ StaticFile TypeHtml "examples/fact.html"
|
||||||
fact i = return $ toHtmlObject $ show $ product [1..fromIntegral i]
|
fact i = return $ toHtmlObject
|
||||||
|
[ ("input", show i)
|
||||||
|
, ("result", show $ product [1..fromIntegral i])
|
||||||
|
]
|
||||||
factRedirect = do
|
factRedirect = do
|
||||||
i <- getParam "num"
|
i <- getParam "num"
|
||||||
redirect $ "../" ++ i ++ "/"
|
redirect $ "../" ++ i ++ "/"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user