I create a simple Jquery UI dialog and want to put it in front.
var dialog = $(document.createElement("div"));
dialog.attr("id","dialog-confirm");
$( "body" ).append(dialog);
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog("moveToTop");
I get this error Error: cannot call methods on dialog prior to initialization; attempted to call method 'moveToTop'.
What can I do about that?
You technically do not have to append it to the body. The following code will work:
$(function() {
var dialog = $("<div>", {
id: "dialog-confirm"
}).dialog({
resizable: false,
height: "auto",
width: 400,
buttons: {
"Delete all items": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
dialog.dialog("moveToTop");
});
The moveToTop is only needed if you have more than 1 dialog open at a time.
Related
I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:
window.confirm = function (message_confirm) {
$(document.createElement('div'))
.attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
.html(message_confirm)
.dialog({
buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: { effect: "fade", duration: 300 },
});
};
This works in that once this script is run, calling a regular confirm shows the jQueryUI dialog, however, the YES selection does not work. I have an ajax call like below:
if (confirm("Are you sure you want to delete this user?"))
{
alert("test");
//ajax call
}
return false;
And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?
Thank you.
you could add a callback parameter to the function
window.confirm = function (message_confirm, ok_callback)
fire it on YES
buttons: { YES: function () { ok_callback(); }}
and go on later like
confirm("message", function(){
alert('smth');
});
Because the dialog is asynchronous you can use a deferred approach:
window.confirm = function (message_confirm) {
var defer = $.Deferred();
$('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
.dialog({
buttons: {
YES: function () {
defer.resolve("yes");
$(this).attr('yesno', true);
$(this).dialog('close');
}, NO: function () {
defer.resolve("no");
$(this).attr('yesno', false);
$(this).dialog('close');
}
},
close: function () {
if ($(this).attr('yesno') === undefined) {
defer.resolve("no");
}
$(this).remove();
},
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: {effect: "fade", duration: 300}
});
return defer.promise();
};
$(function () {
confirm("Are you sure you want to delete this user?").then(function(yesno) {
console.log(yesno);
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Try something like below. It worked for me.
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete user": function() {
alert("test");
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
</head>
<body>
<div id="dialog-confirm" title="Please confirm">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>
I have a jquery dialog box that I wish to add an additional button to dynamically when a condition is met.
I set the dialog box on page load as follows
$("#confirmT").dialog({
autoOpen: false,
open: function() {
pullResources(cat, id);
},
autoResize:true,
width: 800,
modal: true,
title: 'Select Resources',
buttons: {
Cancel: function() {$(this).dialog( "close" );}},
close: function() {
}
});
Then when a condition is true I want it to add another button to allow the user to add something to the database. This is what I have so far (from the jQuery ui website but nothing happens. No errors are produced, just nothing.
if ($sub == 1)
{
?>
<script type = 'javascript'>
function addbuttons()
{
// Setter
$( "#confirmT" ).dialog( "option", "buttons",
[
{
text: "Ok",
click: function() {
//do something
}
}
]
);
}
addbuttons();</script>
<?php
}
Any help would be greatly appreciated.
Thanks
Try this out:- http://jsfiddle.net/uvep1fnc/
Add the button initially and based on the condition just call out the javascript function to hide the button.
JS:-
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
width: 500,
modal: true,
buttons: [{
text: "Delete all items",
class: "aditya",
click: function () {
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
function foo() {
$("#dialog-confirm").closest(".ui-dialog").find(".aditya").hide();
}
foo();
});
Please review this jsFiddle...
This is a jQuery UI dialog box utilizing an ajax request to pull up the content. I can't seem to figure out what's wrong, but nothing's popping up other than the blank dialog.
HTML...
<div id="#griffin"></div>
<ul>
<li>
</li>
</ul>
JavaScript...
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
Thoughts?
You must give the commands under buttons parameter.
http://jsfiddle.net/aEwUF/4/
$(function() {
$( "#griffin" ).dialog({
resizable: false,
height:150,
modal: true,
buttons: {
"I have read and understand the terms": function() {
$( this ).dialog( "close" );
$("p").html("You have accepted the terms");
//write ajax requests in here..
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
you need to add a jQuery UI dialog open function
http://api.jqueryui.com/dialog/#method-open
you will have to run this locally or on the same server since the jsfiddle cant pull your external file due to same origin policy
http://jsfiddle.net/aEwUF/7/
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
},
// add this
open:function(event,ui){
$("#griffin").html("");
$("#griffin").load($(".griffin-style").attr("href"), function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(".griffin-style").find("h1").remove();
});
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
Is it possible (in a reasonalbe way) to have a jQuery UI dialog closed with different animations depending on which button that is clicked?
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
buttons: {
"Delete": function () {
... one animation here ...
$(this).dialog("close");
},
"Cancel" : function () {
... another here ...
$(this).dialog("close");
}
}
});
Yep.
$( "#dialog" ).dialog({
//autoOpen: false,
show: 'blind',
buttons: {
Delete: function () {
$( this ).dialog( 'option', 'hide', 'explode' );
$(this).dialog("close");
},
Cancel : function () {
$( this ).dialog( 'option', 'hide', 'blind' );
$(this).dialog("close");
}
}
});
Live example: http://jsfiddle.net/GLUHa/2/
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});