I found another good example at https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Now I have:
function postFetch() {
const data = {petid: document.getElementById('petid').value,
species: document.getElementById('species').value,
_token: document.getElementsByName("_token")[0].value,
_method: document.getElementsByName("_method")[0].value};
fetch('http://localhost/laravel70/pet/petupdate', {
method: 'PUT', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
alert(data.success);
document.getElementById('msg').innerHTML = data.success;
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
This works. Now I need to convert this part:
.catch((error) => {
console.error('Error:', error);
});
To this:
error: function (data, ajaxOptions, thrownError) {
var status = data.status;
if (data.status === 422) {
$.each(data.responseJSON.errors, function (key, value) {
$('#msg').append('<div>' + value + '</div>');
});
}
if (status === 403 || status === 500) {
$('#msg').text("Not Auth");
}
}
Not the jquery, but the handling of errors, validation and Auth I know I will need to use:
document.getElementById('msg').innerHTML = what goes here;
EDIT
For success this works:
.then(response => response.json())
.then(data => {
var div = document.getElementById('msg');
for (var key in data) {
div.innerHTML += data[key];
}
})
But I have not figured out how to display the errors (like validation) in the div, I tried:
.catch((error) => {
var div2 = document.getElementById('msg');
for (var k in error) {
div2.innerHTML += error[k];
}
});
@tray2 or someone, any idea?