views:

59

answers:

0

I fill the content of a div with $.get and show it with dialog('open')
the first time inside the dialog everything works as expected
( inside I have other dialogs, with jquery.form .ajaxForm inside of them )

but after I close the dialog and open it again some things don't work

<script type="text/javascript">
        $(function() {
            $("#bidialog").dialog({
                resizable: true,
                height: 500,
                width: 700,
                modal: true,
                autoOpen: false,
                buttons: { 'Cancel': function() { $(this).dialog('close'); } }
            }); // end dialog
        }); //end document ready

        $(function() {
            $("#bopen").click(function() {
//calling here $("#bcdialog").remove() helps
            $.get(
                '<%=Url.Action("Index","Bank") %>',
                function(data) { $("#bidialog").html(data).dialog('open'); }
                );
            });
        });

    </script>

    <div id="bidialog" title="the dialog">
        first content
    </div>
    <button id="bopen">
        openit</button>

on the inside I have something like this:

 $("#bcdialog").dialog({
        resizable: true,
        height: 300,
        width: 650,
        modal: true,
        autoOpen: false,
        buttons: {
            'Cancel': function() { $(this).dialog('close'); },
            'Save': function() { $("form", this).submit(); }
        }
    });

    $("#create").click(function() {
        $.get(
        '<%=Url.Action("Create", "Bank") %>',
         function(data) {
             $("#bcdialog").html(data);
             $("#bcdialog form").ajaxForm({
                 beforeSubmit: function() {
                     v = $("#bcdialog form").validate();
                     return v.valid();
                 },
                 success: postSubmitCallback,  // post-submit callback
                 resetForm: true        // reset the form after successful submit
             });
             $("#bcdialog").dialog('open');
         })
    });

    function postSubmitCallback(result) {
        if (result == "ok")
            $('#bcdialog').dialog('close');
        else {
            $('#bcdialog').html(result);
            $("#bcdialog form").ajaxForm({
                beforeSubmit: function() {
                    v = $("#bcdialog form").validate();
                    return v.valid();
                },
                success: postSubmitCallback,  // post-submit callback
                resetForm: true        // reset the form after successful submit
            });
        }

    }  

after closing and reopening the main dialog the second dialog is not going to close, although it submits the form, and if I get a html result from server (not content "ok"), the result is not being set into the div

UPDATE: found a fix, it works if I call $("#bcdialog").remove() each time before filling the content of the div