Skip to content

Instantly share code, notes, and snippets.

@gus gus/1_preamble.md
Created Jul 28, 2010

Embed
What would you like to do?
Hellooooo, Ben

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!

<!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>
$(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

This comment has been minimized.

Copy link

benguthrie commented Jul 28, 2010

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
You can’t perform that action at this time.