Combing jquery dialog & jGrowl

Question

I have a page that confirms an action using jquery dialog and after the action is executed, the code will initiate the closing of the dialog and goes to back to the portal. While my backend will handle the action made, i would like to notify the user using jGrowl's unobtrusive notification to inform them that the action was unsuccessful. However, using the following codes, the jGrowl did not manage to execute and appear after the dialog box closes. (my imports are already done at this stage) Where should i place the code?

    $("#pop").click(function(){
        $( "#dialog-confirm" ).dialog( "open" );
        return false;
    });

    $( "#dialog-confirm" ).dialog({         
        autoOpen: false,
        resizable: false,
        height:200,

        modal: true,
        buttons: {
            "Drop": function() {
                //ajax
                var checkbox = $("#repost").val();

                $( this ).dialog( "close" );
                $.jGrowl('ACTION SUCCESSFUL!');

            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }


    });

score 1 · Answer 1 · answered Feb 20 '11 at 11:47

You can use jGrowl's beforeClose event combined with a timer.

$.jGrowl('ACTION SUCCESSFUL!', { 
    life: 1000, 
    beforeClose: function(e,m) {
    $( "#dialog-confirm" ).dialog( "close" );
        }
});

jGrowl's notification should last 1000 milliseconds and then close the dialog. I haven't tested it but it should work.

UPDATE: I forgot to mention that your DROP event should't close the dialog. It should look something like this:

$("#pop").click(function(){
    $( "#dialog-confirm" ).dialog( "open" );
    return false;
});

$( "#dialog-confirm" ).dialog({         
    autoOpen: false,
    resizable: false,
    height:200,

    modal: true,
    buttons: {
        "Drop": function() {
            //ajax
            var checkbox = $("#repost").val();

            // $( this ).dialog( "close" );
    $.jGrowl('ACTION SUCCESSFUL!', { 
        life: 1000, 
        beforeClose: function(e,m) {
        $( "#dialog-confirm" ).dialog( "close" );
            }
    });

        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }


});

Combing jquery dialog & jGrowl

1 Answers1