Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Methods not working in Safari 6

Pulling my hair out. Simple jQuery methods are not working in Safari 6.

The following code block works in all other browsers that I've tested except Safari 6. It works fine in Safari 5 and older, fine in Firefox, fine in IE. It also works fine in Chrome.

The alert does popup in Safari 6, so the function still fired, but nothing happens with any of the other 3 methods.

----- UPDATE ----- After further testing on several machines...I've found that it only fails to work in Safari 6 in Mac OSX 10.8. The code works fine in the same version of Safari in OSX 10.7. --------------------

I am running jQuery 1.8.3. and my page validates as HTML5.

HTML:

<div id="fileUploadFormContainer">

    <form id="fileUploadForm" action="/upload/do_upload/<?=$row->project_id?>" method="post" enctype="multipart/form-data" >
        <fieldset>
        <label for="userfile">Attach a file</label>
            <input type="file" name="userfile" id="userfile" /><br />
            <input type="submit" id="fileUploadSubmit" value="Upload file" />
            <img class="loadingBar" id="fileUploadLoadingBar" src="/images/indicators/ajax-loader.gif" alt="" />
        </fieldset>
    </form>
</div><!-- end fileUploadFormContainer -->

CSS:

.loadingBar {
    display: none;
}

JavaScript:

$(function(){
    // Submit Buttons
    $('#fileUploadSubmit').click(function()
    {
        $('#fileUploadSubmit').attr('value', 'Uploading');
        $('#fileUploadSubmit').fadeTo('fast',0.6);
        $('#fileUploadLoadingBar').fadeIn('fast');
        alert('Finished');
    });
});
like image 391
Mike B Avatar asked Dec 17 '12 17:12

Mike B


1 Answers

I could be wrong, but I think your problem is the form is submitting before your javascript is running. You may need to use preventDefault to keep that from happening. You could also change your button from a submit button to a type="button" and that could help as well. Oops...quick edit..I also put your alert in a callback so that it would run after the fadeIN had happened...you could leave that or change it.

$(function(){
    // Submit Buttons
    $('#fileUploadSubmit').click(function(e)
    {
        e.preventDefault();
        $('#fileUploadSubmit').attr('value', 'Uploading');
        $('#fileUploadSubmit').fadeTo('fast',0.6);
        $('#fileUploadLoadingBar').fadeIn('fast', function() {
            alert('Finished');
        });

    });
});
like image 93
kevindeleon Avatar answered Nov 04 '22 07:11

kevindeleon