pjsier/client-templating.html

## client-templating.html
<!DOCTYPE html>
<html>
  <head>
    <title>Client-Side Templating Example</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script id="detail-template" type="text/x-handlebars-template">
      <h1>Test with an example nursing home ID from <a href="https://data.medicare.gov/Nursing-Home-Compare/Provider-Info/4pq5-n9py">Medicare's nursing home ratings.</a></h1>
      <h2>Try <a href="?145888">145888</a></h2>
      <h2>ID: {{federal_provider_number}}</h2>
      <h2>{{provider_name}}</h2>
      <h3>{{provider_city}}, {{provider_state}}</h3>
    </script>
  </body>
  <script type="text/javascript">
  $(document).ready(function() {
    // Get provider_id from URL parameter, query for it in API
    // URL format is example.com?145888, 145888 is the parameter passed
    var provider_id = window.location.search.replace(/^\?/, "");

    var query_string = "https://data.medicare.gov/resource/4pq5-n9py.json?$where=" +
                       "federal_provider_number='" + provider_id + "'";
    $.ajax({
        url: query_string,
        dataType: "json",
        success: function(response) {
          handleQuery(response);
        }
    });

    function handleQuery(response) {
      provider = response[0];

      // Get template from script in page
      var template = $('#detail-template').html();
      var compiledTemplate = Handlebars.compile(template);
      var result = compiledTemplate(provider);
      $('#content').html(result);
    }
  });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Client-Side Templating Example</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script id="detail-template" type="text/x-handlebars-template">
	<h1>Test with an example nursing home ID from <a href="https://data.medicare.gov/Nursing-Home-Compare/Provider-Info/4pq5-n9py">Medicare's nursing home ratings.</a></h1>
	<h2>Try <a href="?145888">145888</a></h2>
	<h2>ID: {{federal_provider_number}}</h2>
	<h2>{{provider_name}}</h2>
	<h3>{{provider_city}}, {{provider_state}}</h3>
	</script>
	</body>
	<script type="text/javascript">
	$(document).ready(function() {
	// Get provider_id from URL parameter, query for it in API
	// URL format is example.com?145888, 145888 is the parameter passed
	var provider_id = window.location.search.replace(/^\?/, "");

	var query_string = "https://data.medicare.gov/resource/4pq5-n9py.json?$where=" +
	"federal_provider_number='" + provider_id + "'";
	$.ajax({
	url: query_string,
	dataType: "json",
	success: function(response) {
	handleQuery(response);
	}
	});

	function handleQuery(response) {
	provider = response[0];

	// Get template from script in page
	var template = $('#detail-template').html();
	var compiledTemplate = Handlebars.compile(template);
	var result = compiledTemplate(provider);
	$('#content').html(result);
	}
	});
	</script>
	</html>