ajax POST produces SyntaxError only in IE

Everything is working perfect for all browers except IE, where it does not even seem like the post is made to the Server and a SyntaxError is logged to the console.

I have a simple registration page on a WordPress portal which uses cURL to post the registration form to another machine.

Read More

JS:

$("#formSubmitButton").click(function () {
    $('#activity').show();

    AttachValidation($("#form"));
    if ($("#form").valid()) {
        $.ajax({
            cache: false,
            type: "POST",
            url: '', 
            data: $('#form').serialize(),
            success: function(data) {
                ProcessResponse(data, "form");
            },
            dataType:'json'
        });
    }
    else {
        $('#activity').hide();
    }
    return false;
});

JS for error handling:

$(document).ajaxError(function (event, jqxhr, settings, exception) {
    $('#activity').hide();
    toastr.error('An unhandled error has occured. Please contact customer support');
    console.error(jqxhr);
    console.error(exception);
});

Some WordPress PHP for the REST client:

$this->acceptType       = 'application/json';   

protected function executePost ($ch)
{
    if (!is_string($this->requestBody))
    {
        $this->buildPostBody();
    }

    curl_setopt($ch, CURLOPT_POSTFIELDS, $this->requestBody);
    curl_setopt($ch, CURLOPT_POST, 1);

    $this->doExecute($ch);  
}

protected function setCurlOpts (&$curlHandle)
{
    curl_setopt($curlHandle, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curlHandle, CURLOPT_TIMEOUT, 40);
    curl_setopt($curlHandle, CURLOPT_URL, $this->url);
    curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curlHandle, CURLOPT_HTTPHEADER, array ('Accept: ' . $this->acceptType, 'api-key: ' . $this->ApiKey));
}

protected function doExecute (&$curlHandle)
{
    $this->setCurlOpts($curlHandle);
    $this->responseBody = curl_exec($curlHandle);
    $this->responseInfo = curl_getinfo($curlHandle);

    curl_close($curlHandle);
}

Also IE dev tool’s network capture does not show an HTTP post.

Error as it appears on IE's dev tools

Pretty normal stuff. The server is returning json correctly and all browsers can read it. Only IE has this error, the IE dev tools doesnt really let me see if the server is even being called.

Ive tried to set the cache to false on this call, amongst others without any luck.

Basically my entire setup works, it is only IE that has an issue. I am on IE11. I had a report from an user on a different IE version that the form did post but instead of my site showing the response text it asked the user to download it as a .json file. So maybe its all related.

Thank you!

Related posts

Leave a Reply

1 comment

  1. The issue for this setup was extremely simple. My setup worked for all browsers, but the fact that the javascript was stating an empty url for the ajax POST it was throwing IE off. The url was safely being read and setup by the underlying REST client code (PHP)

    I removed the url parameter from the JS and it worked for IE, while not breaking the other browsers.

    Thanks everyone for your comments.

    $("#formSubmitButton").click(function () {
        $('#activity').show();
    
        AttachValidation($("#form"));
        if ($("#form").valid()) {
            $.ajax({
                cache: false,
                type: "POST",
                data: $('#form').serialize(),
                success: function(data) {
                    ProcessResponse(data, "form");
                },
                dataType:'json'
            });
        }
        else {
            $('#activity').hide();
        }
        return false;
    });