Question

I have a asp.net MVC3 web application in which i search for a certain criteria and display the search results in a grid, on click of the row in the grid i load the results in a new page. Meanwhile when i click on the row in the table i am displaying a loading image on the top of the table. I am displaying spinner on row selection.

function onRowSelected(e) {
    var grid = $(this).data('tGrid');
   // populate some data here
    $("#spinner").show();
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Search/GetResults",
        data: populate the data to be sent,
        dataType: "text json",
        success:
        function (data, textStatus) {
            if (data != "Success") {
                ShowError(data);
            }
            else {
                window.location.href = "/Search/Test/";
               }
        },
        error:
        function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Error Occured!");

        }

    });
}

and the code for spinner is:

<div id='spinner' style='display:none;'><center><img alt='' src='../../Images/loading.gif' title='Loading...' /><b>Loading...</b></center> </div>

My problem is, when the user selects one row and when the loading symbol is displayed, He is able to click on another row. I want to prevent the user from clicking or selecting anything on the page once the loading spinner is visible. Any help

UPDATE:

My problem is not with the loading image position.. i want it to display as an overlay or something of that sort so that the page behind will be grayed out and user can’t select anything

Answer 1

You can define a javascript variable, say bool_spinner, which is by default false but set to true when the spinner is shown, and gets set back to false after the data is loaded.

You can then test this variable inside your functions (like inside onRowSelected) to control what happens depending on the spinner’s state.

Then you can maybe use something like this (untested) to prevent other active HTML elements, (like links and form submit buttons) from reacting when you click on the page:

$("body").click(function(e) {
    if (bool_spinner) e.preventDefault();
}

EDIT: You can also check exactly what has been clicked if you need to, like this:

  var target = $(e.target);  
  if (target.is("#tGrid")) {
      etc.        
  }

UPDATE: Actually, you don’t even need to set a new script variable, you can just directly test the state of your spinner:

if ($('#spinner').is(':hidden')) { 
  etc. 
}