How to use alpine js in wordpress ajax request? - ajax

Question

For a wordpress plugin using alpine js, I got an error to access of alpine data :
var data = {
'action' : 'myWPAjaxAction',
'data' : JSON.stringify(this.ui.data)
};
jQuery.post( wp_ajax_object.ajax_url, data, function(response) {
if (response.ok) {
this.ui.submit.state = true; //cannot be found !
this.ui.step = 5;
var iFrame = document.getElementsById("yousign-iframe");
iFrame.appendChild(response.view);
} else {
console.debug(response);
this.ui.submit.state = false;
this.ui.submit.errors = 'no_submit';
}
}).fail(function() {
this.ui.submit.state = false;
this.ui.submit.errors = 'no_submit';
});
With this code inside an alpine function, I got an error :
this.ui is undefined
How can I read/modify alpine data after ajax post request in Wordpress?

Answer 1

Use the arrow function syntax, so this will refer to Alpine.js data object instead of jQuery:
jQuery.post( wp_ajax_object.ajax_url, data, (response) => {
if (response.ok) {
this.ui.submit.state = true;
this.ui.step = 5;
var iFrame = document.getElementsById("yousign-iframe");
iFrame.appendChild(response.view);
} else {
console.debug(response);
this.ui.submit.state = false;
this.ui.submit.errors = 'no_submit';
}
}).fail(() => {
this.ui.submit.state = false;
this.ui.submit.errors = 'no_submit';
});