动态覆盖jqueryUI对话框按钮(保存，取消等到用户选择）文本

override jqueryUI dialog buttons (save, cancel and etc to user's choice) text dynamically

本文关键字：用户 选择 文本 取消 jqueryUI 覆盖 对话框 按钮 保存 动态      更新时间：2023-09-26

我正在将一些预定义的值传递给jquery对话框，但无法传递按钮文本。当用户调用jquery对话框时，他可以给自己的按钮文本。例如：保存，cance，MyButton等。

var options = {
            autoOpen : true,
            dialogClass: 'ui-dialog-osx',
            draggable: false,
            height : 370,
            maxHeight : 600,
            maxWidth : 600,
            minHeight : 340,
            minWidth : 400,
            resizable : false, // also requires ui.resizable.js
            title: "Add New Address",
            modal: true,                
            width: 400,
            buttons: [{
                 text : "Yes Yes"
            }, {
                "cancel": "No"
            }]
        };

和调用对话框，如下所示：

dialog1(options);

对话框 1 看起来像 ： $("#dialog").dialog(options, {})

最后，问题是如何在对话框中获取按钮文本？

更新：

$("#dialog").dialog(options, {
        showTitlebar : true,
        buttons: {                    
            SAVE : function() {
                console.log($('.ui-button-text'));
                var add1 = $("#txtadd1").val();
                var add2 = $("#txtadd2").val();
                var landmark = $("#landmark").val();
                var city = $("#city").val();
                var pincode = $("#pincode").val();
                var state = $("#state").val();
                console.log(add1 + '  ' + add2 + '  ' + landmark + '  ' + city + '  ' + pincode + '  ' + state );
                var newModel = new Record();                        
                console.log(newModel);
                console.log(that.collection);
                console.log('Govindha Govindhaaaaaaaaaa');
                newModel.set({
                   add1 : add1,
                   add2 : add2,
                   landmark : landmark,
                   city : city,
                   pincode : pincode,
                   state : state
                });
                console.log(newModel);
                newModel.save({wait:true}, {
                    success : function(model, resp, options){
                        console.log('Model saved');
                        console.log(that.collection);
                        that.collection.add(resp[0]);
                        $(".elems").each(function(){
                            $(this).val('');
                        });
                        $(".errmsg").html('');
                        //console.log('Govindha Govindhaaaaaaaaaa');
                        $("#dialog").dialog('close');
                    },
                    error : function(model, xhr, options){
                        console.log("Something went wrong while saving the model");
                    }
                });   
            },
            CANCEL : function(){
                $(".elems").each(function(){
                    $(this).val('');
                });
                $(".errmsg").html('');
                $("#dialog").dialog('close');
            }
        },
        close: function(){
            $(".elems").each(function(){
                    $(this).val('');
            });
        }
    });

试试这个：

$.each( $('#dialog').parent().find('.ui-button-text'), function(i, btn) {
    var label = options.buttons[i];
    btn.text(label);
});

JSFiddle Demo

基本思想是循环访问对话框中的每个按钮文本，并从 options.button 对象中获取按钮的文本，并将其设置为按钮的文本。根据您的 DOM/标记，您可能需要稍微调整代码以使其正确。请发布您的代码/标记，以防您无法获得。:)

下面是一个函数，您可以调用它来更改要更新的任何按钮文本：

function changeBtnText(container, from, to) {
    var buttons = container.parent().find('.ui-button-text');
    $.each(buttons, function (i, btn) {
        if($(btn).text() == from) {
             $(btn).text(to);
             return false;
        }
    });
}

你可以这样称呼它：

changeBtnText( $('#dialog'), 'Save', 'Dont Save' );

这会将文本为"保存"的按钮更改为"不保存"。

您应该

选择具有ui-button-text类的范围，这些范围包含对话框按钮标签。要在 DOM 中找到它们的确切位置，您应该使用 Web 浏览器的开发人员工具。虽然我想如果你做出这个选择：

$('.ui-button-text')

这将按照您在dialog方法的配置对象中定义的顺序提供按钮文本的列表（数组）。

相关文章：