Preventing Page reloads with ActionForm?

[MoonKraken]

I'm trying to prevent page reloads upon submission of an ActionForm:

let on_submit = move |ev: SubmitEvent| { ev.prevent_default(); };
...
<ActionForm action=save on:submit=on_submit>

it seems like on_submit is never invoked, as far as I can tell.

Is this expected? What's the best way to prevent a page reload upon submission of an ActionForm?

[gbj]

If you're getting a page reload with an ActionForm then I'm guessing WASM had not loaded yet or never loaded, which would also explain why your on:submit isn't invoked. Is there anything in your console to suggest that WASM did or did not load properly? Are other parts of your page with client-side interactivity interactive?

[MoonKraken]

it seems like everything else is working as expected - for example on:click event handlers. Also when I panic! the output shows in the js console

[MoonKraken]

i left out one other detail that may be pertinent - this is the code that calls form.submit():

let set_input_timeout = move |ev: leptos::ev::Event | {
        handle.into_iter().for_each(|t| t.clear());
        //convert to websys event
        let target = ev.target().unwrap();
        let text_area: HtmlTextAreaElement = target.dyn_into().unwrap();
        let form: HtmlFormElement = text_area.form().unwrap().dyn_into().unwrap();
        handle = set_timeout_with_handle(
            move || {
                let _ = form.submit();
            },
            TWO_SECONDS
        ).ok();
    };

So form.submit() is invoked as the result of a timeout expiring. action seems to be invoked properly when this happens, but not the function assigned to on:submit.

[gbj]

i left out one other detail that may be pertinent - this is the code that calls form.submit():
...

                let _ = form.submit();

Oh yeah this is actually super important. HTMLFormElement.submit() does not fire a submit event but just directly submits the form, and always reloads the page. What you really want is requestSubmit()

Weirdly enough I don't see request_submit in the web-sys docs for HtmlFormElement.

You can define it yourself with wasm-bindgen like this

use wasm_bindgen::prelude::wasm_bindgen;
use web_sys::HtmlFormElement;

#[wasm_bindgen(inline_js = "export function requestSubmit(form) { form.requestSubmit(); }")]
extern "C" {
    fn request_submit(this: &HtmlFormElement);
}

[MoonKraken]

Thanks - unfortunately this didn't seem to work :( the request to the server action never gets made with this approach. I'm sure it's something simple that I'm doing wrong :(

Taking a step back for a minute, it looks like the ActionForm renders as the following in the DOM:
<form method="post" action="/api/upsert_entry15786917388443342741">

This might be my lack of web dev experience speaking here, but how would this ever do anything other than direct the entire browser to the relative url in the action attribute?

[gbj]

Taking a step back for a minute, it looks like the ActionForm renders as the following in the DOM: <form method="post" action="/api/upsert_entry15786917388443342741">

This might be my lack of web dev experience speaking here, but how would this ever do anything other than direct the entire browser to the relative url in the action attribute?

It's actually fairly simple: the <Form/> component (which <ActionForm/> uses) just adds a submit event listener that prevents the default behavior.

leptos/router/src/components/form.rs

Lines 97 to 100 in 2c9de79

	// POST
	if method == "post" {
	ev.prevent_default();
	ev.stop_propagation();

Thanks - unfortunately this didn't seem to work :( the request to the server action never gets made with this approach. I'm sure it's something simple that I'm doing wrong :(

I'm happy to try to help you debug if you can share a slightly more complete example. I only have pretty small fragments of your code so it's quite hard to reconstruct what's happening.

[MoonKraken]

Gotcha. Really appreciate the offer - I've invited you as a collaborator to my private repo :) if you actually run the code you may need to stub out the ddb.rs.

[MoonKraken]

Also i neglected to notice this before but the Server Action appears to be returning a 303 which results in the page reload. Odd because the same action is being invoked elsewhere but it is returning a 200 and not causing the page to reload.

This is odd because in both cases, the server action is returning Ok(())

[MoonKraken]

ok I actually finally got this working via a bit of a workaround - I added a hidden submit button to the form with a node_ref and then have a submit_button().unwrap().click(); instead of let _ = form.submit(). That seems to avoid the aforementioned 303 and the page doesn't do a full reload as it was doing before. Still curious what the original issue was though!