Understanding the AJAX Issue on iPhone with iOS 11

Introduction

As developers, we’ve all encountered issues with our web applications not functioning as expected in different browsers or devices. In this article, we’ll delve into a specific issue reported by a Stack Overflow user, where their AJAX form submission is failing on iPhone models running iOS 11.

The Issue

The user’s PHP and AJAX code has been working smoothly for desktop users but fails to submit data when used on iPhone (6s and X) devices. The error reports a 400 or 0 status code, which indicates that the request was invalid.

Understanding the Stack Overflow Post

Let’s break down the provided code snippet from the Stack Overflow post:

<script type="text/javascript">
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('HTTP_X_REQUESTED_WITH_AJAX', 'true');
        }
    });
</script>

<script type="text/javascript">
    $(document).on("submit", "form", function(event){
        event.preventDefault();
        $('#ShowData').html('<img src="img/loader.gif" height="16" width="16"/>');

        $.ajax({
            url: 'ins_ok.php',
            type: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(data, status){
                $('#ShowData').html(data);
                $('#Ins')[0].reset();
                $('#Data').datepicker('update', '');
            },
            error: function(xhr, desc, err){
                alert('Dati al momento non disponibili. Riprovare più tardi.');
                console.warn(xhr.responseText);
                alert(xhr.status);
                alert(err);
            }
        });        
    });
</script>

This code sets up an AJAX request to submit a form when the submit event occurs on the form element.

The Problem with Form Data on iOS 11

The provided answer in the Stack Overflow post reveals that there’s a problem with the FormData() object in JavaScript. Specifically, if an image input field is empty, it tries to send an empty object as part of the request data.

if (image input is null) {
    disable the image input;
}

This issue arises because iOS 11 introduces a new requirement for form data submissions: the FormData object must be serialized correctly. When an empty image input field is present, it fails to serialize properly, resulting in an invalid request.

A Solution to Disable Image Input on Empty

To resolve this issue, you can disable the image input field when the user leaves it empty:

<script type="text/javascript">
    $(document).on("input", "input[type='file']", function(){
        if (this.value === '') {
            this disabled = true;
        } else {
            this.disabled = false;
        }
    });

    // ...

    $.ajax({
        url: 'ins_ok.php',
        type: 'POST',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(data, status){
            $('#ShowData').html(data);
            $('#Ins')[0].reset();
            $('#Data').datepicker('update', '');
        },
        error: function(xhr, desc, err){
            alert('Dati al momento non disponibili. Riprovare più tardi.');
            console.warn(xhr.responseText);
            alert(xhr.status);
            alert(err);
        }
    });        
</script>

In this modified code snippet, we’ve added an event listener to the input field that disables it when the value is empty.

Enabling Image Input After Successful Submission

To re-enable the image input feature after a successful submission, you can use another JavaScript function:

<script type="text/javascript">
    $(document).on("submit", "form", function(event){
        event.preventDefault();
        $('#ShowData').html('<img src="img/loader.gif" height="16" width="16"/>');

        $.ajax({
            url: 'ins_ok.php',
            type: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(data, status){
                $('#ShowData').html(data);
                $('#Ins')[0].reset();
                $('#Data').datepicker('update', '');
                
                // Enable image input
                $(this).find('input[type="file"]').prop('disabled', false);

                // Re-enable the form to submit again
                this.submit = true;
            },
            error: function(xhr, desc, err){
                alert('Dati al momento non disponibili. Riprovare più tardi.');
                console.warn(xhr.responseText);
                alert(xhr.status);
                alert(err);
            }
        });        
    });
</script>

In this modified code snippet, we’ve added a line to enable the image input field after a successful submission.

Conclusion

The issue with AJAX form submission on iPhone with iOS 11 is related to the new requirements for form data serialization. To resolve this issue, you need to disable the image input field when it’s empty and re-enable it after a successful submission.

In this article, we’ve explored the problem, provided the modified code snippet that solves it, and offered additional context and explanations where needed.

Additional Considerations

When dealing with form data submissions, keep in mind:

Always validate user input to ensure it conforms to your application’s requirements.
Use a reliable method for serializing form data, such as FormData().
Be aware of new browser features and requirements that may affect your code.

By understanding the complexities of form data serialization and implementing the necessary adjustments, you can ensure a seamless experience for your users across different devices.

Last modified on 2024-03-13