AJAX form submit not working on iOS devices

Question

Okay, so this sounds plugin-specific, but I'm hoping someone could explain WHY this might be happening.

I'm developing a site in Wordpress, and I am using two plugins, Contact Form 7, and an integrated Mailchimp plugin for CF7.

On form submit, it should serve a failure or success response via AJAX and that's that - I've never had a problem. However, on this site the data is still submitted and is working fine. However, instead of an AJAX response, the page is reloaded.

THIS IS ONLY ON iOS!!!

My first thought was that it was obviously some sort of conflict, so I deactivated my plugins, INCLUDING a jquery plugin called fullpage.js

No change, still reloads. I thought it could be to do with the version of jQuery I'm running, or how i've enqueued my scripts, but still no difference.

Does anyone have any initial ideas on what might cause this sort of issue?

UPDATE: Went back and tested on an old site that uses CF7 and has same issues on iOS (great testing, I know). So, this must be an issue with CF7 and iOS. Anyone else experienced this?

Answer 1

iOS devices:

• have retired synchronous AJAX methods and only use asynchronous
• don't allow cachinig

Try something like this:

$.ajax({
        url: your_URL,
        type: "POST",
        data: JSON.stringify(data),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        async: true,
        cache: false,
        headers: { "cache-control": "no-cache" },
        success: function (data) {
            // do something
        },
        error: function (jqXHR, exception, errorThrown) {
            // do something
        }
    });

More on this topic found here.