I have a Svelte component displaying modal dialog with "edit" type of form. The dialog is not displayed by default. User can open it by clicking on an "edit" button on the page. This shows the form. Once the form is submitted, it disappears (Svelte prop is set to false). This is all OK. The problem is that although the form was submitted with new values and everything was properly updated on the backend, if the user reopens the dialog/form again, input fields contain the old/original values. Any hints what I have to do to get the already submitted values also there? My understanding is that this may be caused by the fact that the form (modalContent) is passed down as a property:
<script>
export let modalContent;
// ...
function close()
{
modalVisible = false;
}
// ...
</script>
{#if modalVisible}
<div id="modal">
<div id="modal-backdrop" in:fade={{duration: 100}} out:fade={{duration: 300}} on:click={close} />
<div id="modal-content-wrapper" in:scale={{duration: 150, start: 0.8}} out:scale={{duration: 100, start: 0.8}} on:introend={onIntroEnd}>
<div id="modal-header">
<div class="titlebutton-close" on:click={close}/>
<div class="flex justify-center">
<slot name="header">
<!-- fallback -->
<h1>Modal Heading Goes Here...</h1>
</slot>
</div>
</div>
<div id="modal-content" bind:innerHTML={modalContent} contenteditable="true"/>
<div id="modal-footer">
<slot name="footer"/>
</div>
</div>
</div>
{/if}
Submitting is done typically with XMLHttpRequest so probably nothing special here:
// ...
if (form.checkValidity())
{
// Prepare XHR
var xhr = new XMLHttpRequest();
xhr.open(submitMethod, submitUrl);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = async function ()
{
if (xhr.readyState === 4)
{
if (xhr.status === 200)
{
var response = JSON.parse(xhr.responseText);
switch (response.command)
{
case "close":
close();
break;
case "replace":
modalContent = response.data;
await tick();
initFormElements();
break;
default:
break;
}
}
else
{
alert("Error processing request: " + xhr.status);
}
}
};
xhr.send(new FormData(form));
}