jquery not working in mobile browsers

Question

I am making a image uploader using jquery and ajax and it works ok in computer browsers but will not work in mobile browsers. I did get it to work once but i changed something and didn't notice in till it was to late. Can someone please tell me why my coding stops working in mobile browsers.

It seems that the $(document).ready(function(){ is not loading on page load in cell phones but i have other js coding and they all work but this one is the only one that stops working.

<script type="text/javascript"> 
function _(el){
    return document.getElementById(el);
}
function sendFileToServer(formData,status){
    var uploadURL ="{SITEURL}uploaded/index.php?action=1"; //Upload URL
    var extraData ={}; //Extra Data.
    var jqXHR=$.ajax({
        xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                xhrobj.upload.addEventListener('progress', function(event) {
                    var percent = 0;
                    var position = event.loaded || event.position;
                    var total = event.total;
                    if (event.lengthComputable) {
                        percent = Math.ceil(position / total * 100);
                    }
                    //Set progress
                    status.setProgress(percent);
                }, false);
            }
            xhrobj.addEventListener('load', function(event) {
                _('returnMessage').innerHTML = event.target.responseText;
            }, false);
            return xhrobj;
        },
        url: uploadURL,
        type: "POST",
        contentType:false,
        processData: false,
        cache: false,
        data: formData,
        success: function(data){
            status.setProgress(100);
            $('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
            $('#setdefaultimg').load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
            $('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
            $("#file").val('');
            $('.statusbar').hide();
        }
    }); 
    status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj){
    rowCount++;
    var row="odd";
    if(rowCount %2 ==0) row ="even";
    this.statusbar = $("<div class='statusbar "+row+"'></div>");
    this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
    this.size = $("<span class='filesize'></span>").appendTo(this.statusbar);
    this.progressBar = $('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: '+row+'%"></div></div>').appendTo(this.statusbar);
    this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
    obj.after(this.statusbar);
    this.setFileNameSize = function(name,size){
        var sizeStr="";
        var sizeKB = size/1024;
        if(parseInt(sizeKB) > 1024){
            var sizeMB = sizeKB/1024;
            sizeStr = sizeMB.toFixed(2)+" MB";
        }else{
            sizeStr = sizeKB.toFixed(2)+" KB";
        }
        this.filename.html(name);
        this.size.html(sizeStr);
    }
    this.setProgress = function(progress){
        var progressBarWidth =progress*this.progressBar.width()/ 100;
        this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "%");
        if(parseInt(progress) >= 100){
            this.abort.hide();
        }
    }
    this.setAbort = function(jqxhr){
        var sb = this.statusbar;
        this.abort.click(function(){
            jqxhr.abort();
            sb.hide();
        });
    }
}
function handleFileUpload(files,obj){
    for (var i = 0; i < files.length; i++) {
        var fd = new FormData();
        fd.append('file', files[i]);
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name,files[i].size);
        sendFileToServer(fd,status);
    }
}
function setDefaultImage(image){
    var formdata = new FormData();
    formdata.append("setDefaultImage", image);
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", function(event) {
        $("#setdefaultimg").load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
        $('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
    });
    ajax.addEventListener("error", function(event) {
        $("#returnMessage").innerHTML = "Didn't set the default image";
    });
    ajax.open("POST", "{SITEURL}uploaded/index.php?action=3");
    ajax.send(formdata);
}
function DeleteImage(image){
    var formdata = new FormData();
    formdata.append("PictureName", image);
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", function(event) {
        $("#setdefaultimg").load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
        $('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
        $('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
    });
    ajax.addEventListener("error", function(event) {
        $("#returnMessage").innerHTML = "The picture didn't delete please try again";
    });
    ajax.open("POST", "{SITEURL}uploaded/index.php?action=5");
    ajax.send(formdata);
}
$(document).ready(function(){
    $('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
    $('#setdefaultimg').load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");

    var obj = $("#dragandrophandler");
    var obj2 = $("#manualhandler");
    obj.on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px dotted #0B85A1');
    });
    obj.on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    obj.on('drop', function (e) {
        $(this).css('border', '2px dotted #0B85A1');
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        //We need to send dropped files to Server
        handleFileUpload(files,$('#statusUpload'));
    });
    $(document).on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        obj.css('border', '2px solid #0B85A1');
    });
    $(document).on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        obj.css('border', '2px solid #0B85A1');
    });
    obj.css('border', '2px solid #0B85A1');
    obj2.on('click tap vclick', function (e) {
        var files = _('file').files;
        //We need to send dropped files to Server
        handleFileUpload(files,$('#statusUpload'));
    });
    $("div#images").hover(function () {
        $('span').on('click', function() {
            var imageName = $('img',this).attr('title');
            setDefaultImage(imageName);
        });
    });
    $("div#setdefaultimg").hover(function () {
        var imageName = $('img',this).attr('title');
        $("#deleteImage").click(function(){
            DeleteImage(imageName);
        });
    });
});
</script>

Here is the html page that was asked for.

<div id="imageUploader" class="modal fade">
    <!-- INCLUDE uploadhandler.tpl -->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{L_3500_1015494} <button class="btn btn-danger btn-xs pull-right" data-dismiss="modal">{L_678}</button></h4>
            </div>
            <div class="modal-body">
                <div class="well">
                    {MAXPICS}<br>{FREEMAXPIC}<br>{ALLOWEDPICTURETYPES}
                </div>
                <div id="returnMessage"></div>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#dragNdropUploader" data-toggle="tab">Upload Photos</a></li>
                    <li><a href="#Default" data-toggle="tab">Default Picture</a></li>
                    <li><a href="#pickDefault" data-toggle="tab">Uploaded Images</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" id="Default">
                        <div id="setdefaultimg"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane active" id="dragNdropUploader">
                        <div class="well" id="dragandrophandler" align="center"><b>{L_3500_1015894}</b></div>
                        <div class="input-group">
                            <form id="upload_form" enctype="multipart/form-data" method="post">
                                <input type="hidden" name="csrftoken" value="{_CSRFTOKEN}">
                                <div class="input-group-btn">
                                    <input multiple="multiple"  type="file" class="btn btn-info" name="file" id="file">
                                </div >
                                <br>
                                <button type="button" class="btn btn-success"  value="Upload File" id="manualhandler">Upload File</button>
                            </form>
                        </div>
                        <div id="statusUpload"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="pickDefault">
                        <div class="alert alert-info" role="alert">Click on the picture that you want to use as your profile default picture.</div>
                        <div id="images"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Never mined it was working the hole time and i had to clear my browser cache. Stupid browser cache every time i update the js i have to clear my browser cache every time.