Question

here is a site i’m refering to:
http://www.graphicfirm.com/index.php

if you scroll down to the bottom and for example click on automotive while the pictures are being loaded you see a message that says searching…. and then when you click on a picture everything is kind of dimmed and you see the message loading…

how is this done with jquery/ajax?

correct me if im wrong but this is my best guess.

$.ajax({
       url: "ajax.php",
       type: "GET",
       dataType: "json",
       data: "attribute=myvalue",

        beforeSend: function()
        {

            $(".mymessage").show();
            //dim page
        },

        complete: function()
        {

            $(".mymessage").hide();
            //undim page
        },

        success: function(data)
        {

            //load data               

        }

});

if i got it right how would they be dimming the page?
if i got it wrong can you show me a sample?

thanks

Answer 1

That’s how you should do this:

$(".mymessage").show();
$.ajax({
       url: "ajax.php",
       type: "GET",
       dataType: "json",
       data: "attribute=myvalue",
        success: function(data)
        {
           $(".mymessage").hide();
           //load data
        }
});

Put $(".mymessage").show(); before ajax call and hide it right when the success occurs.