动态覆盖jqueryUI对话框按钮(保存,取消等用户的选择)文本

时间:2015-01-08 07:09:12

标签: javascript jquery jquery-ui

我将一些预定义的值传递给jquery对话框,但无法传递按钮文本。当用户调用jquery对话框时,他可以给出自己的按钮文本。例如:Save,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);

而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('');
            });
        }
    }); 

2 个答案:

答案 0 :(得分:0)

您应该选择ui-button-text类的跨度,这些跨度包含对话框按钮标签。要在DOM中找到它们的确切位置,您应该使用Web浏览器的开发人员工具。虽然我猜你是否做了这个选择:

$('.ui-button-text')

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

答案 1 :(得分:0)

试试这个:

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

JSFiddle Demo

基本思想是遍历对话框中的每个按钮文本,并从options.buttons对象获取按钮的文本,并将其设置为按钮的文本。 根据您的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' );

这将更改其文字为“保存”的按钮。不要保存'。