Question

I have created 4 jQuery Dialog’s like below shows:

    <div id="addCustomer" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>
    <a href="#" id="close">Close</a>
</div>
<div id="editCustomer" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>
    <a href="#" id="editClose">Close</a>
</div>
<div id="deleteCustomer" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 
    <a href="#" id="addDeviceClose">Close</a>
</div> 

And I have set them to be hidden to begin with in the page start like this:

$("#addCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#deleteCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#addDevice").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#editCustomer").dialog({
        autoOpen: false,
        draggable: true
    });

Now I am trying to call each from an option on a context menu, as below demonstrates, but when I try, the first dialog box I choose to open, opens fine, but once that is closed, no dialog box will open again on the page.

if (e.item.name == "itmAddCustomer") {
        $(function() {
            $("#addCustomer").dialog("open");            
        });            
    }

I have only shown one example of the menu buttons here, but you get the gist.

Can someone please tell me how to resolve this?

Cheers

UPDATE: Here is the code for the context menu in relation to the answer below:

<div id="popupMenu" style="z-index:19998;display:none;">
        <div class="dxm-popupMain dxm-shadow dxm-popup">
            <ul class="dx dxm-noImages dxm-gutter">
                <li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Expand
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Enable
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Edit Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Delete Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Device
                </div><b class="dx-clear"></b></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

It turns out that to fix this issue, All I needed to do was update from jQuery-Ui 1.8.11 to jQuery-ui 1.9.0, and all the issues just disappeared.

Thanks for your help.