so on this page I have 2 drop-down and when submit button is clicked it is fetching data from a pocketbase backend. I am making a table component for each raw of data. (Component displays a id, link, a dropdown to change it's status and a submit button that uses form action again to update that particular row of data in the collection). I am using enhance (also tried using prevent default) but still the page is still refreshing. 1 thing to point out is I am using a variable named linkType in main script tag that stores value for what a user have selected from dropdown. It is shared among all components
Any idea how can I prevent it?
<script>
import { enhance } from '$app/forms';
export let data;
let selectedUser = '';
let selectedCourse = '';
function handleUserChange(event) {
selectedUser = event.target.value;
selectedCourse = '';
}
function handleCourseChange(event) {
selectedCourse = event.target.value;
}
async function showSelection() {
console.log('Selected User:', selectedUser);
console.log('Selected Course:', selectedCourse);
}
export let form;
let linkType = '';
let linkResult = '';
let linkTypes = ['Type1', 'Type'];
let linkResults = ['Result1', 'Result2'];
function handleLinkTypeChange(event) {
linkType = event.target.value;
}
function handleLinkResultChange(event) {
linkResult = event.target.value;
}
</script>
<div>
<h1 class="text-white-700 text-center text-4xl font-bold">Select Client Data</h1>
{#if data}
<form
action="?/userSelection"
method="POST"
use:enhance
class="flex flex-col items-center space-y-4 p-10"
>
<select
name="user"
class="select select-accent w-full max-w-xs"
value={selectedUser}
on:change={handleUserChange}
>
<option disabled selected>Select a User</option>
{#each data.userData as user}
<option value={user.user}>{user.user}</option>
{/each}
</select>
{#if selectedUser !== ''}
<select
name="course"
class="select select-accent w-full max-w-xs"
value={selectedCourse}
on:change={handleCourseChange}
>
<option disabled selected>Select a Course</option>
{#each data.userData.find((user) => user.user === selectedUser)?.courses || [] as course}
<option value={course}>{course}</option>
{/each}
</select>
{/if}
<button type="submit" on:click={showSelection} class="btn btn-primary">Get Data</button>
</form>
{:else}
<p>Loading...</p>
{/if}
{#if form && form.response}
{#each form.response as row}
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="w-1/5 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
>ID</th
>
<th
scope="col"
class="w-1/5 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
>Link</th
>
<th
scope="col"
class="w-2/5 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
>Link Type</th
>
<th
scope="col"
class="w-2/5 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
>Link Result</th
>
<th
scope="col"
class="w-2/5 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
>Update</th
>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4">{row.id}</td>
<td
class="whitespace-nowrap px-6 py-4"
style="max-width: 300px; overflow-x: auto; width: 100%;"
><a href={row.url} class="truncate">{row.url}</a></td
>
<td class="whitespace-nowrap px-6 py-4">
<select
class="block rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
>
{#each linkTypes as type}
<option value={type}>{type}</option>
{/each}
</select>
</td>
<td class="whitespace-nowrap px-6 py-4">
<select
class="block rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
>
{#each linkResults as result}
<option value={result}>{result}</option>
{/each}
</select>
</td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<form
action="?/update"
method="POST"
use:enhance
on:submit={(event) => event.preventDefault()}
>
<input type="hidden" hidden value={row.id} name="id" />
<input type="hidden" hidden value={linkType} name="linkType" />
<input type="hidden" hidden value={linkResult} name="linkResult" />
<button
type="submit"
class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700"
>Update</button
>
</form>
</td>
</tr>
</tbody>
</table>
</div>
{/each}
{:else}
<div><p>Select User First</p></div>
{/if}
</div>
Also this is my +page.server.js file that has action -->
export async function load({ locals }) {
try {
const users = await locals.pb.collection('UserData').getFullList();
const userCoursesMap = new Map();
users.forEach(entry => {
const userId = entry.user[0];
const courseName = entry.courseName;
if (userCoursesMap.has(userId)) {
userCoursesMap.get(userId).push(courseName);
} else {
userCoursesMap.set(userId, [courseName]);
}
});
const userData = Array.from(userCoursesMap).map(([userId, courses]) => ({
user: userId,
courses: courses
}));
return { userData };
} catch (error) {
console.error('Error fetching user data:', error);
throw error;
}
}
export const actions = {
userSelection: async ({ request, locals }) => {
const formData = await request.formData();
// const user = Object.fromEntries(formData);
const user = formData.get("user"); // add course name as well. ""
try {
const response = await locals.pb.collection("Orbittest").getFullList({
filter: `user = "${user}"`, fields: "id, user, url, linkType, linkResult"
});
const jsonResponse = JSON.stringify(response);
console.log("Fetched data:", jsonResponse);
return { response };
} catch (error) {
console.error("Error fetching data:", error);
return { error };
}
},
update: async ({ request }) => {
const formData = await request.formData();
const id = formData.get("id")
const linkType = formData.get("linkType")
const linkResult = formData.get("linkResult")
console.log(id, linkType, linkResult)
return { status: 200, id }
}
};
I am getting id, and type for the link I just updated but after that entire page refreshing.
