Backbonejs app automatically loads page `?state=#users` when navigating to `#users`

Question

In my backbonejs application, the app automatically reloads the page to example.com/?stat=#users when I navigate to router.navigate('users') ?

When I hit the back button it loads the url example.com/#users so it is accessing the desired page correctly then loading example.com/?stat=#users .

What is the issues I am running into, I've tried changing the trigger options but I am unable to fix it? And I am unable to find more information on what the ?state=#... is (I can make assumptions but concise documentation would be very helpful)?

A stripped down routes file:

class window.AppRouter extends Backbone.Router
  routes:
    "": "list"
    "users": "list"
    "user/:id": "userDetails"

  list: -> 
    @before()

  before: (callback) ->
    if @users?
      callback() if callback?
    else
      @users = new Users
      @users.fetch(
        success: ->
          $('#sidebar').html(new UsersView({model: app.users}).render().el)
          callback() if callback)

  userDetails: (id) -> 
    @before ->
      user = app.users.get( id)
      if user?
        console.log('inside if')
        app.showView( '#content', new UserView( {model: user}))

  showView: (selector, view) ->
    @currentView.close() if @currentView?
    $(selector).html(view.render().el)
    @currentView = view
    return view

My stripped down view file:

class window.UsersView extends Backbone.View
  tagName:'ul'
  className: 'nav nav-pills nav-stacked'
  initialize: ->
    @userViews = new Array
    @model.bind("reset", @render, this)
    @model.bind("add", (user) =>
      @$el.append( new UserInListView({model: user}).render().el))

  render: (event) ->
    _.each(
      @model.models
      (user) =>
        userView = new UserInListView( {model: user})
        @userViews.push( userView)
        @$el.append( userView.render().el)
      this)
    return this


class window.UserInListView extends Backbone.View
  tagName:"li"

  initialize: ->
    @template = _.template(tpl.get('user_in_list'))
    @model.bind("change", @render, this)
    @model.bind("destroy", @close, this)

  render: (event) ->
    @$el.html( @template( @model.toJSON()))
    return this

  events:
    "click a": "select"

  select: ->
    $("#sidebar>ul>li.active").removeClass("active")
    @$el.addClass( 'active')
    app.navigate("user/#{@model.id}", true)

class window.UserView extends Backbone.View
  initialize: ->
    templateName = 'user_edit'
    @template = _.template(tpl.get(templateName))
    @model.bind("change", @render, this)

  events:
    "click .cancel": "cancel"

  cancel: ->
    @remove()
    app.navigate('users', false)

I'm just not sure what is causing this, is it a binding? Is it twitter-bootstrap? Is it the way I set up my router? How come when I access the url directly I don't run into issues but when my router navigates me there I do?

Answer 1

The issue has to with including a name attribute on an <input> or <select> tag [and I'm sure others], by including the attribute in the tag the attribute is included in get requests so when navigate is called it accesses the desired page but then performs the GET request with what ever the name parameter may be.

In my case, I left a name='state' in a selector (which I realized after accessing a user which actually had their state ie the state they live in set and the url was example.com/?state=IL#users and this "state" was not pertinent to the state of the backbone page being accessed).