Skip to content

Instantly share code, notes, and snippets.

@ynonp

ynonp/ajax1.html

Created November 29, 2012 08:32
Show Gist options
  • Save ynonp/4167578 to your computer and use it in GitHub Desktop.
Save ynonp/4167578 to your computer and use it in GitHub Desktop.
Download ZIP
ajax1 - before templates
Raw
ajax1.html
<!DOCTYPE html>
<html>
<head>
<title>MagicIdea</title>
<meta name="viewport" content="width=device-width" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role=page id="home" >
<div data-role=header>
<h1>MagicIdea</h1>
</div>
<div data-role=content>
<ul data-role=listview>
<li><a href="#app1" data-transition=slide>Zombie Slayer</a></li>
<li><a href="#app2" data-transition=slide>Mad Zombie</a></li>
<li><a href="#app3" data-transition=slide>Vampire Slayer Ultimate</a></li>
</ul>
</div>
</div>
<div data-role=page id="app1" data-add-back-btn="true">
<div data-role=header>
<h1>Zombie Slayer</h1>
</div>
<div data-role=content>
Kill zombies and eat their brainz
<button data-role="button">Like</button>
</div>
</div>
<div data-role=page id="app2" data-add-back-btn="true">
<div data-role=header>
<h1>Mad Zombie</h1>
</div>
<div data-role=content>
Kill humans and eat their brainz
<button data-role="button">Like</button>
</div>
</div>
<div data-role=page id="app3" data-add-back-btn="true">
<div data-role=header>
<h1>Vampire Slayer Ultimate</h1>
</div>
<div data-role=content>
Take over the world
<button data-role="button">Like</button>
</div>
</div>
</body>
</html>
Raw
ajax2.html
<!DOCTYPE html>
<html>
<head>
<!--
Using templates, we can write less pages and re-use the same HTML code
for all internal pages
-->
<title>MagicIdea</title>
<meta name="viewport" content="width=device-width" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role=page id="home" >
<div data-role=header>
<h1>MagicIdea</h1>
</div>
<div data-role=content>
<ul data-role=listview>
<li><a href="#slayer" data-transition=slide data-index=0>Zombie Slayer</a></li>
<li><a href="#mad" data-transition=slide data-index=1>Mad Zombie</a></li>
<li><a href="#vampire" data-transition=slide data-index=2>Vampire Slayer Ultimate</a></li>
</ul>
</div>
</div>
<script type="text/template" id="tmpl-app">
<div data-role=page id="{{id}}" data-add-back-btn="true">
<div data-role=header>
<h1>{{title}}</h1>
</div>
<div data-role=content>
{{text}}
<button data-role="button">Like</button>
</div>
</div>
</script>
<script>
var template_html = $('#tmpl-app').html();
var data = {
ideas: [
{ id: 'slayer', title: 'Zombie Slayer', text: 'Kill zombies and eat their brainz'},
{ id: 'mad', title: 'Mad Zombie', text: 'Kill humans and eat their brainz'},
{ id: 'vampire', title: 'Vampire Slayer Ultimate', text: 'Take over the world'}
]
};
function create_page( index ) {
$('#app').remove();
var template = Handlebars.compile(template_html);
var result = template( data.ideas[index] );
var newpage = $('body').append( result );
newpage.trigger('create');
}
$('#home a').click(function(e) {
var idx = $(this).attr('data-index');
create_page(idx);
});
</script>
</body>
</html>
Raw
ajax3.html
<!DOCTYPE html>
<html>
<head>
<!--
Using templates, we can write less pages and re-use the same HTML code
for all internal pages
-->
<title>MagicIdea</title>
<meta name="viewport" content="width=device-width" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role=page id="home" >
<div data-role=header>
<h1>MagicIdea</h1>
</div>
<div data-role=content>
<ul data-role=listview>
<li><a href="#slayer" data-transition=slide data-index=0>Zombie Slayer</a></li>
<li><a href="#mad" data-transition=slide data-index=1>Mad Zombie</a></li>
<li><a href="#vampire" data-transition=slide data-index=2>Vampire Slayer Ultimate</a></li>
</ul>
</div>
</div>
<script type="text/template" id="tmpl-app">
<div data-role=page id="{{id}}" data-add-back-btn="true">
<div data-role=header>
<h1>{{title}}</h1>
</div>
<div data-role=content>
{{text}}
<button data-role="button">Like</button>
</div>
</div>
</script>
<script>
var template_html = $('#tmpl-app').html();
function create_page( index ) {
$('#app').remove();
$.mobile.loading('show');
$.get('/data/' + index, function(data) {
var template = Handlebars.compile(template_html);
var result = template( data );
var newpage = $('body').append( result );
newpage.trigger('create');
$.mobile.loading('hide');
$.mobile.changePage( '#' + data.id );
});
}
$('#home a').click(function(e) {
var idx = $(this).attr('data-index');
create_page(idx);
e.preventDefault();
});
</script>
</body>
</html>
Raw
server.pl
# Automatically enables "strict", "warnings" and Perl 5.10 features
use Dancer;
set public => '.';
my $data = {
ideas => [
{ id => 'slayer', title => 'Zombie Slayer', text => 'Kill zombies and eat their brainz'},
{ id => 'mad', title => 'Mad Zombie', text => 'Kill humans and eat their brainz'},
{ id => 'vampire', title => 'Vampire Slayer Ultimate', text => 'Take over the world'},
]
};
# Route with placeholder
get '/' => sub {
send_file './index.html';
};
get '/data/:idx' => sub {
content_type 'application/json';
my $idx = param 'idx';
return to_json($data->{ideas}->[$idx]);
};
dance;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment