Skip to content

Delegate submit events until amp-form is loaded #6929

Merged
mkhatib merged 8 commits intoampproject:masterfrom
mkhatib:amp-form-debug
Jan 13, 2017
Merged

Delegate submit events until amp-form is loaded #6929
mkhatib merged 8 commits intoampproject:masterfrom
mkhatib:amp-form-debug

Conversation

@mkhatib
Copy link
Copy Markdown
Contributor

@mkhatib mkhatib commented Jan 6, 2017

Fixes #6928
Fixes #6916

This also fixes non-xhr submit throguh the on=action:form.submit syntax.

});

/**
* Append ?sleep=5 to any included JS file in examples to emulate delay in loading that
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super awesome!!!!!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

// the actual submission. For non-XHR GET we let the submission go through
// to allow _blank target to work.
if (actionXhr) {
actionServiceForDoc(form).execute(form, 'submit', null, form, e);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this should be the last line in this block

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

this.urlReplacement_.expandInputValueSync(varSubsFields[i]);
}

// If this wasn't a submission event, trigger form submit.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really understand this. Could you explain? Can we split this into two methods?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this confusion comes from reusing this method once for actual submit event handling and the other for doing an actual submission flow (triggered by on=form.submit for example).

I couldn't figure out how to refactor the function to reuse the functionality in either cases, but I can think a bit more about it and see if I can simplify it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I split this method to multiple ones for clarity and handling a submission event is now separate from handling a submission action. PTAL 👀

// the actual submission. For non-XHR GET we let the submission go through
// to allow _blank target to work.
if (actionXhr) {
actionServiceForDoc(form).execute(form, 'submit', null, form, e);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annotate null

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@mkhatib
Copy link
Copy Markdown
Contributor Author

mkhatib commented Jan 11, 2017

@dvoytenko PTAL 👀

installEventHandlers_() {
this.form_.addEventListener('submit', e => this.handleSubmit_(e), true);
this.form_.addEventListener(
'submit', e => this.handleSubmitEvent_(e), true);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.handleSubmitEvent_.bind(this)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

* invalid. stopImmediatePropagation allows us to make sure we don't trigger it.
*
*
* @param {?Event=} opt_event
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!Event

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

event.preventDefault();
return;
}
if (this.xhrAction_ || this.method_ == 'POST') {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please document why preventDefault is not needed in other situations.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@dvoytenko
Copy link
Copy Markdown
Contributor

@mkhatib Looks good. Just a couple of minor requests.

@mkhatib
Copy link
Copy Markdown
Contributor Author

mkhatib commented Jan 12, 2017

PTAL 👀

@mkhatib mkhatib merged commit 8b12f9e into ampproject:master Jan 13, 2017
@mkhatib mkhatib deleted the amp-form-debug branch January 13, 2017 22:33
rpominov pushed a commit to yandex-pcode/amphtml that referenced this pull request Jan 20, 2017
* master: (310 commits)
  Update csa.md to remove non-required parameters (ampproject#6902)
  Add notes about requesting ads ATF and link to demo (ampproject#7037)
  Remove whitelist for lightbox scrollable validator (ampproject#7034)
  Delegate submit events until amp-form is loaded  (ampproject#6929)
  Moves closure sha384 into a new extension amp-crypto-polyfill for lazy load (ampproject#7006)
  Refactor observables in viewer-impl into a map object (ampproject#7004)
  resizing of margins (ampproject#6824)
  Use URL replacer from embed for pixel (ampproject#7029)
  adds support for Gemius analytics (ampproject#6558)
  Avoid duplicating server-layout (ampproject#7021)
  Laterpay validator config (ampproject#6974)
  Validator rollup (ampproject#7023)
  skeleton for amp-tabs (ampproject#7003)
  Upgrade post-css and related packages to latest (ampproject#7020)
  handle unload (ampproject#7001)
  viewer-integr.js -> amp-viewer-integration (ampproject#6989)
  dev().info()->dev().fine() (ampproject#7017)
  Turned on experiment flag (ampproject#6774)
  Unlaunch ios-embed-wrapper for iOS8 to avoid scroll freezing issues (ampproject#7018)
  Add some A4A ad request parameters (ampproject#6643)
  ...
jridgewell pushed a commit to jridgewell/amphtml that referenced this pull request Jan 31, 2017
mrjoro pushed a commit to mrjoro/amphtml that referenced this pull request Apr 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

XHR submission should be delayed until amp-form is loaded amp-form on=form.submit won't work for GET non-XHR requests

4 participants