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();
});
});
});
Related
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.
I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
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'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).
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/