-
Notifications
You must be signed in to change notification settings - Fork 127
Ajax Example
ianheggie edited this page Feb 26, 2013
·
5 revisions
- Copy the following html code to a file under your RAILS_ROOT/public directory eg RAILS_ROOT/public/ajax_example.html,
- Install health_check gem,
- run the rails server,
- Browse to the file, eg http://localhost:3000/ajax_example.html,
- Click on the two dynamic links to trigger the ajax call, and voew the results
<html>
<head>
<title>Example static and dynamic calls to health_check</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function parse_result(result, callback) {
$('#html_status_'+callback).text(result.status);
$('#html_body_'+callback).text(result.responseText);
alert(callback + " callback called");
};
function dynamic_call(url) {
$.ajax({
dataType: "text",
url: url,
success: function(data, textStatus, result) {
$('#data_success').text(data);
$('#html_status').css('backgroundColor', 'yellow');
parse_result(result, 'success');
},
error: function(result, textStatus) {
$('#html_status').css('backgroundColor', 'yellow');
parse_result(result, 'error');
},
complete: function(result, textStatus) {
$('#html_status').css('backgroundColor', 'yellow');
parse_result(result, 'complete');
}
});
};
</script>
</head>
<body>
<h1>Static calls</h1>
<ul>
<li><a href="http://localhost:3000/health_check/site" target="_blank">Minimal health check should always work</a>
<li><a href="http://localhost:3000/health_check/fail" target="_blank">Force health check to fail!</a>
</ul>
<h1>Dynamic calls</h1>
<ul>
<li><a href="#" onclick="dynamic_call('http://localhost:3000/health_check/site');">Minimal health check should always work</a>
<li><a href="#" onclick="dynamic_call('http://localhost:3000/health_check/fail');">Force health check to fail!</a>
<li>Last results sent to success:<ul>
<li><b>Data:</b><span id=data_success></span>
<li><b>result.status:</b><span id=html_status_success></span>
<li><b>result.responseText:</b><span id=html_body_success></span>
</ul>
<li>Last results sent to error:<ul>
<li><b>result.status:</b><span id=html_status_error></span>
<li><b>result.responseText:</b><span id=html_body_error></span>
</ul>
<li>Last results sent to complete:<ul>
<li><b>result.status:</b><span id=html_status_complete></span>
<li><b>result.responseText:</b><span id=html_body_complete></span>
</ul>
</ul>
</body>
</html>