Question posted in
You can find the official documentation here.

Jquery ajax – Ajax Post request not working on mobile devices

I am having an issue in which I am sending an Ajax post request to the server after a .on(‘click’) event in jQuery, but the Ajax request is not working on mobile devices. On desktop devices it works perfectly fine. That led me to doing some research. The first issue that I found was that the click event may not register on touch screen devices, but that wasn’t the issue. The touch event triggered after I issued some alert messages when the button was touched on mobile devices. On both iOS and Android devices the touch event triggered, but not the Ajax request. I also added touchstart to make sure the event would trigger on touch devices. Another potential issue that I researched was that there might be some issues on iOS and Android devices if you do not specify an expected datatype returned from the server after a post request (plain-text, json ect…). I specified the dataType and there were still issues with the request. Lastly, I saw that there might be some caching issues, so I set the cache argument to false and in the headers specified no-cache. This didn’t solve the issue either. With each “fix” that I attempted, the Ajax request still executed perfectly on desktop devices, but not on mobile devices. As I mentioned, the click event in it of itself was registered on mobile devices because when I issued alerts before the Ajax request they were shown on mobile devices. However, the Ajax request itself would not execute. Here is my code below:

$('.crop_image').on('click touchstart', function(event){
    alert("Triggered"); //Event triggered on mobile devices
    $image_crop.croppie('result', {
        size: 'viewport',
        format: 'png',
        type: 'blob'
   }).then(function (blob){
        $form = $('#uploadForm');
        var fd = new FormData($form);
        fd.append('upload_image', blob);
        $.ajax({
            url: "handle-image.html",
            type: "POST",
            data: fd,
            processData: false, //processData false
            contentType: false, //contentType false
            dataType: "text",  //response will be text
            cache: false,  //cache false
            headers: {
                "cache-control": "no-cache" //set headers
            },
            success: function (data){
                alert("Upload Successful"); //Only succeeds and executes on desktop
                $('#uploadImageModal').modal('hide');
                $('#uploaded_image').html(data);
            }
        });
    })
});

I’m stumped as to why this is failing on mobile devices. I figured that one issue could be that I am sending a blob via Ajax, and maybe mobile devices cannot handle the blob format, but after further review, I saw no evidence to support that. That’s why I am wondering what I could be missing here. As a side note, my form is not in the same place as the Button because my Button is in a modal. Since I am using form data I assumed that not having a submit Button within the actual form would not cause an issue, and again, this is not an issue on Desktop and Laptop devices.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is multipart/form-data, so I needed to change the enctype.
    This was why I was having issues on some devices, and since this post the issue have been solved.
    In the ajax request I simply needed to add:

    enctype: 'multipart/form-data',

    and this resolved the issue.


  2. 0

    When this happened, I discovered that the origin links e.g http://www.google.com and google.com, make it confusing for the browser. The browser sees it as two different host and don’t know which of the links to trust. The way to solve it is to force all redirection to either one you would prefer. In my case I created a .htaccess file with this rules and walaaa my problem was solved. This also applies to cookies and sessions not working.

    RewriteCond %{HTTPS} on
RewriteCond %{HTTP_HOST} ^www.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search