Switch slider (using a checkbox) is flickering with AJAX "back" history-CodePudding

The following code queries a state.json file on load and updates the slider switch. It uses fetch(...). It works.

When clicking on the text "Click on this text...", the top div is replaced by another text with HTMX.

Problem: when clicking browser "Back" button, the switch slider moves again (flickering), and it should not: only the div #me should be modified by HTMX, not the rest.

Question: how to avoid the switch to flicker when doing history Back? (even if we remove the CSS transition, we still have a very fast flickering).

Live demo here.

index.php

<script src="https://unpkg.com/[email protected]"></script>
<style>
.switch { appearance: none; height: 30px; width: 52px; background-image: linear-gradient(to bottom, transparent 0 22px, dodgerBlue 22px), linear-gradient(to right, white 0 22px, dodgerBlue 22px 60px); background-position: 4px 4px; }
.switch { transition: 0.2s; }
.switch:checked { background-position: 26px 4px; }
</style>
<div hx-get="page2.txt" hx-push-url="true" id="me">Click on this text to go to next page</div>
<input type="checkbox" id="checkbox" >
<script>
fetch("state.json").then(r => r.json()).then(data => {
    document.getElementById("checkbox").checked = data['state'] == 'checked';
});
</script>

page2.txt

Hello, now click on the "Back" history button of your browser.

state.json

{"state": "checked"}

CodePudding user response：

After further research, it seems that using hx-history-elt on the div containing the text, but not the slider switch, solves the problem.