Partial with Forms
I'm currently working in a quiz-like app. I want to make 2 states, not answered and answered, which replace each other. I'll see a quiz, then fill the answer, next get the solution, and finally continue to the next quiz.
I've seen that we may achieve this by:
https://deno.com/blog/fresh-1.6#partials-with-forms
But I could't seem to understand it
Deno Blog
Fresh 1.6: Tailwind CSS plugin, simplified typings and more
Discover new improvements in Fresh 1.6 that simplify your project and make it speedier.
11 Replies
What the POST handler should return? Do I need a redirection or just navigate with the button? How if I want to get the sent data with url params?
I apologize, but I wasn't able to find the specific answer to your question in the official Deno documentation. However, based on the information you've provided, it seems like you're looking to implement a stateful interaction in your quiz app using Fresh, which is a Deno web framework.
From what you've described, you want to have a form that, upon submission, changes the state of the quiz from "not answered" to "answered" and then displays the solution. In Fresh, you can handle form submissions and use that to trigger state changes on the server side.
Although I can't provide a direct solution from the documentation, here's a general idea of what you might need to do:
1. Define two states for your quiz component: "not answered" and "answered".
2. Render the quiz with a form when in the "not answered" state.
3. Handle the form submission on the server side, process the answer, and change the state to "answered".
4. Render the solution when in the "answered" state.
5. Provide a way to move to the next quiz, which would reset the state to "not answered".
Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. For a more detailed understanding, you might want to look at examples of form handling in Fresh or seek guidance from the community or the documentation on how to work with partials and forms in Fresh.
@anggoran with partials the response is expected to be HTML, regardless of the http verb. The idea is that you click a button or submit a form or something and you can send back html which only contains updates to the areas in the page that need it. These areas are marked by a partial component
How the insert works? Can I replace existing content?
Also what is the difference with usual conditional like this?
Yes, the idea is that you replace existing content. A simple conditional works as well for the initial render. Thing is, once the user loaded the initial page, how dou you get the new content? The conditional would require that both branches are available to the client like in an island. But for non islands, as in any content outside of that, the client doesn't have the template for the other branch. So it needs to reach out to the server to get it. That's what partials are for. Without partials every link would be a full blown page load. With partials you can only update the areas you need. Note that it isn't about conditionals or anything. It's about getting new UI from the server that the client didn't have before. I'm an spa you always ship all templates/components to the browser. This is one of the reasons why the JS is so big with an spa.
These are what I got from the discussion:
Native form need to redirect after server side submission, while partial do client-side navigation. So using form with partial helps us to do server-side data handling with client-side state update, with to-be-inserted html as a response.
Partial isn't just conditional in initial state or island. It doesn't refresh full page, only update necessary parts.
I think I need a demo repo for using form with partial... Is there any on Github?
I'm kinda confused with how to place the partial when using form, like is it just to treat submit button as link after submission or else
Using partials doesn't imply that it will always do client side navigation. It can like with links for example, but it's not a must. Place the partial around the area you want to update.
I don’t think it’s mentioned in the docs (yet), but make sure your partial route for the form POST also has a GET handler redirecting back to original page or you’ll get odd behaviours (in dev anyway). The partial form post url isn’t “hidden” in the same way as it is with partial nav on anchor tags.
Possibly just an issue during dev watch mode when a change will kick off a reload of the partial url as a page.
Are there any non-island reliant patterns for demonstrating a post is ongoing to the user?
As it’s a background action there’s no obvious browser loading behaviours so it can be a bit confusing to users.
Apparently hx-indicator is how this problem is handled in HTMX
https://htmx.org/attributes/hx-indicator/
</> htmx ~ hx-indicator Attribute
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react
at the moment no. This is something I haven't gotten around to adding yet
No worries, appreciate you’re a one man band going over and above at the moment! I’m sure I can do something clever with islands in the mean time.