jQuery Script Not Working on Mobile Devices

1.1k views Asked by At

I am using a plugin called Window postMessage Plugin along with UploadiFive to upload a file to my server and insert the file link onto a webpage that has my upload script embedded on it. It works great on desktop devices (tested in Firefox (v26) and Chrome (v31) ).

When I try it on my iPad (running iOS 7.0.4 using Safari) and my Android Phone (running Android 4.3 stock browser) the file uploads as intended but it doesn't insert the file as it should. Any ideas why it works on my desktop but not mobile?

Here is my code:

JS

This JS is to get the file name from the upload script, target where to insert the file, and then insert code based on file type.

pm.bind("message5", function(data) {
    var ext = data.split('.').pop().toLowerCase();
    myFrame = $('#editorf').contents().find('body');
    nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');

    if (ext=='jpg' || ext=='jpeg' || ext=='bmp' || ext=='gif' || ext=='png' || ext=='tiff' || ext=='tif'){  
     nestedFrame.append($.parseHTML(' <br><br> <a href="http://www.domain.net/uploads/' + data + '" class="fancybox"><img style="max-width:250px;" class="forum-image" src="http://www.domain.net/uploads/' + data +'"/></a>'));
    } else if (ext=='pdf') {
        nestedFrame.append($.parseHTML('  <br><br> <a target="_blank" href="http://www.domain.net/uploads/' + data + '">View Uploaded PDF</a>'));
    } else {
        nestedFrame.append($.parseHTML('  <br><br> <a href="http://www.domain.net/uploads/' + data + '">Download Uploaded File</a>'));
    }
});

UploadiFive JS

$('#file_upload').uploadifive({
            'formData'     : {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : "<?php echo md5('unique_salt' . $timestamp);?>"
            },
            'uploadScript' : '/js/uploadify/uploadify.php',
            'onUploadComplete' : function(file, data) {
                var fileUploaded = data;
                pm({
                  target: window.parent,
                  type: "message5", 
                  data:fileUploaded 
                });
            }
        });

How do I get this to work on mobile devices?

Note: I am using jQuery 2.0.3.

UPDATE

To attempt and debug the problem I tried to use Edge Inspect. When I ran the code through Edge Inspect it worked! It just doesn't work in the stock browsers from what I can tell on iOS and Android. I am baffled as to why.

0

There are 0 answers