sample_issue.md

CONTEXT

@harimohanraj89 @DrRobotmck @williamfshaw @bigtone1284

WHAT USER STORY YOU ARE WORKING ON:

I am working on the user story "As a user, I want to search for a restaurant and see my search results, so I can pick my favorite."

I am working on the search-api branch of our repository.

WHAT YOU ARE TRYING TO DO:

I am trying to get the search form to fetch information from my server and render it for the user

DETAILED DESCRIPTION OF THE BUG/ERROR:

The search form is managed by a Backbone view, namely the searchFormView. I am attempting to add a click event listener to the search button which should grab the text from the input box and send a request to my server containing this search information. When I enter information and click the button, I get the following error.

Uncaught Type Error: undefined is not a function                        backbone.js:314

I expanded this error to take a look at where it came from, but the subsequent errors were all from backbone.js as well.

The files involved in my search form are my Search Form View, and my Search Results Collection. Below is the code for each.

App.Views.SearchFormView = Backbone.View.extend({
  
  el: '#form',
  
  initialize: function() {
    console.log('Search Form View has been created!');
  },
  
  events: {
    'click .search-button': 'serachAPI'
  },
  
  searchAPI: function() {
    var searchTerm = $('#search-value').val();
    this.collection.search(searchTerm);
  }
  
});

App.Collections.SearchResultsCollection = Backbone.Collection.extend({
  
  model: App.SearchResult,
  
  search: function(searchTerm) {
    $.ajax({
      url: '/search',
      method: 'GET',
      data: { search: searchTerm }
    }).done(function(results) {
      
      var models = results.map(function(result) {
        return new App.Models.SearchResult(result);
      });
      
      this.reset(models);
    })
  }
  
});

I create instances of the view and collection in app.js like so.

$(function() {
  App.searchResults = new App.Collections.SearchResultsCollection
  App.searchFormView = new App.SearchFormView({ collection: App.searchResults });
});

WHAT I'VE TRIED

I doublechecked that my server is working correctly by manually entering a URL to hit my server's search route in my URL bar, and confirmed that my server is ok. The URL I tested with is localhost:3000/search?search=potatoes.

I also manually called App.searchResultsCollection.search('potatoes') in my console to test my collection alone. This also worked, as App.searchResultsCollection.models gave me an array of search results.

I inserted a debugger in my searchFormView's searchAPI function to attempt to take a look at whether the search term was being grabbed correctly, but my debugger was never being triggered.

QUESTION

If my server and my collection are ok, then I believe the problem may be with my view, but I am unable to find it. Why is my click event listener not being attached to the search button correctly?

❤️ A meticulous and troubled student