Question

So right now we have a JQuery UI dialog that looks like this:

$(id).dialog({
    modal: true,
    resizable: false,
    title: title,
    width:350,
    height:height,
    autoOpen: false,
    buttons: { "Cancel": function() { $(this).dialog("close"); } }
});

This works fine. However, INSIDE the JQuery dialog we have this div:

<div id="SaveTemplateDialog">
    <table width="100%">
        <tr class="templatesExist">
            <td colspan="2">
                <%= Html.RadioButton("SaveNewTemplate", true, true, new { onclick = "SetSaveTemplateDisplay();", createnewtemplate = true })%>Create
                    new template
            </td>
        </tr>
        <tr class="newtemplate">
            <td>
                &nbsp; &nbsp; &nbsp;
            </td>
            <td>
                Template name:
                <input type="text" id="NewTemplateName" onchange="ValidateTemplateName();" /><span                           nonstdvalidatorfor="NewTemplateName" message="Template name is a required field."><img
                            class="validation" src="<%= VirtualPathUtility.ToAbsolute("~/img/exclamation.gif")%>" /></span>
            </td>
        </tr>
        <tr class="templatesExist">
            <td colspan="2">
                <%= Html.RadioButton("SaveNewTemplate", false, false, new { onclick = "SetSaveTemplateDisplay();" })%>Overwrite
                    existing template
            </td>
        </tr>
        <tr class="overwritetemplate templatesExist">
            <td>
                &nbsp; &nbsp; &nbsp;
            </td>
            <td>
                <%= Html.DropDownList("ExistingTemplate", Chatham.Web.Models.Indications.DropDownData.AllEditableTemplates())%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <div style="text-align: center; cursor: pointer;" id="saveTemplateButton">
                    <img src="<%= VirtualPathUtility.ToAbsolute("~/img/btn_form_save_template_off.GIF")%>" />
                </div>
                <div style="text-align: center; cursor: pointer;" id="saveTemplateValidation">
                    Please correct all validation before Saving
                </div>
            </td>
        </tr>
    </table>
</div>

See that id=”saveTemplateButton” button? We want THAT to sit right next to the ‘Cancel’ button on the bottom bar of the JQuery dialog. I tried a bunch of crap but couldn’t get it to work. How can I do this?

Answer 1

This worked. I messed up the syntax the first time.

buttons: {
                    "Save Template": function() 
                        { 
                            if ($('#saveTemplateValidation').is(":visible"))
                            {
                                alert('Please correct validation errors before saving.');
                            }
                            else {
                                SaveTemplate();
                            }
                        }, 
                    "Cancel": function() 
                        { 
                            $(this).dialog("close"); 
                        } 
                }