This repo documents a problem I am having with Unpoly that I am asking for help with.
I cannot replicate the behavior of the "new company" button in the Unpoly demo app on the "all companies" page.
- I navigate to the "companies" page.
- I click on the "add company" button.
- The "new company" form pops up in a modal.
- I submit a valid form.
- The modal is "accepted" (using the terminology of the Unpoly documentation) and goes away. I am returned to the underlying "companies" page, where the "list of companies" is updated. Only the "list of companies" element (an unordered list with ID
#companies-list
), should be updated. The random number in the footer should not change.
All of the above steps except #5 work as desired.
Instead, this is what happens:
Steps 1 through 4 same as above, then I am redirected to the "example company" page.
Node version: 18
Browser: Chromium 108
Recommended (optional) VSCode extensions for template string syntax highlighting (pick one):
- "Comment tagged templates" by Matt Bierner (~16k installs) (preferred)
- "es6-string-html" by Tobermory (~270k installs)
This is a very simple demo app. These are all of its endpoints:
Method | Path | Purpose |
---|---|---|
GET | / | Home |
GET | /companies | Companies list |
POST | /companies | Add company |
GET | /companies/new | Form for adding companies |
GET | /companies/:id | Individual company (dummy implementation) |
The "add company" button (from views.js
):
<a
href="/companies/new"
up-layer="new"
up-accept-location="/companies/$id"
up-on-accepted="up.reload('#companies-list'); alert('...');"
>
<button>+ Add company</button>
</a>
The [up-accept-location]
attribute doesn't appear to be working.
On successful submission, the "new company" form redirects to /companies/<id>
, where the <id>
is randomly generated on the fly, and is meant to be a placeholder for demonstration purposes. This can be seen here (from main.js
):
// Redirect status code 302
res.redirect(`/companies/${views.randomNumber()}`);
This should cause the modal to close, but it doesn't.
On the "companies" page, there is a button to manually reload the #companies-list
element. It works. You will notice that the companies list changes while the random number in the footer remains the same. This button's [onclick]
attribute is the same as the "new company" button's [up-on-accepted]
attribute.
Form validation via Unpoly works flawlessly. This is not an issue. From views.js
:
<form method="post" action="/companies" up-validate>...</form>