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

Question

我正在将一些预定义值传递给 jquery 对话框，但无法传递按钮文本。当用户调用 jquery 对话框时，他可以给自己的按钮文本。例如：保存、取消、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);

dialog1 看起来像：$("#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('');
            });
        }
    });

Answer 1

您应该 select 具有 ui-button-text class 的跨度，这些包含对话框按钮标签。要在 DOM 中找到它们的确切位置，您应该使用网络浏览器的开发人员工具。虽然我猜如果你做这个 selection:

$('.ui-button-text')

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

Answer 2

试试这个：

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

JSFiddle Demo

基本思想是遍历对话框中的每个按钮文本，并从 options.buttons 对象中获取按钮的文本并将其设置为按钮的文本。根据您的 DOM/Markup，您可能需要稍微调整代码以使其正确。请 post 你的 code/markup，以防你无法顺利完成。 :)

您可以调用此函数来更改您要更新的任何按钮文本：

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

这会将文本为 'Save' 的按钮更改为 'Dont Save'。

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

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

javascript

jquery

jquery-ui