窗口上的微调器

I have a window that has a treeview with nodes and sub-nodes. When I copy the subnode/node and try to paste it to another node, the window tends to be unresponsive. And once the paste is completed, it refreshes the destination paste. This functionality takes place as below.

Now how can I show a spinner between copy and paste such that the window with treeview becomes faded and displays a spinner until paste completes. Any help is appreciated.

$.ajax({
    type: 'POST',
    url: '/test.aspx',
    data: data,
    success: function(result) {
        refresh(id);
        if (result != "SUCCESS") alert("Copy failed");
        else {
            alert("Successfully Copied");
        }
    }
});

You could use the ajaxSend and ajaxComplete for this - show it on send, remove it on complete.

Create an element with a spinner graphic background using your CSS, perhaps add some text etc to it...

$("#Loadstatus").bind("ajaxSend", function() {
    $(this).text(loadingMessage);
    $(this).show();
}).bind("ajaxComplete", function() {
    $(this).hide();
});

you could add an overlay, or fade, etc. to the target tree during the event...

One way to implement your required functionality is by using hidden <div> tags. You would need 2 divs to complete this:

• div with grey color & a high level of transparency that covers the area which you want to grey out while loading.
• div containing your spinning gif image.

Now when you are loading the section, flip the css visibility of both divs on, and when loading has completed, flip visibility back off.

~voila

$("#divProgress").html("<img src='yourImg.gif' alt='loading..' />").fadeIn(100,function(){

   $.ajax({
     type: 'POST',
     url: '/test.aspx',
     data: data,
     success: function(result) {
        $("#divProgress").fadeOut(300,function(){
              refresh(id); // not sure what this does!!! ...??
              if (result != "SUCCESS") 
              {
                 alert("Some error!");
              }
              else
              {
                 alert("Successfully Copied");
              }
        });
     }
  });

});

Assuming divProgress is the Div where you want to show the Loading image and your spinning image name is yourImg.gif. You may need to change the image path according to your scenario.