Menu
Im trying to make a search box to filter down results of my returned collection in the client.
however when i actually try searching I'm getting the above error in the console.
RangeError: Maximum call stack size exceeded.
here is a look at my code.
<body>
{{#isolate}}
<header class="row-fluid">
{{> modules}}
</header>
{{/isolate}}
<div id="main" class="span11">
{{#if currentUser}}
{{#isolate}}
{{> customers_list}}
{{/isolate}}
{{#isolate}}
{{> contacts_list}}
{{/isolate}}
{{/if}}
</div>
</body>
my search form in inside the modules template
<template name="modules">
{{templateLogger "modules"}}
<ul id="module_list" class="nav">
{{#each list}}
<li>
<a href="#" id="module_{{_id}}" module_id="{{_id}}" class="module">{{name}}</a>
</li>
{{/each}}
<form><input type="text" id="search"></form>
</ul>
and my customers_list template that I'm trying to filter the results
<template name="customers_list">
<table class="table">
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Phone</th>
</tr>
{{#each record}}
<tr>
<td>{{name}}</td>
<td>{{address}}</td>
<td>{{city}}</td>
<td>{{state}}</td>
<td>{{zip}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
</table>
</template>
and here is the event handler for the search form
Template.modules.events({
'keypress input#search': function (event) {
Session.set("currentFilter", $('input#search'));
}
});
and the form helper do display the results
Template.customers_list.record = function() {
qry = Session.get("currentFilter") || "";
if (qry != "") {
return Customers.find({$or: [ {'name': qry}, {'address': qry}, {'city': qry}, {'state': qry} ] });
} else {
return Customers.find({competitor: null}, {sort: {name: 1}});
};
}
I have no clue what the is causing this error from what i was able to read on other SO posts about the error it seems like its a infinite loop however those were not meteor specific questions and i don't know if that would make a difference? also if there is an infinite loop i cant find it.
any help would be grateful.
719
This error occurs when you pass large object as an argument to your method. For me for example the first Time I encountered this error, was when I passed a Meteor.Collection as an argument :s . I worked around that by passing the collection name as a String and then using eval() in the Methods to get the Collection on which proceed.
Conclusion: Always use strings, integers, small arrays or really small objects as arguments for methods called from your event handlers.
198
Changing this:
Template.modules.events({
'keypress input#search': function (event) {
Session.set("currentFilter", $('input#search'));
}
});
To This:
Template.modules.events({
'keyup input#search': function (event) {
Session.set("currentFilter", $('input#search').val());
}
});
I believe you just need the .val() on the jquery dom reference of the input field. Additionally I would recommend using keyup for the event for something like this.
For getting the results out like you want you likely want to use a regular expression. Here's what I'm using in my app.
Template.hudlies.found = function() {
var searchVal = Session.get("searchFilter");
if (searchVal != "") {
var searchResults = Hudlies.find({ name: { $regex: '^.*' + searchVal + '.*', $options: 'i' } });
};
return searchResults;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
