Passing Data in Fresh

As a context, I'm currently making a quiz-like page. I have a page that GET a quiz_id when opened. In the page I fill some inputs as the answer. After that, I want to submit the answer, along with quiz_id to get the solution from other table. Since Fresh uses <form> to send data, then how to send the quiz_id? Should I just make a hidden input?
W
webbdays19d ago
you can interupt normal form submition logic by preventing default. caputure the event in onSubmit and e.preventDefault() And then your custom logic to send data along with quiz_id as post post request normally.
A
anggoran18d ago
to go to the next question, should I do it with Partial?
W
webbdays18d ago
I didn't get you. What do you mean by partial here?
W
webbdays18d ago
if you are talking about these https://fresh.deno.dev/docs/concepts/partials#enabling-partials I am not aware of Fresh Framework.
Partials | Fresh docs
Partials allow areas of a page to be updated without causing the browser to reload the page. They enable optimized fine grained UI updates and can be used to do client-side navigation.
E
Esente18d ago
I would suggest adding quiz_id as hidden input so it is submitted with the form. No need for extra JS.
A
anggoran18d ago
After I submitted the form with POST, I want to GET the result (correct / wrong) in the same page without refreshing the entire page, what should I do? so like to update only some section, maybe like partial I think I was thinking about these possibilities: 1. Handle entire logic in the POST handler => return result via response of the POST request. 2. Send answer with POST handler => GET page again to get the result. For the logic, it's like: 1. Get the question. 2. Fill in the answer. 3. Submit the form. 4. Match answer to solution. 5. Return if it's correct / wrong. 6. Render the result without refresh. 7. Clear state, move on to the next question.
E
Esente18d ago
In this case, there are couple of ways. 1. Go all in with JS by intercepting the submit event on the form, and use fetch to submit instead. Using the response to update the page. 2. Use something like HTMZ to update part of the page after form submission (through iframe technique). Sorry for walking you through these choices. I'm all about doing thing with as little JS as possible and taking advantage of what HTML can already provide. Which is kinda a weird thing to say in a Deno's forum 😄
M
marvinh.18d ago
Fresh has Partials to update only sections on the page. The use case you're describing is exactly what they're built for
M
marvinh.18d ago
Partials | Fresh docs
Partials allow areas of a page to be updated without causing the browser to reload the page. They enable optimized fine grained UI updates and can be used to do client-side navigation.
A
anggoran18d ago
Thanks a lot guyss To use Partial after submitting form with native POST handler, we redirect to Partial inside the handler?
More Posts
deno in rustWhile working on some feature. We have found a bug. Here is the bug: https://github.com/tailcallhq/tSignals & Data Fetching1. Should I declare useSignal on route or island? 2. How to fetch data? Make an async route? Do useEError Using Google PubSub With DenoHi there, I am trying to work with PubSub using Deno. I am able to access and create new PubSub inDeno deploy IPHey! Is that possible to get the IP address of a deployment on Deno deploy? The backend we host theUbuntu Server HTTPSHow can I add https i Ubuntu Server to run Deno API over https? Without using Apache. I run deno coUse Deno as a type checker for a front-end project?Hey. I have a need to increase the speed of typechecking my frontend project. I'm not sure, but it sLogger Structure argsI am implementing a simple access log in Deno Fresh, but I am not quite sure how to use the standardAdd static font files as a fresh pluginHello! I'm creating a component library for Fresh. I'm in the part of setting up the plugin part of Compiling code breaks it (except on Linux)error: [ERR_MODULE_NOT_FOUND] Cannot find module "C:\Users\Eris\AppData\Local\Temp\deno-compile-llm-Interface with unknown amount of keys but all the same typeHow do i create an interface/type that can have unlimited keys but the values are all the same type?How to open a file as blob?Docs for Blob (https://deno.land/api@v1.42.0?s=Blob) say that `File` implements `Blob`. But the docsDeno deploy running my code multiple timesIm hosting a small discord bot on deno deploy but for some reason its firing the events multiple timvalue too large in kv (30kb)I'm getting a value too large error when setting a value in KV (on deploy) even though the value is How to work without a tsconfig.json in VSCode? Getting typescript errors due to React.``` Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compilupdate deno version on Alpineon alpine the version of deno is 1.38.1 https://pkgs.alpinelinux.org/packages?name=deno is there a rDeno blog deployment failureHi all, recently tried to make a new blog post on personal blog, however now the deployment fails (nFresh 1.6 - Deno Deploy - TailwindDeploying my project on deno deploy is not working. Does anyone have the same issue ? I am using taAnalyze dependencies for deno compileIs there a way to analyze the dependencies that is added when running deno compile? My compiled binaHow to install jupyter using deno v1.41.xAccording to the documentation https://docs.deno.com/runtime/manual/tools/jupyter the command shouldHelp with TypeScript namespaces - is this pattern supported?Hi! I am attempting to model some classes in a Namespace for organization purposes. I would expect t