Line of code before AJAX request not working

Question

Say I have something like this:

$('button').live({
    click: function() {
        $('body').css('cursor', 'wait');
        var value = 1;
        $.ajax({
            type: 'GET',
            url: 'http://www.domain.com/site/index.php/controller/function',
            dataType: 'json',
            cache: false,
            async: false,
            data: { variable: value },
            success: function(data, textStatus, jqXHR) { // },
            error: function(jqXHR, textStatus, errorThrown) { // }
        });
        $('body').css('cursor', 'default');
    }
});

I'm trying to change the cursor because the AJAX request takes a few minutes to return a response, and I need the user not to think his browser crashed or something like that. The thing is that the line in this code supposed to do that does not work.

Any ideas?

Side note: There are no problems with the AJAX request, everything works fine

score 1 · Answer 1 · answered Apr 04 '13 at 13:18

I ended up with this:

$('button').live({
    click: function() {
        console.log('change cursor...')
        $('body').css('cursor', 'wait');
        console.log('cursor changed, wait 1 second...')
        setTimeout(function() {
            console.log('make ajax request...')
            $.ajax({
                type: 'GET',
                url: 'http://www.domain.com/site/index.php/controller/function',
                async: false,
                success: function(data, textStatus, jqXHR) {
                    console.log('change cursor back...')
                    $('body').css('cursor', 'default');
                },
                error: function(jqXHR, textStatus, errorThrown) { // }
            });
        }, 1000);
    }
});

Tested and working

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

You can try this per the accepted answer to this question.

$('body').ajaxStart(function() {
    $(this).css({'cursor':'wait'})
}).ajaxStop(function() {
    $(this).css({'cursor':'default'})
});

The cursor will be changed for any AJAX calls on the page.

edited May 23 '17 at 12:13

Community

1
1

answered Apr 03 '13 at 20:38

Miguel-F

13,450
6
38
63

It looks like it should work like a charm, but it didn't. I added this at the very beginning of my $(document).ready() function, but nothing happens when AJAX requests are made – José Romero Apr 04 '13 at 12:43

score 0 · Answer 3 · answered May 24 '18 at 10:28

0

Setting async : true worked for me.

answered May 24 '18 at 10:28

davneetnarang

436
1
4
15

score 0 · Answer 4 · answered May 24 '18 at 11:09

Your request is sync so it is blocking the browser for a while - and you might not see the cursor change. So I have changed it to async. But the cursor needs to be reverted to previous state after the request. Here is the final code:

$('button').live({
    click: function() {
        $('body').css('cursor', 'wait');
        var value = 1;
        $.ajax({
            type: 'GET',
            url: 'url_here',
            dataType: 'json',
            cache: false,
            async: true,
            data: { variable: value },
            success: function(data, textStatus, jqXHR) { // },
            error: function(jqXHR, textStatus, errorThrown) { // },
            always: function () {
                $('body').css('cursor', 'default');
            }
        });
    }
});

Line of code before AJAX request not working

4 Answers4