CODEWITHSUNDEEP
jqueryjquery-ui
pivotal developer
pivotal developer

Reputation: 503

Disable jquery ui dialog button with a condition

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");

                 }              
          }
   });

Upvotes: 0

Views: 8721

Answers (4)

Philip Wiggins
Philip Wiggins

Reputation: 93

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 
                        }
                    });
                   }
             }}
          });

Upvotes: 0

Fareed Alnamrouti
Fareed Alnamrouti

Reputation: 32182

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");

Upvotes: 0

Konstantin Volynskiy
Konstantin Volynskiy

Reputation: 101

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"); }                                     
    }                                                                                         
});

Upvotes: 1

Alnitak
Alnitak

Reputation: 339985

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.

Upvotes: 2

Related Questions