CODEWITHSUNDEEP
meteor
Moshe
Moshe

Reputation: 493

Meteor RangeError: Maximum call stack size exceeded. on keypress event

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.

Upvotes: 8

Views: 9879

Answers (2)

svassr
svassr

Reputation: 5668

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.

Upvotes: 18

user2421382
user2421382

Reputation: 76

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;
};

Upvotes: 6

Related Questions