Ember adds unwanted "?" to end of URL, causing unwanted browser page refresh

1

Ember is adding a ? to the URL on transition that causes a complete, unwanted page refresh when transitioning to a parent route. I have a route structure like so.

App.Router.map(function() {
  this.resource('settings', function() {
    this.route('profile');
  });
});

App.SettingsRoute = RestrictedRoute.extend(AccountFinder, {
  controllerName: 'account',
  renderAccountTemplate: function(controller, model) {
    this.render('settings', {controller: controller});
  },
});

App.SettingsProfileRoute = Ember.Route.extend({
  actions: {
    willTransition: function() {
      var account = this.modelFor('settings'), confirmed;

      if (account.get('customIsDirty')) {
        confirmed = confirm("You have blah changes. Do you want to continue?");
        if (!confirmed) {
          transition.abort();
        } else {
          account.customRevert();
        }
      }
    }
  }

  cancelEditing: function() {
    var model = this.modelFor('settings');
    account.revert();
    this.transitionTo('settings', account);
  },
});

This is a non-Ember Data model setup. When my modelā€™s customIsDirty property is false (meaning no confirm stuff happens and basically willTransiition is ignored), ember transitions back to the settings route and adds a ? to the URL, causing the page to immediately reload.

When my modelā€™s customIsDirty property returns true, causing the native confirm functionality, accepting the confirm dialog (which obviously allows the transition to occur because there is no abort call) transitions to the settings route and does not add the ? to the URL or cause a page refresh.

What the MF is going on here? This shouldnā€™t have anything to do with my custom model setup, as I am doing nothing in the willTransition method that messes with the transition, nor am I transitioning to a route with any type of additional query-params-new (or whatever the feature is) stuff. Itā€™s a simple call to cancelEditing in both cases.

I also never, in the entire app, mess with window.location. Also, this happens with every version from 1.1.0 on. (1.0.0 is apparently not compatible with my app).

If it matters, I am using ember-ohm as my model layer.

2

This is totally coming oof the top of my head, but I had something kinda, sorta, somewhat similar happen when my template used a <form> element and a form submit was triggered.

Since no javascript handled the submit (notice no {{action 'save' on="submit"}} in the <form> element), the browser attempted to do a GET against the current URL which winds up adding the ? to the URL.

Hopefully this helps you,

James

3

This totally sounds like something that could be triggering it. Iā€™ll let you know if thatā€™s the culprit.

4

Oh, this is great stuff. Simple and easy oversight since I donā€™t recall seeing this in the guides. Would make a great addition if any of the docs people are watching. :wink:

5

@hasaki, thanks a ton for your suggestion. The problem was totally related to buttons/actions nested in a <form> tag, but with an added twist. The <button> elements were missing a type attribute, and all buttons nested in form end up with type=submit as the default, so all my buttons were submitting the form.

Problem:

<form>
  <button {{action 'cancelForm'}}>Cancel</button>
  <button {{action 'saveForm'}}>Save</button>
</form>

Solution:

<form>
  <button type="button" {{action 'cancelForm'}}>Cancel</button>
  <button type="button" {{action 'saveForm'}}>Save</button>
</form>

Thanks again for pointing me in the right direction. This was driving me crazy.

1 Like