I am trying to update a checkbox value tied to a AlipneJS data model based on the response of a jquery ajax call.
However it doesn’t seem to work when I try to update the data model for the checkbox in the jQuery callback method. It updates fine before the jquery call (the commented out line works fine).
What am I missing? Thanks for your help in advance.
<html>
<head>
<!--- jQuery --->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!--- Bootstrap --->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<!--- Include Alpinejs --->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div style="width:50%;margin:auto;line-height:2em;">
<div x-data="startup">
<form>
<div>Checkbox<sup class="text-danger">*</sup></div>
<div class="form-check">
<input class="form-check-input big-checkbox material" type="checkbox" value="" id="yes" x-model="val_yes">
<label class="form-check-label" for="flexCheckDefault">
Yes
</label>
<br>
<button class="btn btn-primary mt-3" @click.prevent="callAPI()">Call API</button>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('startup', () => ({
val_yes: false,
callAPI()
{
//this.val_yes = true;
$.ajax({
url:"https://zenquotes.io/api/today",
dataType: 'json',
success: function(json)
{
this.val_yes = true;
}
});
}
}))
})
</script>
</body>
</html>