Skip to content

page reloads when route changed from form submission #1238

Closed
IgorMinar opened this Issue Aug 8, 2012 · 4 comments

2 participants

@IgorMinar
Angular member

Scenario:

  • app with routes
  • one route represents a view with a form
  • the form has a submit event handler (ng-click on submit button) that triggers $location change which causes $route change
  • when form is submitted, a full page reload occurs and the "preventDefault" request from the form directive is not honored.
@IgorMinar
Angular member

it turns out that since the form directive uses jqLite/jQuery to register the submit event listener, this listener is removed when route change occurs and the dom (including the form) is destroyed before the event propagates to the form element.

once the event propagates to the form element, the submit listener is gone and the default is not prevented.

@IgorMinar
Angular member

Vojta mentioned that a directive is affected by the same issue, so we should add a test and fix for that one too.

@IgorMinar IgorMinar added a commit that closed this issue Aug 10, 2012
@IgorMinar IgorMinar fix(form): prevent page reload when form destroyed
this fix ensures that we prevent the default action on form submission
(full page reload) even in cases when the form is being destroyed as
a result of the submit event handler (e.g. when route change is
triggered).

The fix is more complicated than I'd like it to be mainly because
we need to ensure that we don't create circular references between
js closures and dom elements via DOM event handlers that would then
result in a memory leak.

Also the differences between IE8, IE9 and normal browsers make testing
this ugly.

Closes #1238
054d40f
@IgorMinar IgorMinar closed this in 054d40f Aug 10, 2012
@IgorMinar IgorMinar added a commit that referenced this issue Aug 10, 2012
@IgorMinar IgorMinar fix(form): prevent page reload when form destroyed
this fix ensures that we prevent the default action on form submission
(full page reload) even in cases when the form is being destroyed as
a result of the submit event handler (e.g. when route change is
triggered).

The fix is more complicated than I'd like it to be mainly because
we need to ensure that we don't create circular references between
js closures and dom elements via DOM event handlers that would then
result in a memory leak.

Also the differences between IE8, IE9 and normal browsers make testing
this ugly.

Closes #1238
663ccc5
@vlad
vlad commented Aug 11, 2012

Just in time! The page running my code based on the Project example with angular 1.0.1 would refresh about 1 in 3 times that the user was redirected via $location.path() even though there is no action attribute set on the form. I was able to do $("button").on("click", function() { return false; }) to prevent a page refresh (after failing to trap form submit). After building angular from HEAD, this work-around is no longer needed. Thanks for the great work!

@IgorMinar
Angular member

@vlad I'm glad that this fixes your issue

@jesselpalmer jesselpalmer pushed a commit that referenced this issue Sep 24, 2014
@IgorMinar IgorMinar fix(form): prevent page reload when form destroyed
this fix ensures that we prevent the default action on form submission
(full page reload) even in cases when the form is being destroyed as
a result of the submit event handler (e.g. when route change is
triggered).

The fix is more complicated than I'd like it to be mainly because
we need to ensure that we don't create circular references between
js closures and dom elements via DOM event handlers that would then
result in a memory leak.

Also the differences between IE8, IE9 and normal browsers make testing
this ugly.

Closes #1238
14e802d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.