Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12111

SvelteKit use:enhance doesn't work and fully reloads the page

$
0
0

I'm new to SvelteKit and trying to build a simple todo app with a MongoDB database. I followed the tutorials and implemented a form to add todos like so:

<form      action="?/create"      method="POST"      class="flex flex-col gap-5 justify-center items-center w-2/3 mx-auto"      use:enhance><div class="w-2/3"><label class="block text-sm text-gray-500" for="todo"> Title </label><input          class="border border-gray-300 w-full rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"          type="text"          name="title"          bind:value={title}        /></div><div class="w-2/3"><label class="block text-sm text-gray-500" for="todo">          Description</label><textarea          rows="4"          class="w-full border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"          name="desc"          bind:value={desc}        /></div><div><button          class="bg-blue-500 text-white px-8 py-2 rounded-md font-semibold text-lg hover:bg-blue-600 transition duration-100 shadow-xl">          Create</button></div></form>

As you see, I am using the use:enhance directive that should prevent the form from reloading the page. When submitted, the form calls the actions object on my "+page.server.js" file, like so:

export const actions = {  create: async ({ cookies, request }) => {    const data = await request.formData();    if (data.get("title").length === 0) {      return fail(400, {        error: true,        message: "Title can't be empty",      });    }    if (data.get("desc").length === 0) {      return fail(400, {        error: true,        message: "Description can't be empty",      });    }    const todo = {      title: data.get("title"),      description: data.get("desc"),    };    try {      await createTodo(todo);    } catch (err) {      return fail(422, {        description: "wrong",      });    }  },};

This should be working fine, but my form refreshes each time I submit it, meaning I get a full page reload and the animations don't work (along with other stuff that might be implemented in the future). What is the cause of this? Is it expected behavior and I am missing something?


Viewing all articles
Browse latest Browse all 12111

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>