I'm using Jquery UI dialog box and I want to add a button. Can I use .html() as the function in the dialog?
$(".selector").dialog({
buttons: [{
text: "Ok",
click: function () {
$(this).dialog("close");
},
{
text: "View Details",
click: function () {
$(this).html('Some HTML');
}
}]
});
Use the option method to change the dialog's buttons on the fly. First use it with one argument to get the old buttons, modify that array, then use it with two arguments to change the buttons.
$( ".selector" ).dialog({
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "View Details",
click:function(){
var buttons = $(this).dialog("option", "buttons");
buttons.push({
text: "New button",
click: function() {
alert("New button clicked");
}
});
$( this ).dialog("option", "buttons", buttons);
}
}
]
});
Related
I have a Jquery dialog where I want to display button based on a condition.
I tried using this solution to extend the button set but it's not displaying the dynamic button: Add a button to a dialog box dynamically
https://jsfiddle.net/q3u0xebz/
function showActionDialog(title, content, actionMessage, actionCallback) {
var actionDialog = $("<div id='action-dialog'></div>").html(content).dialog({
dialogClass: 'no-close',
title: title,
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
buttons: [{
text: 'Okay',
click: function() {
$(this).dialog('close');
$("action-dialog").remove();
}
}]
});
if (actionCallback != '') {
var buttons = actionDialog.dialog("option", "buttons"); // getter
$.extend(buttons, {
text: actionMessage,
click: function() {
eval(actionCallback).call();
$(this).dialog('close');
$("action-dialog").remove();
}
});
actionDialog.dialog("option", "buttons", buttons); // setter
}
}
I have the following jQuery-UI dialog with 2 buttons:
$("#dialog").dialog({
autoOpen: false,
width: 400,
buttons: [
{
class: "btnOK",
click: function () {...
}
},
{
class: "btnClose",
click: function () {
$(this).dialog("close");
}
}
]
});
I can disable btnOK with:
$('.btnOK').attr("disabled", true).addClass("ui-state-disabled");
OR $('.btnOK').button("disabled");
OR $('.btnOK').button( "option", "disabled",true);
However this doen't block click on the button.
How I can disable click?
Thanks.
The working ways are:
$('.btnOK').button("disable");
OR $('.btnOK').button( "option", "disabled",true);
OR $('.btnOK').attr("disabled", true).addClass("ui-state-disabled");
I just have not cleared the history in my browser, so I didn't see the changes.
As I said in a past post, I'm a JavaScript newbie, and now learned some JQuery.
Briefing:
I need to create a dialog box that triggers when someone clicks on Cancel, and has (as text or value)"Are you sure you want to exit?", with two buttons: "Yes, I want to leave" and "No, I want to stay on this page". The redirect part from the "I want to leave" button will figure it out later.
Problem: I want to make the buttons to be autoSizable with the width option (in other words, width:auto and height: (number)px, but I can't figure it out :/
This is my code ->
$(document).ready (function(){
var $dialog = $('<div></div>');
$(".selector").dialog({ modal:true });
var $popUp = $('#btnCancel').one('click', function () {
$dialog
.html('All changes will not be saved')
.dialog({
title: 'Are you sure you want to exit?',
resizable: false,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, I want to leave": function() {
$( this ).dialog( "close" );
},
"No, I want to stay on this page": function() {
$( this ).dialog( "close" );
}
}
});
});
$popUp.click(function () {
$dialog.dialog('open');
return false;
});
});
I tried changing the buttons part for this piece of code ->
buttons: [
{ text: "Exit", 'class':'exit-button', resizable: true, click: function () { $(this).dialog("close"); } },
{ text: "Go back", 'class': 'go-back-button', resizable: true, click: function () { $(this).dialog("close"); } }
]
But in this last case, it creates two buttons with the value of "0" and "1", and have no onclick event.
What should I do?
If you give the buttons an id when you create them you can style them with CSS, including giving them a height and width.
Example - http://jsfiddle.net/tj_vantoll/ckhG6/2/
I'm having some trouble properly using the close dialog event for the columns chooser plugin/widget of jqGrid. Here's what I have - I start with the jqGrid initialization with the column chooser attached at the end, like so
ticketsTable = tableWrap.jqGrid({
url: ... ,
datatype: ... ,
...
loadComplete: function(d) {
...
}
})
.navGrid('#ticketsList_footer', {edit:false, add:false, del:false, cloneToTop:true})
.navButtonAdd('#ticketsList_toppager', {
caption: "Columns",
title: "Reorder Columns",
id: "colButton",
onClickButton: function(){ ticketsTable.jqGrid('columnChooser'); }
});
Then, in the loadComplete function (above) I find the dialog and attach an alert to its close event, like so.
$('#colButton').click(function(e){
setTimeout(function(){
log($( ".ui-dialog" ).length);
$( ".ui-dialog" ).bind( "dialogclose", function(event, ui) {
log('close dialog event captured!');
});
}, 500);
});
For some reason the alert only comes up when I close the dialog via the "x" button in the corner. When I click "ok" or "cancel" there's no alert. What am I missing?
BTW, the reason I'm doing this is that I need to update table's size (setGridWidth) after the dialog closes to adjust for added/removed columns. Maybe there is a more elegant way to do that?
You can use the following code
tableWrap.jqGrid (
'navButtonAdd',
'#pager',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
tableWrap.jqGrid('columnChooser', {
done: function(perm) {
if (perm) {
tableWrap.jqGrid("remapColumns", perm, true);
alert("The column chooser closed with 'OK' button");
} else {
alert("The column chooser closed with 'Cancel' button");
}
}
}
);
}
});
See the demo
jquery-ui dialog window in javascript:
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
There two buttons "Ok" and "Cancel". On each button there function. Buttons names fastened hardly. There some ways to named buttons from variable?? like this:
var Button1 = "Ok";
var Button2 = "Cancel";
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
Button1: function() {
$( this ).dialog( "close" );
},
Button2: function() {
$( this ).dialog( "close" );
}
}
});
I try code above but buttons appear with names "Button1" and "Button2".
Can I also display images in buttons but not text???
Referring to http://jqueryui.com/demos/dialog/ you can see there are 2 alternate ways of defining the buttons, one is what you are using here, the second is using arrays.
var button1 = 'Ok';
var button2 = 'Not Ok';
$( ".selector" ).dialog({ buttons: [
{
text: button1,
click: function() { $(this).dialog("close"); }
},
{
text: button2,
click: function() { $(this).dialog('close'); }
}
] });
It looks like this must solve your problem.