Javascript 动态覆盖jqueryUI对话框按钮(保存、取消等用户选择)文本
我正在将一些预定义值传递给jquery对话框,但无法传递按钮文本。当用户调用jquery对话框时,他可以给出自己的按钮文本。例如:保存、取消、我的按钮等Javascript 动态覆盖jqueryUI对话框按钮(保存、取消等用户选择)文本,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在将一些预定义值传递给jquery对话框,但无法传递按钮文本。当用户调用jquery对话框时,他可以给出自己的按钮文本。例如:保存、取消、我的按钮等 var options = { autoOpen : true, dialogClass: 'ui-dialog-osx', draggable: false, height : 370, maxHeight : 600,
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.dialogoptions,{}
最后,问题是如何在对话框中获取按钮文本
更新:
$("#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('');
});
}
});
您应该使用ui按钮文本类选择跨距,这些跨距包含对话框按钮标签。为了找到它们在DOM中的确切位置,应该使用web浏览器的开发人员工具。虽然我猜如果你做出这个选择:
$('.ui-button-text')
这将按照您在对话框方法的配置对象中定义的顺序提供按钮文本的列表数组。尝试以下操作:
$.each( $('#dialog').parent().find('.ui-button-text'), function(i, btn) {
var label = options.buttons[i];
btn.text(label);
});
基本思想是遍历对话框中的每个按钮文本,从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' );
这会将文本为“保存”的按钮更改为“不保存”。这些行应该写在哪里?请在问题中找到更新的代码?您可以在调用$dialog.dialog后的任意位置添加代码。很抱歉延迟回复。我刚刚确认了它的工作。谢谢你的重播,但我完全困惑了,无法将“选项对象”的“保存文本”按钮更改为“是”?请帮帮我!你能在jsfiddle.net上创建一个小的代码演示吗。到目前为止,我们对您的代码没有足够的了解。我已经更新了代码,每秒钟更改一次按钮文本。请参阅“动态更改”btn_文本函数以了解其操作方式。