Loading of external scripts fails on browser-refresh but works when hot-reloaded #4071
Labels
bug
Something isn't working
Comments
|
Ok i solved this injecting scripts just before mounting and that took a ton of time, but it will be helpful for loading 3rd party scripts use js_sys::Promise;
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::{window, HtmlScriptElement};
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_name=DataTable)]
type DataTable;
#[wasm_bindgen(constructor)]
pub fn new_table_(div_id: &str) -> DataTable;
}
pub async fn new_table(div_id: &str) -> Result<(),JsValue> {
JsFuture::from(load_script("https://code.jquery.com/jquery-3.7.1.js")).await?;
JsFuture::from(load_script("https://cdn.datatables.net/2.3.0/js/dataTables.js")).await?;
let _ = DataTable::new_table_(&format!("#{}",div_id));
Ok(())
}
fn load_script(src: &str) -> Promise {
let doc = window().unwrap().document().unwrap();
let script = doc
.create_element("script").unwrap()
.dyn_into::<HtmlScriptElement>().unwrap();
script.set_src(src);
script.set_type("text/javascript");
let promise = Promise::new(&mut |resolve, reject| {
let onload = Closure::once_into_js(move || {
resolve.call0(&JsValue::NULL).unwrap();
});
let onerror = Closure::once_into_js(move || {
reject.call0(&JsValue::NULL).unwrap();
});
script.set_onload(Some(onload.unchecked_ref()));
script.set_onerror(Some(onerror.unchecked_ref()));
});
doc.head().unwrap()
.append_child(&script).unwrap();
promise
}
#![allow(unused,non_snake_case)]
use std::time::Duration;
use dioxus::prelude::*;
use crate::{table_callbacks::new_table, Route};
pub fn TablePage() -> Element {
let div_id = use_signal(|| "table-id".to_string());
let mut is_loaded = use_signal(|| false);
let table_rows = use_signal(|| vec![
("First Name", 21, 55),
("Second Name", 22, 60),
("Third Name", 25, 66)
]);
let nav = navigator();
use_effect(move || {
let mut is_loaded = is_loaded.clone();
spawn(async move {
if is_loaded() {
let _ = new_table(&div_id()).await;
}
});
});
rsx! {
div {
h2 {
onclick: move |e| {
e.prevent_default();
nav.push(Route::HomePage { });
},
"Go Back"
}
}
div {
h1 {
"This is Table Page"
}
}
div {
onmounted: move |e| {
e.prevent_default();
is_loaded.set(true);
},
table {
id: "{div_id()}",
class: "display",
thead {
tr {
th { "Name" }
th { "Age" }
th { "Height" }
}
}
tbody {
for (name,age,w) in table_rows() {
tr {
td { "{name}" }
td { "{age}" }
td { "{w}" }
}
}
}
}
}
}
}
but before i close this i would like to ask @ealmloff whether if there is a dioxus-y way to do inject scripts before mounting elements If there is no dioxus-y way to do this can we have this incorporated into dioxus in someway please, I went through a bunch of comments in rust subreddit on a dioxus post and most people are hesitant to shift frameworks is because of date-pickers, tables and stuff, creating wasm-bindgen bridges for the external js functions is very easy but ensuring scripts loading on time is the one thing that difficult to get ahold of. Thankyou. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Problem
Trying to use wasm_bindgen when using external libraries(Plotly + DataTable), works on hot reload but fails on refreshing the browser
It becomes a static html page with no css or js.
I've posted the full example just to show an observation that I have 2 js libraries loading through wasm_bindgen and one works fine but the moment i use the DataTable one i get this error.
Error stack from console when table_mounted
Error from console when use_effect
Expected behavior
Screenshots
expected:
20250502-1623-32.4563536.mp4
currently happening:
20250502-1626-32.5720359.mp4
Environment:
Questionnaire
I am actually interested in solving this myself, I need this solved to implement so many 3rd party libraries that are currently not available in dioxus to apply it in my dashboard app
I think the script is not being loaded, but I don't know whether this is wasm-bindgen problem or a dioxus general problem which has already been solved. because plotly which is also importing functions from js into rs using bindgen is working as expected. even with refresh.
Thankyou
The text was updated successfully, but these errors were encountered: