Overview: I am trying to use MathJax in my livewire component to format math problems. It works fine until a livewire request is made.
What I have done:
I have added the following to my layout file:
<code> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</code>
<code> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</code>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
My Livewire component:
<code>class ShowMathProblemPage extends Component
{
public string $problem = '$$4^2 + 4/6$$';
public function generateNewProblem()
{
$this->problem = '$$5/534^56$$';
}
}
</code>
<code>class ShowMathProblemPage extends Component
{
public string $problem = '$$4^2 + 4/6$$';
public function generateNewProblem()
{
$this->problem = '$$5/534^56$$';
}
}
</code>
class ShowMathProblemPage extends Component
{
public string $problem = '$$4^2 + 4/6$$';
public function generateNewProblem()
{
$this->problem = '$$5/534^56$$';
}
}
Livewire blade:
<code><div>
{{ $problem }}
<button wire:click="generateNewProblem">
New Problem
</button>
</div>
</code>
<code><div>
{{ $problem }}
<button wire:click="generateNewProblem">
New Problem
</button>
</div>
</code>
<div>
{{ $problem }}
<button wire:click="generateNewProblem">
New Problem
</button>
</div>
The issue:
It works on initial load – but as soon as the livewire call is made to generateNewProblem (or anything else) the formatter is not reapplied.
I have tried using the following (and variation) to trigger the formatter to run again with no dice:
<code><script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.on('run-formatter', () => {
MathJax.typesetPromise().then(() => {
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
});
});
</script>
</code>
<code><script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.on('run-formatter', () => {
MathJax.typesetPromise().then(() => {
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
});
});
</script>
</code>
<script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.on('run-formatter', () => {
MathJax.typesetPromise().then(() => {
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
});
});
</script>