Fatal编程技术网
  • jquery/
  • 使用条件禁用jquery ui对话框按钮

使用条件禁用jquery ui对话框按钮

jquery jquery-ui

使用条件禁用jquery ui对话框按钮,jquery,jquery-ui,Jquery,Jquery Ui,我有一个if条件，如果它为false，则禁用对话框按钮“继续”。我是这样打的： if (!goodtogo){ $(".ui-dialog-buttonpane button:contains('Proceed')").button("disable"); } 有些人认为它不会在单击时禁用对话框按钮。我该怎么办 创建按钮的代码： $("#dialog-rate").dialog({ /*open: function (event, ui) {$(".ui-dialog-butto

我有一个if条件，如果它为false，则禁用对话框按钮“继续”。我是这样打的：

if (!goodtogo){
    $(".ui-dialog-buttonpane button:contains('Proceed')").button("disable");
}
有些人认为它不会在单击时禁用对话框按钮。我该怎么办

创建按钮的代码：

$("#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");

                 }              
          }
   });
首先，检查选择器是否选择了正确的按钮：

if (!goodtogo) {
    var button = $(".ui-dialog-buttonpane button:contains('Proceed')");
    console.log(button);
    $(button).button("disable");
}
选择器可能没有找到要禁用的正确元素，在这种情况下，控制台将记录
[]
。如果是这样，请张贴标记和/或创建按钮的代码。

首先，检查选择器是否选择了正确的按钮：

if (!goodtogo) {
    var button = $(".ui-dialog-buttonpane button:contains('Proceed')");
    console.log(button);
    $(button).button("disable");
}
选择器可能没有找到要禁用的正确元素，在这种情况下，控制台将记录
[]
。如果是这样，请发布您的标记和/或创建按钮的代码。

实际上，还有另一种方法可以实现jqueryUI对话框中的按钮选项，方法是将其设置为对象数组，这将为您提供更多选项，如按钮id、鼠标悬停事件等： 在您的情况下，您可以这样做；）

您可以禁用如下按钮：）

实际上，还有另一种方法可以实现jqueryUI对话框中的按钮选项，方法是将其设置为对象数组，这将为您提供更多选项，如按钮id、鼠标悬停事件等： 在您的情况下，您可以这样做；）

您可以禁用如下按钮：）

jquery对话框中的Ajax等待指示器 我有一个类似的问题，我想在jquery对话框中显示一个ajax等待指示器。我为对话框小部件提供了一个扩展。扩展创建了一个额外的对话框方法“busy”，可以调用它来禁用和启用对话框。此方法还阻止对话框内容区域内的所有输入

扩展名：

$.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();
        }
    }
});

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

$("#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"); }                                     
    }                                                                                         
});
示例：

$.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();
        }
    }
});

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

$("#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"); }                                     
    }                                                                                         
});
jquery对话框中的Ajax等待指示器 我有一个类似的问题，我想在jquery对话框中显示一个ajax等待指示器。我为对话框小部件提供了一个扩展。扩展创建了一个额外的对话框方法“busy”，可以调用它来禁用和启用对话框。此方法还阻止对话框内容区域内的所有输入

扩展名：

$.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();
        }
    }
});

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

$("#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"); }                                     
    }                                                                                         
});
示例：

$.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();
        }
    }
});

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

$("#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"); }                                     
    }                                                                                         
});
我做过类似的事情。}可能是我的错，因为出于这个目的，我删除了很多代码，但在我的例子中，这是一个框架。这将根据用户必须具有的查看按钮的权限显示按钮

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

$（“#dialog”）.dialog({
可调整大小：正确，
宽度：“自动”，
高度：“自动”，
关闭文本：“关闭”，
按钮：{

我做过类似的事情。}可能是我的}，因为为此我删除了很多代码，但这是一个框架，在我的情况下可以工作。这显示了基于用户必须具有查看按钮的权限的按钮


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



$（“#dialog”）.dialog({
可调整大小：正确，
宽度：“自动”，
高度：“自动”，
关闭文本：“关闭”，
按钮：{

我没有发布解决方案，我发布了一个诊断测试。结果如何？这是编辑后的版本。我无法使用您的代码进行测试，我的页面在使用该解决方案时出现错误。我修改了我的代码片段，以便更清楚地显示它相对于当前代码的位置。请尝试调用
.button（'refresh'））
Too我没有发布解决方案，我发布了一个诊断测试。结果如何？这是编辑后的版本。我无法使用您的代码进行测试，我的页面在使用时出现错误。我修改了我的代码片段，以便更清楚地显示它相对于当前代码的位置。请尝试调用
。按钮（'refresh'））
tooth此链接有一个更干净的解决方案：此链接有一个更干净的解决方案：