7

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');
    });
});
Mike B
  • 71
  • 4
  • The only odd thing I'm seeing in those lines is the `$(...).attr('value', 'Uploading');`. Normally you'd use `$(...).val('Uploading');` (or you could use `prop`). But I bet `attr` works anyway, and in any case, that doesn't explain the fades... – T.J. Crowder Dec 17 '12 at 17:45
  • 1
    It's nice to see a **well-asked** question from a new SO member. Nice one! – T.J. Crowder Dec 17 '12 at 17:46
  • No javascript errors reported after page load or after the button it clicked. – Mike B Dec 17 '12 at 18:12
  • How about using the input type `button` instead of `submit`? Because then it works fine on my Safari 6.0.2. The submit type redirects you, if you dont stop it. I also fetched the jQuery from google: https://developers.google.com/speed/libraries/devguide#jquery – nooitaf Dec 17 '12 at 18:32
  • @n0oitaf Yes...I get that too. If I change the html input type from "submit" to "button" then my jQuery works as intended. But here's the funny part. Obviously my form doesn't submit now...so I add `$('#fileUploadForm').submit();` to the end of my function, and now the form submits...but the problem is back and the rest of the methods don't work. WEIRD! – Mike B Dec 17 '12 at 19:59
  • They propably work, but you get redirected so you dont see it happening. You should really have a look at $.ajax for this. Or look into animation chaining in jQuery. The browser doesn't care about javascript animations and just redirects as if you clicked a link. – nooitaf Dec 17 '12 at 20:20
  • @n0oitaf I suspect you're right. Still doesn't make a whole lot of sense. Even if I stick a `.delay(1000).submit();` it still doesn't work, which is confusing because technically the browser didn't even get the command to submit the form until long after the animations were instructed to happen. Eventually this whole module will be ajax...but at this point it's a simple form submission. It's just strange that it works everywhere else except Safari. – Mike B Dec 17 '12 at 20:41

2 Answers2

1

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');
        });

    });
});
kevindeleon
  • 1,914
  • 3
  • 18
  • 30
  • Thanks for the suggestion. Just tried it and unfortunately it did not fix the issue. Since this only happens in OSX 10.8, and after everything I've tried, I'm starting to think that maybe this has something to do with the OS or this specific build of Safari? – Mike B Dec 17 '12 at 19:25
  • no problem...that is strange. It was not working for me in Safari 6.0.2 (10.8.2) either, but with the modifications I made, it was working fine...of course there needs to be a bit more code added in to submit the form (or use .submit instead of .click), or do whatever is next in the step, but that did fix the problem of the methods (effects) not running. – kevindeleon Dec 17 '12 at 19:52
  • If I change the input type from "submit" to "button" then my jQuery also works as intended. But here's the twist. Once I add `$('#fileUploadForm').submit();` to the end of my function, the form will now submit...but the problem is back and the rest of the methods don't work. WEIRD! – Mike B Dec 17 '12 at 20:05
  • It sounds as if it all has to do with timing honestly. Maybe something needs to go in a callback so that it executes when it is intended to. That is confusing. – kevindeleon Dec 17 '12 at 20:58
0

You can use .submit() evnet (Instead of click). $('form').bind('submit',function(){...Code...});
But because you are trying to upload a file, I'd recommand using some ajax techniques, and or a jquery plugin.
There are many nice tutorials on file uploading using ajax (Use google)
And here is one from Nettuts+ ajax file uploading which I like.

  • Thanks...I've given that a try. It still fails to work in Safari 6 in OSX 10.8. I've changed my function to `$('#fileUploadForm').bind('submit',function() { $('#fileUploadSubmit').attr('value', 'Uploading'); $('#fileUploadSubmit').fadeTo('fast', 0.6); $('#fileUploadLoadingBar').fadeIn('fast'); });` – Mike B Dec 17 '12 at 19:20