adding basic ajax demo to api page

Stompfrog · Jan 29, 2012 · 1c4f9d4 · 1c4f9d4
1 parent 6957d71
commit 1c4f9d4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/application/views/api/index.php b/application/views/api/index.php
@@ -6,9 +6,10 @@
 		<h2>API</h2>
 		<hr />
 		<h3>What are you after?</h3>
-		<ul>
+		<ul id="api-links">
 			<li>Get the 2 latest artists as JSON = <?php echo anchor('/api/artists/2', '/api/artists/2'); ?></li>
 			<li>Get the artist with id 2 as JSON = <?php echo anchor('/api/artist/2', '/api/artist/2'); ?></li>
 		</ul>
+		<pre><code id="result">Results of API call will be loaded here...</code></pre>
 	</div>
 </div>
diff --git a/application/views/templates/footer.php b/application/views/templates/footer.php
@@ -11,6 +11,19 @@
 			<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
 			<script src="<?= base_url(); ?>/js/explore.js"></script></script>
 		<?php } ?>
-
+		<?php if($this->uri->segment(1)=="api"){ ?>
+		<script>
+			$(function(){
+				$('#api-links a').on('click',function(e){
+					e.preventDefault();
+					var url = this.href;
+					$('#result').text('Loading...');
+					$.getJSON(url, function(data) {
+						$('#result').text(JSON.stringify(data));
+					});
+				});
+			});
+		</script>
+		<?php } ?>
   </body>
 </html>