Ajax beforeSend function doesn't seem to work
<p>I have a form to send a small textfile to the server where it's data is processed with <strong>PHP</strong>. The result is shown in a colorbox. It works fine, but i want to show a small message to my user while his data is being uploaded and processed (which takes couple of seconds) and hide it again after the result is shown. But that message <code>(span#ajaxloading)</code> doesn't appear for some reason.</p>

<p>HTML:</p>

<pre><code>&lt;button type="button" id="fixit"&gt;Fix it!&lt;/button&gt;&lt;span id="ajaxloading" style="display:none;"&gt;Your data is being processed...&lt;/span&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>jQuery("#fixit").click(function() {
    if(form.valid() == true ) {
        var formData = new FormData(jQuery('#ajastaja')[0]);
        jQuery.ajax({
            beforeSend: function(){
                jQuery('#ajaxloading').show(); // &lt;- Not working!
            },
            url: '/path/to/my.php',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                jQuery('#ajaxloading').hide(); // &lt;- Works here
                jQuery('#answerbox').html(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
        jQuery.colorbox({
            inline:true,
            href:'#answerbox',
            width:'500px',
            closeButton:false
        });
        return false;
    }
});
</code></pre>

<p>When i remove the "display:none" rule it shows of course and hides after the color box pops up (like it should). So what i'm doing wrong? Thanks in advance!</p>

<p>edit: I'm sorry for the confusion, <strong>the code is actually wrapped</strong> between jQuery(document).ready(function() { ... }); - it just contains a lot of JQuery Validation plugin methods, rules etc which shouldn't affect the issue i have.</p>