Jquery $.unblockUI(); should execute before alert is displayed on ajax success.

hi,
i need to display processing message, i using blockui of jquery,everthing is working file except when the ajax call is successful alert is displayed at the same time processing is also displayed,wht i need is processing should be closed and alert should be displayed.

function SubmitFrm() {
	 {
		$.ajax({
			type : 'post',
			url : 'testsubmit',
			data : $('#registerform').serialize(),
			async : false,
			dataType : "text",
			beforeSend : function() {
				$.blockUI({ message: '<h1><img src="../img/loading.gif" /> Processing...</h1>'}); 
			},
			complete : function() {
				$.unblockUI();
			},
			success : function(data) {
			$.unblockUI();
				alert(data);
				
			},
			error : function(data) {
				// check status && error
			}

		});
	}

Open in new window

RockingAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (Aidellio)Commented:
Here is a demo working:http://jsbin.com/femihobi/2/edit?html,js,console

To get it to work in the demo, I've changed a few variables that should work when changed back to your environment.

I changed "POST" TO "GET" as jsbin didn't allow for POST but it shouldn't matter
I changed the url to one I could test with

async however should stay as true

function SubmitFrm() {
    $.ajax({
      type : 'GET',
      url : '/rimow/1',
      data : $('#registerform').serialize(),
      async : true,
      dataType : "text",
      beforeSend : function() {
        $.blockUI({ 
          timeout: 0,
          message: '<h1><img src="../img/loading.gif" /> Processing...</h1>'
        }); 
      },
      complete : function() {
        //$.unblockUI();
      },
      success : function(data) {
        $.blockUI({
          onUnblock: function() {
            alert(data);
          }
        });
        $.unblockUI();
      },
      error : function(data) {
        // check status && error
        console.log("error");
        console.dir(data);
      }

    });
}

SubmitFrm();

Open in new window

0
 
David S.Commented:
You can use setTimeout() to delay the alert long enough for the UI to be unblocked.
			success : function(data) {
				$.unblockUI();
				setTimeout(function(){
					alert(data);
				},50);				
			},

Open in new window

0
 
RobOwner (Aidellio)Commented:
You've also set async to false.  This should be set to true as indicated on the documentation page: http://malsup.com/jquery/block/
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Albert Van HalenAnalyst developerCommented:
The unblockUI method has a callback method : onUnblock. Provide this as an option when calling unblockUI.
$.unblockUI( { onUnblock: function(data) { alert(data); }} );

Open in new window

0
 
RockingAuthor Commented:
@AlbertVanHalen
success : function(data) {
                  $.unblockUI( { onUnblock: function(data) { alert(data); }} )
                  },
Altert does not gets displayed.
0
 
David S.Commented:
The unblockUI method has a callback method : onUnblock. Provide this as an option when calling unblockUI.
Ah. Yeah, that would be better than using setTimeout().
0
 
RobOwner (Aidellio)Commented:
Both the block and unblock have the same options but the scope is important, which is why the onUnblock must be defined in the success function to have access to the data object
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.