Uncaught SyntaxError: Unexpected identifier #537

githubshrek · 2014-07-22T12:19:07Z

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>

scottgonzalez · 2014-07-22T12:39:28Z

You're missing the closing brace before that line.

githubshrek · 2014-07-23T11:55:59Z

Great, thanks for your help!

githubshrek changed the title ~~Uncaugt SyntaxError: Unexpected identifier~~ Uncaught SyntaxError: Unexpected identifier Jul 22, 2014

scottgonzalez closed this as completed Jul 22, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught SyntaxError: Unexpected identifier #537

Uncaught SyntaxError: Unexpected identifier #537

githubshrek commented Jul 22, 2014

scottgonzalez commented Jul 22, 2014

githubshrek commented Jul 23, 2014

Uncaught SyntaxError: Unexpected identifier #537

Uncaught SyntaxError: Unexpected identifier #537

Comments

githubshrek commented Jul 22, 2014

scottgonzalez commented Jul 22, 2014

githubshrek commented Jul 23, 2014