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/
Related
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.
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);
}
}
]
});
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.
$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
window.location.href = 'url and myvar??';
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#confirm").dialog( "open" ).html ( "Are U Sure?" );
return false;
});
HTML
<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>
Is there a good way to do this?
You can try using the .data() method to store data for you. Take a look at this answer
Passing data to a jQuery UI Dialog
For example to pass a variable, you can store it using the data function, before opening the dialog
$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");
Then you can get this back by:
var my_data = $("#dialog_div").data('param_1')
You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:
$("#delete").click(function(ev) {
ev.preventDefault(); // preventDefault should suffice, no return false
var href = $(this).attr("href");
var dialog = $("<div>Are you sure?</div>");
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
window.location = href;
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
});
Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:
function confirmDialog(msg) {
var dialog = $("<div>"+msg+"</div>");
var def = $.Deferred();
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
def.resolve();
$( this ).dialog( "close" );
},
'Cancel': function() {
def.reject();
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
return def.promise();
}
And then use it like so
confirmDialog("are your sure?").done(function() {
window.location = $(this).attr("href");
}).fail(function() {
// cry a little
});
You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.
For more information on jquery deferred: http://api.jquery.com/category/deferred-object/
Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects.
Example:
$(function(){
$(".deleteLink").click(function(){
var id = $(this).data("record-id");
var myHref = $(this).attr('href');
$("#confirmDialog").dialog({
buttons:{
"Yes": function()
{
window.location.href = myHref + id;
}
}
});
});
});
<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
<p>Are you sure?</p>
</div>
HTML
<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS
$('.confirmation-dialog').confirm({
buttons: {
Yes: function(){
console.log(this.$target.attr('data-mydata'));
No: function(){
}
}
});
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.