Disable jquery ui dialog button with a condition

Question

i have an if condition that disables the dialog button 'proceed' if it is false. This is how i type it:

if (!goodtogo){
    $(".ui-dialog-buttonpane button:contains('Proceed')").button("disable");
}

Some how it doesnt disable the dialog button onclick. What should i do?

Codes that create button:

$("#dialog-rate").dialog({
   /*open: function (event, ui) {$(".ui-dialog-buttonpane button:contains('Proceed')")
   .button("disable"); },  */
   autoOpen: false,
   resizable: false,
   height: 200,
   width: 200,        
   modal: true,
   buttons: {
          "Proceed": function(){
                 //redirect to paypal for escrow.
                        window.location.replace("{{ domain_url }}/workroom/accept/{{ i.iter.key.id }}/" + rating);
                        $(this).dialog("close");

                 }              
          }
   });

There is a much cleaner solution at this link: http://stackoverflow.com/a/4279852 — , Feb 23 '12 at 23:49

Alnitak · Accepted Answer · 2011-03-18T07:09:22.297

2

First, check that your selector actually picks the right button:

if (!goodtogo) {
    var button = $(".ui-dialog-buttonpane button:contains('Proceed')");
    console.log(button);
    $(button).button("disable");
}

The chances are that your selector is not finding the right element to disable, in which case the console will log []. If so, post your markup and/or the code that creates the button.

edited Mar 18 '11 at 07:09

answered Mar 17 '11 at 15:23

Alnitak

334,560
70
407
495

I didn't post a solution, I posted a diagnostic test. What was the result of it? – Alnitak Mar 17 '11 at 17:53
here's the edited version..i cannot use your code to test, my page has errors when i used that. – pivotal developer Mar 18 '11 at 01:26
I modified my snippet to make it clearer where it should go relative to your current code. – Alnitak Mar 18 '11 at 07:11
Try calling `.button('refresh')` too – Alnitak Mar 19 '11 at 08:35

score 1 · Answer 2 · answered May 31 '12 at 11:45

Ajax wait indicator in jquery dialogs

I had a similar problem where I wanted to display an ajax wait indicator in jquery dialogs. I come up with an extension for the dialog widget. The extension creates an additional dialog method "busy" which can be called to disable and enable a dialog. This method also blocks all inputs inside the dialog content area.

Extension:

$.extend($.ui.dialog.prototype, {
    busy: function (isBusy) {

        var dialogContent = $(this.element);
        if (isBusy) {
            $(dialogContent).find("input, textarea, select").blur();
        }

        if (this.blockedState === isBusy)
            return;

        this.blockedState = isBusy;

        var buttonPane = $(this.uiDialog).find(".ui-dialog-buttonpane");
        var buttons = $(buttonPane).find("button");

        if (isBusy) {
            $(buttons).addClass("ui-state-disabled").attr("disabled", "disabled");

            $(buttonPane).append($("<div class='ui-dialog-indicator'/>"));
            $(dialogContent).append($("<div class='ui-dialog-blocked'/>"));
        }
        else {
            buttons.removeClass("ui-state-disabled").removeAttr("disabled");

            $(buttonPane).find(".ui-dialog-indicator").remove();
            $(dialogContent).find(".ui-dialog-blocked").remove();
        }
    }
});

CSS:

.ui-dialog-blocked
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.ui-dialog-indicator {
    background: white url(../Images/jquery-ui/ui-anim_basic_16x16.gif) right center no-repeat;
    width: 16px;
    height: 16px;
}

Example:

$("#myid").dialog({                                                                   
    modal: true,                                                                              
    position: "center",                                                                       
    resizable: false,                                                                         
    width: "auto",
    context: this,                                                                            
    buttons: {                                                                                
        "Add": function () {                                                                  
            $(this).dialog("busy", true);                                               
            $.ajax({
               ...
               complete: function () {
                   $(this).dialog("busy", false);                                               
               }

        },                                                                                    
        "Close": function () { $(this).dialog("close"); }                                     
    }                                                                                         
});

score 0 · Answer 3 · answered Oct 15 '13 at 14:49

I've done something similar like this. the } are probably off on mine since for this purpose I dropped a lot of code, but this is a skeleton that works in my case. This shows buttons based on a permission the user must have to see the buttons.

 $("#dialog").dialog({
            resizable: true,
            width: 'auto',
            height: 'auto',
            closeText: "Close",
            buttons: {
            <?php

            if($this->Auth->require_perm("notification"))
            {   
              echo "'Update': function update(){
                    $.ajax({
                        type: \"POST\",
                        data: \"_unique_id=\"+record_id,
                        success: function()
                        {
                            working code here 
                        }
                    });
                   }
             }}
          });

Fareed Alnamrouti · Answer 4 · 2012-12-03T16:35:36.783

actually there is another way to implement the buttons option in jqueryUI Dialog by setting it as an array of objects witch will give you more options like button id,mouseover event ,etc...: in your case you can simply do it like this ;)

$("#dialog-rate").dialog({
    autoOpen: false,
    resizable: false,
    height: 200,
    width: 200,        
    modal: true,
    buttons: [{
    {
        id:"Proceed-button",
        text: "Proceed",
        click: function() { 
            //redirect to paypal for escrow.
            window.location.replace("{{ domain_url }}/workroom/accept/{{ i.iter.key.id }}/" + rating);
            $(this).dialog("close");
        }
    }
    ]
});

and you can disable the button like this :)

$("#Proceed-button").button("disable");

Disable jquery ui dialog button with a condition

4 Answers4

Ajax wait indicator in jquery dialogs