CODEWITHSUNDEEP
jquerydialog
dorich
dorich

Reputation: 1089

How To Empty a Div On closing a dialog

Scenario I have a Dialog created by jquery UI dialog. It opens on a click with a form, form is submitted on a click. Feedback appears below the form announcing success. Before closing the dialog I want to remove the success message so that it doesn't appear the next time the dialog/form opens. Note: Its likely that the dialog/form will be opened several times without reloading the page. The process works up to the point of removing the success message.

My Attempted Solution I added the following line to my dialog script. I believe the syntax is correct but adding this line breaks the script. 

beforeClose: function (event ui) {
    $("div#output1").empty();
                      },

Full Dialog Script

$(document).ready(function() {
$('#target a').each(function() {
    var cancel = function() {
        $dialog.dialog('close');
    };
    var $link = $(this);
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            title: $link.attr('title'),
            width: 700,
            height: 800,
            modal:  true,
            buttons: { "Ok": cancel, "Cancel": cancel},
            beforeClose: function (event ui) {
                $("div#output1").empty();
        },
            open:   function (event,ui) {
                $("input[name='url']").val(pageAddress);
                }
        });

    $link.click(function() {
        $dialog.dialog('open');
        $( "#accordion" ).accordion({
            collapsible: true,
            active: false
        });
        return false;
    });
    });
});

Looking at other examples I appear to have the structure of the statement correct but I'd appreciate any pointers as to why this approach breaks my script.

Thanks.

Upvotes: 1

Views: 5591

Answers (2)

Niklas
Niklas

Reputation: 29992

You got invalid syntax there. Add the comma between event and ui in beforeClose: function (event ui) {

beforeClose: function (event, ui) {
    $("div#output1").empty();
                      },

working fine: http://jsfiddle.net/niklasvh/8DD9L/

Upvotes: 4

Dan
Dan

Reputation: 3870

you can use $("div#output1").html(""); to empty the div. - this will still keep it in the DOM though...

Upvotes: 2

Related Questions