Closed
Description
I tried to test the code for the http://learn.jquery.com/events/introduction-to-custom-events/ page but I get the error message in the console "Uncaught SyntaxError: Unexpected identifier" at line 124 below ($( "#twitter" ).on( "getResults", function( e, term ) {).
Did I do something wrong or is the code wrong?
<html>
<head>
<meta charset="utf-8">
<title>Testing jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
.on { background-color: yellow; }
.off { background-color: black; color: grey; }
</style>
<script>
$( document ).ready(function(){
$( "form" ).submit(function( event ) {
var term = $( "#search_term" ).val();
$( "#twitter" ).trigger( "getResults", [ term ] );
event.preventDefault();
});
$.fn.twitterResult = function( settings ) {
return this.each(function() {
var results = $( this );
var actions = $.fn.twitterResult.actions =
$.fn.twitterResult.actions || $.fn.twitterResult.createActions();
var a = actions.clone().prependTo( results );
var term = settings.term;
results.find( "span.search_term" ).text( term );
$.each([ "refresh", "populate", "remove", "collapse", "expand" ], function( i, ev ) {
results.on( ev, {
term: term
}, $.fn.twitterResult.events[ ev ] );
});
// use the class of each action to figure out
// which event it will trigger on the results panel
a.find( "li" ).click(function() {
// pass the li that was clicked to the function
// so it can be manipulated if needed
results.trigger( $( this ).attr( "class" ), [ $( this ) ] );
});
});
};
$.fn.twitterResult.createActions = function() {
return $( "<ul class='actions' />" ).append(
"<li class='refresh'>Refresh</li>" +
"<li class='remove'>Remove</li>" +
"<li class='collapse'>Collapse</li>"
);
};
$.fn.twitterResult.events = {
refresh: function( e ) {
// indicate that the results are refreshing
var elem = $( this ).addClass( "refreshing" );
elem.find( "p.tweet" ).remove();
results.append( "<p class='loading'>Loading...</p>" );
// get the twitter data using jsonp
$.getJSON( "http://search.twitter.com/search.json?q=" + escape( e.data.term ) + "&rpp=5&callback=?", function( json ) {
elem.trigger( "populate", [ json ] );
});
},
populate: function( e, json ) {
var results = json.results;
var elem = $( this );
elem.find( "p.loading" ).remove();
$.each( results, function( i, result ) {
var tweet = "<p class='tweet'>" +
"<a href='http://twitter.com/" +
result.from_user +
"'>" +
result.from_user +
"</a>: " +
result.text +
" <span class='date'>" +
result.created_at +
"</span>" +
"</p>";
elem.append( tweet );
});
// indicate that the results are done refreshing
elem.removeClass("refreshing");
},
remove: function( e, force ) {
if ( !force && !confirm( "Remove panel for term " + e.data.term + "?" ) ) {
return;
}
$( this ).remove();
// indicate that we no longer have a panel for the term
search_terms[ e.data.term ] = 0;
},
collapse: function( e ) {
$( this ).find( "li.collapse" )
.removeClass( "collapse" )
.addClass( "expand" )
.text( "Expand" );
$( this ).addClass( "collapsed" );
},
expand: function( e ) {
$( this ).find( "li.expand" )
.removeClass( "expand" )
.addClass( "collapse" )
.text( "Collapse" );
$( this ).removeClass( "collapsed" );
}
$( "#twitter" ).on( "getResults", function( e, term ) {
// make sure we don't have a box for this term already
if ( !search_terms[ term ] ) {
var elem = $( this );
var template = elem.find( "div.template" );
// make a copy of the template div
// and insert it as the first results box
results = template.clone()
.removeClass( "template" )
.insertBefore( elem.find( "div:first" ) )
.twitterResult({
"term": term
});
// load the content using the "refresh"
// custom event that we bound to the results container
results.trigger( "refresh" );
search_terms[ term ] = 1;
}
}).on( "getTrends", function( e ) {
var elem = $( this );
$.getJSON( "http://search.twitter.com/trends.json?callback=?", function( json ) {
var trends = json.trends;
$.each( trends, function( i, trend ) {
elem.trigger( "getResults", [ trend.name ] );
});
});
});
$( "#get_trends" ).click(function() {
$( "#twitter" ).trigger( "getTrends" );
});
$.each([ "refresh", "expand", "collapse" ], function( i, ev ) {
$( "#" + ev ).click( function( e ) {
$( "#twitter div.results" ).trigger( ev );
});
});
$( "#remove" ).click(function( e ) {
if ( confirm( "Remove all results?" ) ) {
$( "#twitter div.results" ).trigger( "remove", [ true ] );
}
});
};
});
</script>
</head>
<body>
<h1>Twitter Search</h1>
<input type="button" id="get_trends" value="Load Trending Terms" />
<form>
<input type="text" class="input_text" id="search_term" />
<input type="submit" class="input_submit" value="Add Search Term" />
</form>
<div id="twitter">
<div class="template results">
<h2>Search Results for
<span class="search_term"></span></h2>
</div>
</div>
</html>Metadata
Metadata
Assignees
Labels
No labels