CODEWITHSUNDEEP
jqueryajax
user2696785
user2696785

Reputation: 133

Ajax beforeSend function doesn't seem to work

I have a form to send a small textfile to the server where it's data is processed with PHP. 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 (span#ajaxloading) doesn't appear for some reason.

HTML:

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

jQuery:

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

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!

edit: I'm sorry for the confusion, the code is actually wrapped 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.

Upvotes: 4

Views: 17004

Answers (4)

Celalettin Binal
Celalettin Binal

Reputation: 114

try deleting the following line

async: false,

Upvotes: 6

Xavr
Xavr

Reputation: 239

Try to wrap your click function:

$(document).ready(function() {
    $("#fixit").click(function() {
        ...
    });
});

Upvotes: 0

PeterS
PeterS

Reputation: 2954

I found your code was fine, form wasn't defined in the snippet, but beforeSend is working here:

Works for me

Like the other answers I had to wrap it in a document.ready, but that may have already been done outside your snippet?

    var formData = new FormData(jQuery('#ajastaja')[0]);
    jQuery.ajax({
        beforeSend: function(){
          console.log('beforeSend')
            jQuery('#ajaxloading').show(); // <- Not working!
        },
        url: '/path/to/my.php',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            jQuery('#ajaxloading').hide(); // <- Works here
            jQuery('#answerbox').html(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

Upvotes: 0

Lokesh_Ram
Lokesh_Ram

Reputation: 391

If beforeSend function is not working try calling your click function this way..

Jquery:

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

Upvotes: 1

Related Questions