Safari error. Javascript ajax json object - could not fetch properties. object may no longer exist

Question

I have an Ajax call to a PHP backend. It is working fine in chrome but when I ran it in safari I am getting a 'could not fetch properties, object may no longer exist' error against this line in the code -

dataType: "JSON",

Here is the function. Probably something really simple. I actually found this code online and repurposed it. Not really a developer just fudging my way through :)

Any tips would be greatly appreciated! As I say, no errors in Chrome.

Thanks Dave

            function insertProjectData() {

            var projectuid=$("#projectuid").val();
            var projectIdentifier=$("#projectIdentifier").val();
            var projectPIRDate=$("#projectPIRDate").val();
            var projectName=$("#projectName").val();
            var projectManagerName=$("#projectManagerName").val();
            var projectSponsorDept=$("#projectSponsorDept").val();
            var projectSponsorName=$("#projectSponsorName").val();
            var projectSponsorContact=$("#projectSponsorContact").val();
            var projectGTMDate=$("#projectGTMDate").val();
            var projectTargetBudget=$("#projectTargetBudget").val();
            var projectActualCost=$("#projectActualCost").val();
            var projectScope=$("#projectScope").val();
            var projectScopeDelivered=$("#projectScopeDelivered").val();

            if ($('#projectDeliveredTimeline').is(':checked')) {
                var projectDeliveredTimeline = "Yes";
            }
            else {
                var projectDeliveredTimeline = "No";
            }
            if ($('#projectDeliveredPlan').is(':checked')) {
                var projectDeliveredPlan = "Yes";
            }
            else {
                var projectDeliveredPlan = "No";
            }
            var projectComments=$("#projectComments").val();

            // AJAX code to send data to php file.
            $.ajax({
                type: "POST",   q
                url: "insert-projectdata.php",
                data: {projectuid:projectuid,projectIdentifier:projectIdentifier,projectPIRDate:projectPIRDate,projectName:projectName,projectManagerName:projectManagerName,projectSponsorDept:projectSponsorDept,projectSponsorName:projectSponsorName,projectSponsorContact:projectSponsorContact,projectGTMDate:projectGTMDate,projectTargetBudget:projectTargetBudget,projectActualCost:projectActualCost,projectScope:projectScope,projectScopeDelivered:projectScopeDelivered,projectDeliveredTimeline:projectDeliveredTimeline,projectDeliveredPlan:projectDeliveredPlan,projectComments:projectComments},
                dataType: "JSON",
                success: function(data) {
                    closeitem(projectarea);
                    $("#ProjectSaved").show();
                    setTimeout(function() { $("#ProjectSaved").hide(); }, 2500,);
                    $('form[name=projectForm]').get(0).reset();
                    window.location.replace("lessons.php");
                },
                error: function(err) {
                    console.log(err);
                }

            });
        }

Strangely this (another page) is working fine!?...

function insertAreaData() {
            var areauid=$("#areauid").val();
            var areaName=$("#areaName").val();
            var areaDesc=$("#areaDesc").val();

            // AJAX code to send data to php file.
            $.ajax({
                type: "POST",
                url: "insert-areadata.php",
                data: {areauid:areauid,areaName:areaName,areaDesc:areaDesc},
                dataType: "JSON",
                success: function(data) {
                    closeitem(areaarea);
                    $("#AreaSaved").show();
                    $('form[name=AreaForm]').get(0).reset();
                    setTimeout(function() { $("#AreaSaved").hide(); }, 2000,);
                    window.location.replace("lessons.php");
                },
                error: function(err) {
                    console.log(err);
                }

            });

        }

Edit: I have now tested in internet explorer also and having the same issue.

Answer 1

So turns out that the form was posting an page was reloading and for some reason Google Chrome was handling this for me, while Safari and IE were not.

I added the following onsubmit comment to the form:

<form id="Project" name="projectForm" onsubmit="return false;">

and it prevented it from executing when I was clicking the submit button and instead ran the javascript.

Just for completeness here is the submit:

<input type="submit" class="submit" id="projectSubmit" onclick="insertProjectData()" value="Save Project">

So as expected a simple thing in the end...