Error invoking Method 'filterMulitpleTags': Internal server error [500]

Question

I dont understand why i am getting this Internal server error 500. Also because of the items aren't being hidden as i want them to. The console output is saying that the '$' isnt defined which isnt right i dont believe since i am link jquery.

HTML:

<template name="room">
    <div class="container-fluid">
        <h1> Sprint Retrospective</h1>
        <form id="tagSearchForm" class="navbar-form navbar-right" role="search">
          <div class="form-group">
                <span><i class="fa fa-filter"></i></span>
            <input id="filters" type="text" class="form-control" placeholder="Filter tags...">
          </div>
          <button id="filterTagsButton" type="button" class="btn btn-default">Filter</button>
        </form>
        {{> card}}
        <hr>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6 col-sm-6">
                    <h2> Good category </h2>
                    <ul class="fa-ul">
                        {{#each goodCards}}
                            <div class="row">
                                <div id="card" class="card-panel green">
                                    <span class="white-text">
                                        {{text}}
                                    </span>
                                    <div class="card-action">
                                        <div class="chip">
                                            <i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
                                            Remove Card
                                        </div>
                                        {{#each tags}}
                                            <div class="chip">
                                                <tag class="tag" id="{{this}}">{{this}}</tag>
                                                <i id="removeTag" class="material-icons fa fa-ban"></i>
                                            </div>
                                        {{/each}}
                                    </div>
                                </div>
                            </div>
                        {{/each}}
                    </ul>
                </div>
                <div class="col-xs-6 col-sm-6">
                    <h2> Bad category </h2>
                    <ul class="fa-ul">
                            {{#each badCards}}
                                <div class="row">
                                    <div id="card" class="card-panel red  accent-4">
                                        <span class="grey-text">
                                            {{text}}
                                        </span>
                                        <div class="card-action">
                                            <div class="chip">
                                                <i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
                                                Remove Card
                                            </div>
                                            {{#each tags}}
                                                <div class="chip">
                                                    <tag class="tag" id="{{this}}">{{this}}</tag>
                                                    <i id="removeTag" class="material-icons fa fa-ban"></i>
                                                </div>
                                            {{/each}}
                                        </div>
                                    </div>
                                </div>
                            {{/each}}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

js:

Meteor.methods({
    filterSingleTag:  function(tag){
        var numCards;

        numCards = $(".card-panel").length;
        for(var i = 0; i < numCards;i++){
            var compTags;
            var found;

            found = false;
            compTags = $(".card-panel").eq(i).find(".tag");
            for(var j = 0; j < compTags.length; j++){
                var str;

                str = "" + compTags[j].firstChild;
                if(str.toLowerCase() == tag){
                    found = true;
                }
            }
            if(!found)
                $(".card-panel").eq(i).hide();
        }
    },
    filterMulitpleTags: function(tags){
        var numCards;

        numCards = $(".card-panel").length;
        for(var i = 0; i < numCards;i++){
            var compTags;
            var found;

            found = false;
            compTags = $(".card-panel").eq(i).find(".tag");
            for(var j = 0; j < compTags.length; j++){
                var str;

                str = "" + compTags[j].text;
                if(tags.indexOf(str.toLowerCase()) >= 0)
                    found = true;
            }
            if(!found)
                $(".card-panel").eq(i).hide();
        }
    },
    clearFilter: function(){
        var numCards;

        numCards = $(".card-panel").length;
        for(var i = 0; i < numCards;i++){
            $(".card-panel").eq(i).show();
        }
    }
});

console:

Exception while invoking method 'filterSingleTag' ReferenceError: $ is not defined
I20160208-13:36:40.290(-6)?     at [object Object].Meteor.methods.filterSingleTag (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/app/js/room.js:145:20)
I20160208-13:36:40.290(-6)?     at maybeAuditArgumentChecks (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:1785:12)
I20160208-13:36:40.291(-6)?     at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:872:20
I20160208-13:36:40.291(-6)?     at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)?     at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:871:41
I20160208-13:36:40.291(-6)?     at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)?     at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:870:46
I20160208-13:36:40.292(-6)?     at tryCallTwo (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:45:5)
I20160208-13:36:40.292(-6)?     at doResolve (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:171:13)
I20160208-13:36:40.292(-6)?     at new Promise (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:65:3)
I20160208-13:36:40.293(-6)?     at [object Object]._.extend.protocol_handlers.method (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:848:21)
I20160208-13:36:40.293(-6)?     at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:729:85

Answer 1

Meteor methods are defined and executed on the server (also the client, depending on where they're defined). Since the server doesn't have access to jQuery, $ is undefined and it's throwing an error. It looks like you want to just execute some client-side code when something happens. In that case, you're looking for events :

In your client-side js code:

Template.yourTemplateName.events({
    'click #filterTagsButton' (event, template) {
        // Your stuff from your question goes here.
    }
});

I can't tell which one is single versus multiple based on your example, but I think you can get the gist from here. I'd highly recommend reading the Meteor Guide for this kind of thing.