I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box. Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box. How can i achieve this ?

I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box. Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box. How can i achieve this ?

• javascript

• 1 You're getting a lot of jQuery answers, but I don't see any indication in this (or previous) questions that you use jQuery. Am I mistaken? – user1106925 Commented Feb 5, 2012 at 20:07

6 Answers 6

You can use blockui jquery plugin from here. Call blockUI before making ajax call and unblockUI in your ajax callback.

@linusunis fed,

If you want to prevent the user from clicking on anything I suggest overlaying a div element & maybe making it semi-transparent. Below is CSS for the div & jQuery code to animate displaying the screen overlay and removing the screen overlay. Just call "block_screen" when you make your call & "unblock_screen" after you received the data & placed your new div on the page. This is just off the top of my head so you may need to double check for errors but it looks good to me.

You need to include jQuery on the page for this to work. Download it here: http://code.jquery.com/jquery-1.7.1.min.js

<style type="text/css">
.blockDiv {
  position: absolute:
  top: 0px;
  left: 0px;
  background-color: #FFF;
  width: 0px;
  height: 0px;
  z-index: 10;
}
</style>

<script type="text/javascript" language="javascript">

function block_screen() {
  $('<div id="screenBlock"></div>').appendTo('body');
  $('#screenBlock').css( { opacity: 0, width: $(document).width(), height: $(document).height() } );
  $('#screenBlock').addClass('blockDiv');
  $('#screenBlock').animate({opacity: 0.7}, 200);
}

function unblock_screen() {
  $('#screenBlock').animate({opacity: 0}, 200, function() {
      $('#screenBlock').remove();
  });
}

</script>

I would use Jquery and Jquery UI. Jquery UI provides a modal dialog in which you could place a loading message that will keep the user from clicking elsewhere on the screen.

http://jqueryui.com/demos/dialog/#modal

If you actually want to block the UI, just make the AJAX request synchronous.

Just use a boolean flag, which until is set (on receiving content), you lock the functionality. And once this flag is set, proceed further. Assuming you do have control over those functions.

you can use a div, along with z-index, opacity and cursor styling. although I don't know you application, blocking the entire page doesn't sound like a great user experience to me. perhaps you could place the div only over the affected area of the page