Updating failed. The response is not a valid JSON response. specific to my browser when I include javascript in my html
I was able to insert custom html into my gutenberg wordpress editor (hosted by bluehost) and test my code by preview with no problems. I made calls to google maps and fetch() to get a list of locations to plot on the map as markers. 2 days later, I was no longer able to save any javascript changes to my post. I tried deleting the post and starting a new post. I deleted my javascript code to insert something simple like this
p id=demo/p
script
document.getElementById(demo).innerHTML = 5 + 6;
/script
It didn't matter how simple the script was, I got the error message: Updating failed. The response is not a valid JSON response.
I suspect this is a problem specific to my account/browswer/network settings because the tech support folks at bluehost did not encounter this problem when they tried to save the above script to my post. I also tried to hire someone on upwork to help me and he did not counter this problem when he got into my wordpress. I tried switching from chrome to safari and also encountered this problem.
I suspect I tripped a setting while I was running this multiple times to test. Sorry I don't know of a better test environment.
here's my original code snippet:
div id=gmap style=width:100%;height:400px;/div
script src=https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js/script
script
var mymap;
var markers = [];
function initMap() {
var centerpoint = { lat: 38.5, lng: -98 }; //centered around Kansas
mymap = new google.maps.Map(document.getElementById('gmap'), {
zoom: 4,
center: centerpoint
});
}
/** fetching a cvs file on the server side with a list of locations */
fetch(https://MYWEBSITE.com/wp-content/uploads/2022/03/stores.csv)
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.text().then(function(data) {
count = 0;
console.log(fetch called successfully);
initMap();
processCSV(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
function processCSV(allData){
const rows = allData.split('\n');
var storename, storephone, storeaddress, storelat, storelng;
for(let i=0; irows.length; i++){
var line = rows[i];
storename = line.split(,)[1];
storephone = line.split(,)[3];
storeaddress = String(line.split(,)[2]);
storeaddress = replaceAll(storeaddress, ^, ,);
storelat = line.split(,)[4];
storelng = line.split(,)[5];
createMarker(storename, storephone, storeaddress, storelat, storelng);
}
createCluster();
}
function replaceAll(string, search, replace) {
return string.split(search).join(replace);
}
function createCluster(){
var mcluster =new markerClusterer.MarkerClusterer({
map: mymap,
markers: markers
});
}
function createMarker(name, phone, address, latstr, lngstr) {
var contentString = b + name + /bbrbri + phone + /ibrbr + address;
var latLng = { lat: Number(latstr) , lng: Number(lngstr)};
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var marker = new google.maps.Marker({
position: latLng,
map: mymap,
title: name
});
markers.push(marker);
console.log(added marker to map + name);
marker.addListener(click, () = {
infowindow.open({
anchor: marker,
map: mymap,
shouldFocus: false,
});
});
}
/script
script src=https://maps.googleapis.com/maps/api/js?key=PRIVATEKEYamp;callback=initMap/script
- I have done the permalink resave
- bluehost has regenerated the htAccess file
- turned off all my plugins except elementor
- checked for mixed content, my site is all https
- checked site health rest api issues.
- switched to classic editor (then found out classic editor doesn't support javascript inserts
I'm out of ideas and I don't know why someone else, different computer, ip, browser, and maybe account can save javascript but not me.
Thanks
Topic google-maps save-post ajax Wordpress javascript
Category Web