Amphtml: amp-form not populating template element

[cypherlou]

I have a simple amp-form which passed validation but, when submitted, does not populate the template values in submit-success or submit-error.

The server is currently returning a simple (canned) JSON payload of {"interesting": false, "name": "John Doe"} with a status code of 200. I have also responded with a 403 code and the same JSON payload and the error processing is successfully triggered but no token population takes place.

The payload headers are;
access-control-allow-credentials:true
access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token
access-control-allow-methods:POST, GET, OPTIONS
access-control-allow-origin:https://unlimitedbroadband.org.uk
access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin
amp-access-control-allow-source-origin:https://unlimitedbroadband.org.uk
Content-Length:75
Content-Type:application/json
Date:Thu, 12 Jan 2017 12:42:09 GMT
Server:Apache/2.4.25 (Ubuntu)

I appreciate I don't need all of these but I was attempting to eliminate any obvious issues.

Any feedback appreciated.

[aghassemi]

/to @mkhatib for triage

[mkhatib]

Hey @cypherlou thanks for filing. Do you have that example live on https://unlimitedbroadband.org.uk somewhere? I am guessing this is where you're trying to submit the form, right?

Your example and headers seem to be in good shape (given that you're trying to submit the form that is being served from https://unlimitedbroadband.org.uk)

A link would be great so we can help debug what might be happening.

[cypherlou]

@mkhatib, Hi, thanks for getting back to me so quickly. Yes, the test form on https://unlimitedbroadband.org.uk/ is the one I have been working on. Feel free to play with that and let me know what you think. The backend is in Python (very basic Flask App) so happy to let you have that too if it helps.

[mkhatib]

ha! totally didn't open that link 😌.

So this seems to be working for me (on latest Chrome OSX) and the template is being rendered (see screenshot) - what browser and OS are you seeing the problem in?

[mkhatib]

Wait I feel I missed something. Did you mean that the template actually renders but the variables are not being used from the response correctly? If that's the case could you update that page to use variables (it doesn't seem to have any variables in the templates currently) so I can test it out?

[cypherlou]

@mkhatib, I'm wondering if I've missed something obvious. As far as I can tell from the documentation the response JSON payload is _pumped_ into the submit-success div element and if there is a template element of type amp-mustache it will replace tokens with the related references from the response JSON structure.

In my case the success path has the following <template type="amp-mustache">Success! Thanks {{name}} for trying the <code>amp-form</code> demo!</template>.

I was expecting {{name}} to be replaced with the contents of the corresponding element in my JSON response... have I missed a step somewhere?

[mkhatib]

That's exactly right - @cypherlou

Except the current code on the website you sent me doesn't have any reference to name and the template is just:

<template type="amp-mustache">Success! Thanks  for trying the <code>amp-form</code> demo!</template>

Can you update it to use {{name}} reference and if it doesn't work let me know so I can take a look?

[cypherlou]

@mkhatib, you have spotted a massive oversight on my part for which I apologise profusely for wasting your time. The page is being drawn via a Jinja2 template engine extension to Flask which recognises { as a control character, clashing with its usage in the mustache.

I have now escaped it and it is working as expected.

Once again, sorry for wasting your time and thanks for your patience, it's much appreciated.

[jridgewell]

Closing per https://github.com/ampproject/amphtml/issues/7012#issuecomment-272263729.

[mkhatib]

No worries! Glad you caught it! 😄

[cypherlou]

Thanks guys!

[sandiprb]

Thanks @cypherlou I had the same issue in my Django Template. I wasted two hours trying to figure out what was wrong. Later realised Jinja2 was considering {{message}} as a variable! Thank you everyone.