BlockUI plugin and AJAX post, get returned HTML as the message overlay

BlockUI plugin and AJAX post, get returned HTML as the message overlay

    Hi guys

I'm working on a new project and I've got my forms all AJAXed up and working well in combination with the BlockUI plugin giving excellent user feedback.


Here's my jquery code:

   
    
    
  1.   // ORDER FORM SUBMIT
     $('#order_form').submit(function() {

     $('#order_form_wrapper').block({ 
     message: '<span class="h3 ajax_loading">Please wait...</span>', 
     css: { border: '5px solid #ededed', padding : '15px' }, 
     overlayCSS: { backgroundColor: '#fff' }
     });

     $.post('/order_ajax.php', $('#order_form').serialize(), function(data){
     if (data.indexOf("box_success") != -1) {
     $('#order_form_wrapper').fadeOut('fast', function(){ $(this).html(data) }).unblock().fadeIn('slow');
     } else {
     // ERROR
     $('#ajax_error').fadeIn('slow').html(data);
     $('#order_form_wrapper').unblock();
     }
     });

     return false;
     });



















    2.
    // ORDER FORM SUBMIT
     $('#order_form').submit(function() {

        $('#order_form_wrapper').block({
            message: '<span class="h3 ajax_loading">Please wait...</span>',
            css: { border: '5px solid #ededed', padding : '15px' },
            overlayCSS: { backgroundColor: '#fff' }
        });

        $.post('/order_ajax.php', $('#order_form').serialize(), function(data){
            if (data.indexOf("box_success") != -1) {
                $('#order_form_wrapper').fadeOut('fast', function(){ $(this).html(data) }).unblock().fadeIn('slow');
            } else {
                // ERROR
                $('#ajax_error').fadeIn('slow').html(data);
                $('#order_form_wrapper').unblock();
            }
        });

        return false;
    });




















At the moment what happens is the user clicks submit, the ui gets blocked and a "please wait" message pops up.

If the HTML returned from the AJAX contains the word "box_success" then the contents of my order_form_wrapper is replaced with the returned HTML. Otherwise there's been an error and the error message is faded in to a div above the form.


However what would be great is if there's an error, I could change the blockUI message to be the HTML code returned from the AJAX post.


Anyone know how to do that?

This is all with jQuery 1.3.2 BTW

Thanks, B