CODEWITHSUNDEEP
jquery
Exploit
Exploit

Reputation: 6386

how to use image loader with $.get

how to use image loader with $.get when im doing ajax calls with $.get sometimes it takes a few seconds for the effect to take place. how can i put a loader so that the user knows to wait until the data is loaded?

thanks

edit:

$.ajax({
    url: 'ajax.php',
    type: 'GET',
    dataType: 'json',
    data: 'shipping=' + sval,
    onBeforeSend: function()
    {
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html("<img src='images/spinner.gif'>");
    },

    complete: function()
    {

    },

    success: function(out)
    {
        getShippingPrice = out.shippingPrice;
        getTotalPrice = out.cartTotal;
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
        $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
    }
});

edit2:

<script type="text/javascript">

var getShippingPrice;
var getTotalPrice;

$(document).ready(function() {
    $(".shipmethod").change(function() {
        sVal = $(this).val();
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "json",
            data: "shipping=" + sVal,

            beforeSend: function()
            {
                $('.ajaxSpinner').show();
            },

            complete: function()
            {
                $('.ajaxSpinner').hide();
            },

            success: function(out)
            {
                getShippingPrice = out.shippingPrice;
                getTotalPrice = out.cartTotal;
                $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
                $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
            }
        });
    });
});

</script>

Upvotes: 1

Views: 4116

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038780

You have two possibilities.

Either use the full $.ajax() method which provides you more power:

$.ajax({
    url: '/foo.cgi',
    type: 'GET',
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    },
    success: function(result) {
        // TODO: handle the results
    }
});

or use the $.ajaxSetup() method to provide global setup hooks for all ajax requests:

$.ajaxSetup({
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    }
});

and then do your $.get() as usual:

$.get('/foo.cgi', function(result) {
    // TODO: handle the results
});

Upvotes: 7

Related Questions