CODEWITHSUNDEEP
ruby-on-railsbackbone.js
Leahcim
Leahcim

Reputation: 42009

extra users url when trying to combine backbone and rails

I have a rails app that uses backbone on the homepage. It has a search field in the navbar. If a user searches a name, a dropdown bar opens showing all the users with a specific letter in the name, at which point the user can click a link to any of the profiles. The Backbone collection 'Users" builds on the url like this, with 'key' representing the letter(s) entered in the search box.

var url = "users/search/" + key;

However, the app only uses backbone in a limited way. For example, after the user clicks on a link, there is a page change and they are taken to localhost:3000/users/28. I want the search bar to be available on a user's profile page, however, if I search a name from a profile page, the url (in the console logs) now becomes. 

/users/users/search/" + key;

In other words, searching from a user's profile page adds an extra "users" into the search query (and a 404 not found error), even though the url for the ajax request the Users collection is like this 

var url =  "users/search/" + key;

Out of curiosity, I added a route to the routes.rb to try to deal with the '/users/users' situation

 match '/users/search/:query' => 'users#getUsersByName', defaults: {format: :json}
  match '/users/users/search/:query' => 'users#getUsersByName', defaults: {format: :json}

However, even though this eliminates the 404 error, and returns search results, if I click the link, to visit another user's profile (from a user's profile page), Rails is taking me to /users/users/28, because the link in the template is being tacked onto the base users url.

Can anyone recommend how I might go about dealing with this problem?

link in the template

<a href='users/{{= id }}'>

Users collection

window.Users = Backbone.Collection.extend({

  model: User,
    url:"users",
    findByName:function (key) {

        var url =  "users/search/" + key;
        console.log('findByName: ' + key);
        var self = this;
        $.ajax({
            url:url,
            dataType:"json"
            success:function (data) {

Upvotes: 0

Views: 96

Answers (1)

Leahcim
Leahcim

Reputation: 42009

It needs to have a forward slash before users. So instead of this

var url =  "users/search/" + key;

Do

var url =  "/users/search/" + key;

Upvotes: 0

Related Questions