Skip to content

Instantly share code, notes, and snippets.

@gus

gus/1_preamble.md

Created July 28, 2010 02:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gus/493183 to your computer and use it in GitHub Desktop.
Save gus/493183 to your computer and use it in GitHub Desktop.
Download ZIP
Hellooooo, Ben
Raw
1_preamble.md

This is example is taken from a live app I'm playing around with. It's been retrofitted and trimmed for example usage for one Mr. Ben Guthrie! Custom gists by demand. Get em' while they're hot!

Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Whoops!</title>
<style>
.hide { display: none; }
</style>
</head>
<body>
<!-- Text area for new issues -->
<textarea id='input_description'></textarea>
<a class='button' href='#post-issue'>Post</a>
<!-- This is the template that will be loaded each time -->
<div class='hide' id='issue_template'>
<div class='issue' data-resolved='{{resolved}}' id='{{id}}'>
<div class='description'>{{description}}</div>
<div class='date lightgray'>{{created}}</div>
</div>
</div>
<!-- This is where issues end up -->
<div id='issues'>
<div class='issue' data-resolved='false' id='4c499068c67cb2bf79000001'>
<div class='description'>Something happened?! @jaknowlden</div>
<div class='date lightgray'>2010-07-23 12:51:52 UTC</div>
</div>
<div class='issue' data-resolved='false' id='4c499988c67cb2c28b000004'>
<div class='description'>OMG ... it's all falling apart! @jaknowlden</div>
<div class='date lightgray'>2010-07-23 13:30:48 UTC</div>
</div>
</div>
<script src='/javascripts/jquery-1.4.2.min.js'></script>
<script src='/javascripts/mustache.js'></script>
<script src='/javascripts/whoops.js'></script>
</body>
</html>
Raw
whoops.js
$(document).ready(function() {
$("a[href=#post-issue]").click(function() {
var issue = $("#input_description").val(), label = $("#input_description").data("label");
if (issue == label) { return false; }
$.ajax({
url: "/issues/create?callback=?", type: "GET", data: {"issue":issue}, dataType: "json",
success: function(response) {
console.log(response);
if (response.status == 200) {
var data = response.data;
data.id = data["_id"]["$oid"]; // Assuming the use of mongo here
// The all important mustache bits are area
// Muuuusttaaacccchhhe: http://www.youtube.com/watch?v=80DAkfxLGwQ (SFW)
// The format of data will be something like:
// {"description":"Mommy :|", "created":"mm/dd/yyyy hh:mm:ss UTC", "resolved":false, "id":"..."}
var issueHtml = Mustache.to_html($("#issue_template").html().trim(), data);
$("#issues").prepend(issueHtml);
$("#input_description").val(label);
} else {
alert(response.message);
}
}
});
return false;
});
});
@benguthrie
Copy link

Getting the same error in Chrome: "Uncaught SyntaxError: Unexpected token"

http://dev.plitto.com/sandbox/mustache_jaknowlden/

And a more explicit description of the issue here: http://stackoverflow.com/questions/3349341/mustache-js-accepts-inputs-as-vars-but-not-as-ajax-gets-how-to-import-or-trou

The missing element from this example is the callback, which I hard-coded to callbacks.php and filled with just this (trying to get the response objects correct):
{"response":"party!","issue":"something","description":"Mommy :|", "created":"mm/dd/yyyy hh:mm:ss UTC", "resolved":false, "id":"..."}

The Tick mustache video was a nice touch. "A man of action, tempered with maturity, like a fireman... or someone's dad."

So yeah, I understand what it intended to happen, but can't get it to work. Thank you very much for this help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment