Question

My page have multiple dialog boxes. I’ve separate div sections defined for it. Per requirement, I’ve to disabled save button in dialog box till all required fields are not populated. Am able to disable it. The problem comes when I open other dialog box. Save button get disabled for those dialog boxes as well.

I can place script to enable button on dialog boxes which I don’t want do that. Do I’ve any other solution to resolve this problem?

Mypage.cshtml

<div id="MyDialg" title="Dialog 1">
</div>

<input id="btnMy" type="button" value="Dialog1" />

MyJs.JS

$('#MyDialg').dialog({
    autoOpen: false,
    width: 400,
    height: 350,
    modal: true,
    resizable: false,
    buttons: {
        "Cancel": function () { $(this).dialog("close"); },
        "Save": function () {
        }
    }
});

$("#btnMy").button().live("click", function () {
    var diag = $('#MyDialg');
    diag.load("Action/Controller", '', function () {
    });

    $(diag).dialog('open');
    return false;
});

Am using below line on load to disable ‘save’ button on dialog:

_MyDialog.cshtml

    $(".ui-dialog-buttonpane button:contains('Save')").button("enable");

Source code (one of dialog html)

<DIV class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" jQuery17205878367688005092="61" sizcache04606232417093721="71" sizset="0"><SPAN id=ui-dialog-title-MyDialg1 class=ui-dialog-title jQuery17205878367688005092="62">MyDialg title</SPAN><A class="ui-dialog-titlebar-close ui-corner-all" role=button href="#" jQuery17205878367688005092="60"><SPAN class="ui-icon ui-icon-closethick" jQuery17205878367688005092="63">close</SPAN></A></DIV> 
<DIV style="MIN-HEIGHT: 0px; WIDTH: auto; HEIGHT: 247px" id=MyDialg1 class="ui-dialog-content ui-widget-content" jQuery17205878367688005092="58" scrolltop="0" scrollleft="0">
<FORM id=form1 method=post action=/action1/controllername jQuery17205878367688005092="172" novalidate="novalidate" data-ajax-success="showSuccessMessage" data-ajax-method="POST" data-ajax="true" data-ajax-failure="showErrorMesage">
<BR>
<DIV class=field><LABEL for=Name>Description: </LABEL><SUP class=mandatory>*</SUP> <INPUT id=Name class="text-box single-line" type=text name=Name> <BR><SPAN class=field-validation-valid data-valmsg-replace="true" data-valmsg-for="Name"></SPAN></DIV><BR><BR>
<HR>
<BR>
</FORM><BR></DIV>
<DIV class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" sizcache04606232417093721="71" sizset="1">
<DIV class=ui-dialog-buttonset sizcache04606232417093721="71" sizset="1"><BUTTON aria-disabled=false class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role=button type=button jQuery17205878367688005092="64"><SPAN class=ui-button-text>Cancel</SPAN></BUTTON><BUTTON aria-disabled=true class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" role=button disabled type=button jQuery17205878367688005092="65"><SPAN class=ui-button-text>Save</SPAN></BUTTON></DIV></DIV>

Answer 1

You can target the specific button by using your dialog ID as your starting point. Since I think you what you have in your code above is specific to the dialog you want to enable/disable the button. You can use the following code to find the specific ‘save’ button which will not affect your other dialogs

$('#MyDialg').find('button:contains("Save")').button('disable');
$('#MyDialg').find('button:contains("Save")').button('enable');

EDIT:

There’s 2 ways you can do this. You can traverse your current structure to find it using the following

1. start from your dialog id
2. find the main dialog
3. find span containing the save button text
4. get the button container and disable it

the code

$('#MyDialg').closest('div.ui-dialog').find('span.ui-button-text:contains("Save")').closest('.ui-button').button('disable');

http://jsfiddle.net/wirey00/zDUQX/

Or you can give your button an id

buttons: {
    "Cancel": function () { $(this).dialog("close"); },
    "Save": {
        text: 'Save', // <-- text to show
        id: 'test',  // <-- this sets the id to TEST
        click: function () {
              // code here
        }
    }

then just use the id to disable it

$('#test').button('disable');

http://jsfiddle.net/wirey00/zf9Wp/