Question

I am using the following code to open a dialog box:

<li>
     <input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>

<div id="dialog"> 
    </div>
    <script type="text/javascript"> 
      //<![CDATA[
        $(document).ready(function () {
                $('#dialog').dialog({
                autoOpen: false,
                modal: true,
                height: 525,
                resizable: false,
                width: 600,
                dialogClass: 'timer'
            });
        });
      //]]>
    </script> 
</div>

In my .js file:

function showPreview(action, id) {
    $.get("/Manage/Account/" + action + "/" + id, function (data) {
        $("#dialog").html(data);
        $('#dialog').dialog('open');
        $('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
        $("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
    });

I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?

This is in the dialogbox-view:

 <div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div> 

Answer 1

I don’t see any dialog closing anywhere, you can close your dialog with this function:

$('#dialog').dialog('close');

More about it: jQueryUI dialog

Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.