Добавить кнопку в диалоге JQuery в нижнюю панель диалога - PullRequest
0 голосов
/ 27 января 2011

Итак, сейчас у нас есть диалоговое окно JQuery UI, которое выглядит так:

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

Это отлично работает. Однако, ВНУТРИ диалогового окна JQuery у нас есть этот 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>

Видите, что кнопка id = "saveTemplateButton"? Мы хотим, чтобы ЭТО располагалось прямо рядом с кнопкой «Отмена» в нижней панели диалогового окна JQuery. Я попробовал кучу дерьма, но не смог заставить его работать. Как я могу это сделать?

1 Ответ

0 голосов
/ 27 января 2011

Это сработало.Я перепутал синтаксис в первый раз.

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