Question

I use jquery ui tabs with conten via Ajax. In content1.html have a dialog and a button.
When I select “Ajax tab1”, click “Open” button to open dlg_set_awd dialog, close this dialog, I select another tab, and then select “Ajax tab1” again, click “Open” button there are two dialog opened with the same ID. How can I clear the dialog when I select another tab?

My code below:

Tab file :

</script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    </script>

HTML :

<div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
            <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
        </ul>
        <div id="tabs-1">
            <p>ABC</p>
        </div>
    </div>
</div><!-- End demo -->

content1.html

    <script type="text/javascript">
        $(document).ready(function(){
            $('#dlg_set_awd').dialog({
                autoOpen: false,
                height: 100,
                width: 400,
                modal: true,
                buttons: {
                    'Save': function () {

                    },
                    Cancel: function () {
                        $('#dlg_set_awd').dialog('close');
                    }
                },
                close: function () {
                }
            });

            $('#open').click(function(){
                $('#dlg_set_awd').dialog('open');   
            });
        });
    </script>

HTML :

<form id="form1">
<table id='dlg_set_awd' title="Set ward for participant">
    <tr>
        <td  width="400px" style=" vertical-align:top;">
            <div style="float:left; width:90px; padding-right:11px;">
                <div style="width:90px;" class="id1">First name</div>
                <input type='text' id="first_name" style="width:90px" class="ui-widget-content" />
            </div>
            <div style="width:90px; float:left; padding-right:11px;">
                <div style="width:90px;" class="id1">Last name</div>
                <input type='text' id="last_name" style="width:90px" class="ui-widget-content" />
            </div>
        </td>
    </tr>
</table>
<button id='open' type="button">Open dialog</button>
</form>

Answer 1

Use this code for binding the click event:

    $('#open').unbind('click.myNameSpace').bind("click.myNameSpace", function() {
        if($('#dlg_set_awd').dialog('isOpen')!='true')
        {
            $('#dlg_set_awd').dialog('open');
        }
    });