0

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; i<rows.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 + "</b><br><br><i>" + phone + "</i><br><br>" + 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=PRIVATEKEY&amp;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

2
  • Have you checked to see if there are any console errors? Usually for this complex of a script it's best to create a custom block, rather than trying to paste JS in, as WP has a number of filters it runs things through.
    – WebElaine
    Mar 22, 2022 at 18:53
  • Did you find the solution?
    – m4n0
    Jul 13, 2022 at 4:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.