Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Basic AJAX Crawlable example (needs to be further fleshed out)

  • Loading branch information...
commit 83d198e7e1770718a7ff6e2169a7c60f29c318e3 1 parent 8a8530f
@cowboy authored
View
94 examples/fragment-ajax-crawlable/XMLpage.php
@@ -0,0 +1,94 @@
+<?PHP
+
+/*!
+ * XMLpage - v0.1pre - 8/30/2010
+ * http://benalman.com/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+
+// About:
+//
+// A very simple class for retrieving HTML content and other arbitrary metadata
+// from a very simple XML file.
+//
+// Usage:
+//
+// $page = new XMLpage(); // Initialize.
+//
+// $page->attr['id'] // The page node "id" attribute.
+// $page->attr['title'] // The page node "title" attribute.
+// $page->content // The contents of the page node.
+//
+// $page->options['id'] // The requested "id".
+//
+// Notes:
+//
+// * Either use valid XHTML content, or wrap the content inside the page node
+// with <![CDATA[ ... ]]> tags.
+// * Page attribute values are completely arbitrary and will be auto-populated
+// into the `attr` array. The only required attribute is "id".
+
+class XMLpage {
+
+ // Default options.
+ private $options = array(
+ 'id' => '',
+ 'xml' => 'pages.xml',
+ 'fallback_ids' => array( '404', '' ),
+ );
+
+ function XMLpage( $options = array() ) {
+ // Override any default options with passed options.
+ foreach ( $options as $key => $value ) {
+ $this->options[ $key ] = $value;
+ }
+
+ // Initialize XML and XPath objects.
+ $this->dom = new DOMDocument();
+ $this->dom->load( $this->options['xml'] );
+ $this->xpath = new DOMXPath( $this->dom );
+
+ // While the requested id will always be tried first, in case that page
+ // doesn't exist, the first page specified in `fallback_ids` will be used
+ // instead.
+ $ids = $this->options['fallback_ids'];
+ array_unshift( $ids, $this->options['id'] );
+
+ foreach ( $ids as $id ) {
+ // If `id` page is defined in the XML, load and initialize it.
+ if ( $this->load_page( $id ) ) {
+ $this->init_page( $id );
+ break;
+ }
+ }
+ }
+
+ // Load a page node from the XML document and return true if successful.
+ private function load_page( $id = '' ) {
+ // Get the page node matching this ID.
+ $this->page = $this->xpath->query( "/pages/page[@id='$id']" )->item(0);
+
+ // Return the success value.
+ return isset( $this->page );
+ }
+
+ // Initialize page vars from the XML.
+ private function init_page( $id ) {
+ // The HTML content of the page node.
+ $dom = new DOMDocument();
+ $dom->loadXML( $this->dom->saveXML( $this->page ) );
+ $this->content = $dom->saveHTML();
+
+ // An array of attribute values.
+ $this->attr = array();
+ foreach ( $this->page->attributes as $name => $node ) {
+ $this->attr[ $name ] = $node->nodeValue;
+ }
+ }
+
+};
+
+?>
View
BIN  examples/fragment-ajax-crawlable/bbq.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  examples/fragment-ajax-crawlable/burger.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  examples/fragment-ajax-crawlable/chicken.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
280 examples/fragment-ajax-crawlable/index.php
@@ -0,0 +1,280 @@
+<?PHP
+
+include "../index.php";
+
+// Include the XMLpage class.
+require "XMLpage.php";
+
+// Initialize the XMLpage, fetching the appropriate page's data.
+$page = new XMLpage(array( 'id' => $_REQUEST['_escaped_fragment_'] ));
+
+// This is a special case for the 404 error page. Only if it is defined in the
+// XML and a page isn't found will a 404 header be set.
+if ( $page->attr['status'] == '404' ) {
+ header( 'HTTP/1.0 404 Not Found' );
+}
+
+// Set the title appropriately, based on the XMLpage title attribute.
+$shell['title'] = $page->attr['title'];
+
+$shell['h2'] = 'Cached AJAX + fragment + history + bookmarking = Tasty!';
+
+// ========================================================================== //
+// SCRIPT
+// ========================================================================== //
+
+ob_start();
+?>
+$(function(){
+
+ // Enable "AJAX Crawlable" mode.
+ $.param.fragment.ajaxCrawlable( true );
+
+ // Keep a mapping of url-to-container for caching purposes.
+ var cache = {
+ // If url is '' (no fragment), display this div's content.
+ '': {
+ title: "<?= $page->attr['title'] ?>",
+ elem: $('.bbq-item')
+ }
+ };
+
+ // Bind an event to window.onhashchange that, when the history state changes,
+ // gets the url from the hash and displays either our cached content or fetches
+ // new content to be displayed.
+ $(window).bind( 'hashchange', function(e) {
+
+ // Get the hash (fragment) as a string, with any leading # removed. Note that
+ // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+ var url = $.param.fragment();
+
+ // Remove .bbq-current class from any previously "current" link(s).
+ $( 'a.bbq-current' ).removeClass( 'bbq-current' );
+
+ // Hide any visible ajax content.
+ $( '.bbq-content' ).children( ':visible' ).hide();
+
+ // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
+ url && $( 'a[href="#!' + url + '"]' ).addClass( 'bbq-current' );
+
+ if ( cache[ url ] ) {
+ // Since the element is already in the cache, it doesn't need to be
+ // created, so instead of creating it again, let's just show it!
+ cache[ url ].elem.show();
+
+ // Update the document title.
+ document.title = cache[ url ].title;
+
+ } else {
+ // Show "loading" content while AJAX content loads.
+ $( '.bbq-loading' ).show();
+
+ // Load external content (stored in the XML data file) via AJAX. The
+ // purpose of page.php is simply to provide the data stored in XML in
+ // the more friendly JSON format.
+ $.getJSON( 'page.php', { id: url }, function(data){
+
+ // Ensure that data was actually returned. You could easily go a step
+ // further and check that data.attr.status isn't '404', for example.
+ if ( data ) {
+ // Update the document title.
+ document.title = data.attr.title;
+
+ // Update the internal cache with a reference to this element as well
+ // as its title.
+ cache[ url ] = {
+ title: data.attr.title,
+ elem: $( '<div class="bbq-item"/>' )
+
+ .html( data.content )
+
+ // Append the content container to the parent container.
+ .appendTo( '.bbq-content' )
+ };
+ }
+
+ // Content loaded, hide "loading" content.
+ $( '.bbq-loading' ).hide();
+ });
+ }
+ })
+
+ // Since the event is only triggered when the hash changes, we need to trigger
+ // the event now, to handle the hash the page may have loaded with.
+ $(window).trigger( 'hashchange' );
+
+});
+<?
+$shell['script'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML HEAD ADDITIONAL
+// ========================================================================== //
+
+ob_start();
+?>
+<script type="text/javascript" src="../../jquery.ba-bbq.js"></script>
+<script type="text/javascript" language="javascript">
+
+<?= $shell['script']; ?>
+
+$(function(){
+
+ // Syntax highlighter.
+ SyntaxHighlighter.highlight();
+
+});
+
+</script>
+<style type="text/css" title="text/css">
+
+/*
+bg: #FDEBDC
+bg1: #FFD6AF
+bg2: #FFAB59
+orange: #FF7F00
+brown: #913D00
+lt. brown: #C4884F
+*/
+
+.bbq {
+ margin-bottom: 1em;
+}
+
+.bbq-content {
+ border-left: 1px solid #913D00;
+ border-right: 1px solid #913D00;
+ padding: 8px;
+ margin: 0;
+ float: left;
+ width: 682px;
+ height: 302px;
+}
+
+.bbq-item h1 {
+ margin: 0;
+ font-size: 180%;
+}
+
+.bbq-item p {
+ font-size: 150%;
+ margin: 5px 0 0;
+}
+
+.bbq-item img {
+ border: 1px solid #913D00;
+ float: right;
+ margin-left: 10px;
+}
+
+a.bbq-current {
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.bbq-nav {
+ padding: 0.3em;
+ color: #C4884F;
+ border: 1px solid #C4884F;
+ background: #FFD6AF;
+ clear: both;
+ text-align: center;
+}
+
+.bbq-nav-top {
+ margin-bottom: 0;
+ -moz-border-radius-topleft: 10px;
+ -moz-border-radius-topright: 10px;
+ -webkit-border-top-left-radius: 10px;
+ -webkit-border-top-right-radius: 10px;
+}
+
+.bbq-nav-bottom {
+ margin-top: 0;
+ -moz-border-radius-bottomleft: 10px;
+ -moz-border-radius-bottomright: 10px;
+ -webkit-border-bottom-left-radius: 10px;
+ -webkit-border-bottom-right-radius: 10px;
+}
+
+#page {
+ width: 700px;
+}
+
+</style>
+<?
+$shell['html_head'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML BODY
+// ========================================================================== //
+
+ob_start();
+?>
+<?= $shell['donate'] ?>
+
+<p>
+ With <a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+</p>
+
+<p>
+ (EXPLAIN)
+</p>
+
+<h3>Navigation</h3>
+
+<div class="bbq-link">
+ <div class="bbq-nav bbq-nav-top">
+ <a href="#!burger">Burgers</a> |
+ <a href="#!chicken">Chicken</a> |
+ <a href="#!kebabs">Kebabs</a> |
+ <a href="#!kielbasa">Kielbasa</a> |
+ <a href="#!ribs">Ribs</a> |
+ <a href="#!steak">Steak</a>
+ </div>
+
+ <div class="bbq-content">
+
+ <!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
+ <div class="bbq-loading" style="display:none;">
+ <img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
+ </div>
+
+ <!-- This content will be shown if no path is specified in the URL fragment. -->
+ <div class="bbq-item">
+ <?= $page->content ?>
+ </div>
+
+ </div>
+
+ <div class="bbq-nav bbq-nav-bottom">
+ <a href="#!burger">Burgers</a> |
+ <a href="#!chicken">Chicken</a> |
+ <a href="#!kebabs">Kebabs</a> |
+ <a href="#!kielbasa">Kielbasa</a> |
+ <a href="#!ribs">Ribs</a> |
+ <a href="#!steak">Steak</a>
+ </div>
+</div>
+
+<h3>The code</h3>
+
+<p>Note that a lot of the following code is very similar to the <a href="../fragment-advanced/">advanced window.onhashchange</a> example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the <a href="../fragment-jquery-ui-tabs/">jQuery UI Tabs</a> example.</p>
+
+<pre class="brush:js">
+<?= htmlspecialchars( $shell['script'] ); ?>
+</pre>
+
+<?
+$shell['html_body'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// DRAW SHELL
+// ========================================================================== //
+
+draw_shell();
+
+?>
View
BIN  examples/fragment-ajax-crawlable/kebabs.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  examples/fragment-ajax-crawlable/kielbasa.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
19 examples/fragment-ajax-crawlable/page.php
@@ -0,0 +1,19 @@
+<?PHP
+
+// Include the XMLpage class.
+require "XMLpage.php";
+
+// Generate appropriate content-type header.
+$is_xhr = strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest';
+header( 'Content-type: application/' . ( $is_xhr ? 'json' : 'x-javascript' ) );
+
+// Initialize the XMLpage, fetching the appropriate page's data.
+$page = new XMLpage(array( 'id' => $_GET['id'] ));
+
+// Return the requested page data in JSON format.
+print json_encode(array(
+ 'attr' => $page->attr,
+ 'content' => $page->content,
+));
+
+?>
View
57 examples/fragment-ajax-crawlable/pages.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<pages>
+ <page id="" title="jQuery BBQ">
+ <img src="bbq.jpg" width="400" height="300"/>
+ <h1>jQuery BBQ</h1>
+ <p>Click a nav item above or below to load some delicious AJAX content! Also,
+ once the content loads, feel free to further explore our savory delights by
+ clicking any inline links you might see.</p>
+ </page>
+ <page id="404" title="Page not found" status="400">
+ <img src="bbq.jpg" width="400" height="300"/>
+ <h1>Page not found</h1>
+ <p>This is a 404 error page.</p>
+ </page>
+ <page id="burger" title="Delicious Burgers">
+ <img src="burger.jpg" width="400" height="300"/>
+ <h1>Delicious Burgers</h1>
+ <p>It might look like more food than you can eat, but trust me, you'll finish
+ this burger. What, you say you're a vegetarian? Ok then, try the
+ <a href="#!chicken">Chicken</a>!</p>
+ </page>
+ <page id="chicken" title="Mesquite Rub Chicken">
+ <img src="chicken.jpg" width="400" height="300"/>
+ <h1>Mesquite Rub Chicken</h1>
+ <p>This spicy meal might have you begging for "cerveza" but you'll be coming back for
+ seconds! Still hungry? Why not wash that chicken down with a heaping plate of
+ <a href="#!kebabs">Kebabs</a>?</p>
+ </page>
+ <page id="kebabs" title="Savory Shish-Kebabs">
+ <img src="kebabs.jpg" width="400" height="300"/>
+ <h1>Savory Shish-Kebabs</h1>
+ <p>Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
+ to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
+ delicious <a href="#!burger">Burger</a> whet your appetite?</p>
+ </page>
+ <page id="kielbasa" title="Sweet Kielbasa">
+ <img src="kielbasa.jpg" width="400" height="300"/>
+ <h1>Sweet Kielbasa</h1>
+ <p>One bite of this kielbasa will have you asking for the recipe, and that's a fact.
+ But save some room, because while you're here, you've got to check out our fantastic
+ fall-off-the-bone <a href="#!ribs">Ribs</a>!</p>
+ </page>
+ <page id="ribs" title="Baby-Back Ribs">
+ <img src="ribs.jpg" width="400" height="300"/>
+ <h1>Baby-Back Ribs</h1>
+ <p>What's better than a half-rack of ribs? A full rack! And if you like ribs,
+ which you do, you're sure to love our perfectly seared flame-broiled
+ <a href="#!steak">Steak</a>!</p>
+ </page>
+ <page id="steak" title="Flame-Broiled Steak">
+ <img src="steak.jpg" width="400" height="300"/>
+ <h1>Flame-Broiled Steak</h1>
+ <p>Seasoned and cooked perfectly, this amazing steak aims to please! And if you
+ have room left over, don't forget to help yourself to a plate of our sweet
+ <a href="#!kielbasa">Kielbasa</a>!</p>
+ </page>
+</pages>
View
BIN  examples/fragment-ajax-crawlable/ribs.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  examples/fragment-ajax-crawlable/steak.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
6 examples/index.php
@@ -31,7 +31,11 @@ function draw_shell() {
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>Ben Alman &raquo; <?= $shell['title1'] ?><? if ( $shell['title2'] ) { print ' &raquo; ' . $shell['title2']; } ?><? if ( $shell['title3'] ) { print ' &raquo; ' . $shell['title3']; } ?></title>
+ <title>
+ <? if ( $shell['title'] ) { print $shell['title']; } else { ?>
+ Ben Alman &raquo; <?= $shell['title1'] ?><? if ( $shell['title2'] ) { print ' &raquo; ' . $shell['title2']; } ?><? if ( $shell['title3'] ) { print ' &raquo; ' . $shell['title3']; } ?>
+ <? } ?>
+ </title>
<script type="text/javascript" src="<?= $base ?>../shared/ba-debug.js"></script>
<?
if ( $shell['jquery'] ) {
Please sign in to comment.
Something went wrong with that request. Please try again.