Postback after effect has completed in jQuery dialog

Question

I have a jQuery dialog. Now what it does is actually adding a new item to my cart, and it gives the puff effect on clicking create button and puffs off the dialog. Now what I want is to post back the page in asp.net after the particular effect has been completed

In short what I want is ... until the effect is completed there should be no post back. As soon as the effect of puff is finished the page should immediately postback. How can I achieve this?

The code for the dialog is this

$.fx.speeds._default = 1000;

$('[id*="dialog"]').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    show: "blind",
    hide: "puff",
    buttons: {
        'Create': function() {
            Materials.material_id = $('[id*="txtMaterialName"]').val();
            Materials.quantity_type = $('[id*="txtQuantity"]').val();
            AddNewItem(Materials);
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});

So after the animation off puff is over on closing the dialog, the page should postback.

Note: the page shouldn't post back at all until the effect is over.

Answer 1

You should be able to do what you need using the close callback:

$('[id*="dialog"]').dialog({
    // existing stuff...
    close: function() {
        // Trigger your postback here, this will be called
        // after the dialog has been closed.
    }
});

Here's a stripped down example: http://jsfiddle.net/ambiguous/Seuek/

There's no CSS in the above so the dialog looks rather ugly but it is sufficient to demonstrate the effect.