question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

amp-form not populating template element

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
cypherloucommented, Jan 12, 2017

@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.

0reactions
RealScatmancommented, Feb 24, 2021

For anyone that stumbles upon this and is working with Django Templates and implementing form submission success using amp-form you will need to wrap your {{message}} value with the following template tag:

                      {% verbatim %}
                      {{message}}
                      {% endverbatim %}

This should allow the amp-form to render the JsonResponse object values from your django view (provided you had a successful post.)

Reference to Django Docs https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#verbatim

Was freaking out for a couple hours trying to figure this out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation: <amp-form> - amp.dev
Allows you to create forms to submit input fields in an AMP document. ... AMP component, such as <amp-list> , note that templates...
Read more >
AMP Form - Cannot get it to work
I have created an amp form here: http://amp.redmanwallpaper.co.za/form.html. This is the html: ... <script async custom-template="amp-mustache" ...
Read more >
reactjs - amp form not submitting form data
Of course I have imported all required amp components above the page, like form, bind, autocomplete, mustache, etc. Here's my backend code:
Read more >
amp-form extended examples and tricks - amp templates
Now the amp-form is not an actual tag replacing some of the ones we are used ... In order to have the amp-form...
Read more >
How to develop & implement AMP forms on AMP pages
<script async custom-element="amp-form" ... like allowing you to submit your form without reloading the website nor opening a new tab.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found