jquery ui dialog doesn't call $.get inside dialog afeter first close of the dialog

Question

I have a jquery ui dialog and inside of it I have another one
and before opening the one on the inside I call $.get to receive the html for it

if I open the first dialog and close it then open it again and try to open the dialog on the inside the html received from $.get doesn't get set

---

page1

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

        function openit() {
            $.get('<%=Url.Action("Index", "Bank") %>', function(data) { $("#bidialog").html(data); })
            $("#bidialog").dialog('open');
        }

        $(function() { $("#bopen").click(openit); });

    </script>

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

---

page2

<script type="text/javascript">
    $(function() {
        $("#bcdialog").dialog({
            resizable: true,
            height: 400,
            width: 600,
            modal: true,
            autoOpen: false,
            buttons: { 'Anuleaza': function() { $(this).dialog('close'); } }
        });
    });

    $(function() {
        $("#create").click(createBank);
    });

    function createBank() {        
        $.get('<%=Url.Action("Create", "Bank") %>', function(data) { $("#bcdialog").html(data); })
        $('#bcdialog').dialog('open');
    }


</script>

<div id="bcdialog" style="display:none;" title="create bank">
    first content
</div>

<button class="ui-state-default ui-corner-all" id="create">
    <span class="ui-icon ui-icon-circle-plus fl"></span>Adauga</button>

Answer 1

If page2 is being loaded on document ready - during the first get: '<%=Url.Action("Index", "Bank") %>' - via ajax, then the document.ready methods of page2 would never get called (since the document is already ready).

FYI - The passing a function to jQuery $(function(){}); is the same as $(document).ready(function(){});

To get that code to execute, simply remove the jQuery wrapper since the code will get executed when it is loaded into the dom via the ajax call.

You can wrap the whole thing in an anonymous function if you need encapsulation:

(function () {
     $("#bcdialog").dialog({
        resizable: true,
        height: 400,
        width: 600,
        modal: true,
        autoOpen: false,
        buttons: { 'Anuleaza': function() { $(this).dialog('close'); } }
    });

    $("#create").click(createBank);

    function createBank() {        
        $.get('', function(data) { $("#bcdialog").html(data); })
        $('#bcdialog').dialog('open');
    }
});

Also, not sure of the big picture here, but you may want to consider using the 'live' jQuery events since they loosely bind to the selectors and will work even if the elements are removed and then added back to the dom.

$("#create").live("click" createBank);