Develop Reference

Opening a modal in a function call instead of .click()

I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?

I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.

I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});

Add an image in title bar in a dialog box

In this example, how can i add a small image side by side with the title?
http://jsfiddle.net/F9uR3/
anyone?
thanks.
<span class="dialog">English</span>
<div id="dialog" class="dialogBox" title="LessonSelected">
<img src="https://www.google.com/logos/2014/worldcup14/opening/cta.png" />
.ui-dialog-content div {
background: url(https://www.google.com/logos/2014/worldcup14/opening/cta.png) no-repeat !important;
}
$(function() {
$('#dialog').dialog({
resizable:false,
autoOpen: false,
buttons: {
"Enrol": function()
{
$(this).dialog('close');
choice(true);
},
"Cancel Enrol": function()
{
$(this).dialog('close');
choice(false);
}
}
});
$( ".dialog" ).click(function(){
$('#dialog').dialog("open");
});
});

try like this one
$(function () {
$('#dialog').dialog({
title: $('<img src="http://blog.laptopmag.com/wpress/wp-content/uploads/2012/02/Google-logo-small.jpg" />'),
resizable: false,
autoOpen: false,
buttons: {
"Enrol": function () {
$(this).dialog('close');
choice(true);
},
"Cancel Enrol": function () {
$(this).dialog('close');
choice(false);
}
}
});
$(".dialog").click(function () {
$('#dialog').dialog("open");
});
});
try to scale the image first at size
Here is the fiddle with your example

Problems with appear confirm window when closing dialog?

When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.
I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center',
buttons: {
Save: function () { //submit
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
$('#modalDialog').dialog("close");
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
},
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
});
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
});
Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?
Live Demo

You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.

Jquery dialog add buttons on open

I have got a jquery dialog with autoOpen set to false:
$(document).ready(function() {
$('#test').text("hello!").dialog({
autoOpen: false,
resizable: false,
modal: true,
});
});
I trigger the dialog like this:
$('x').click(function() {$('#test').dialog('open');});
I want to add buttons with some functionality on open, something like this:
$('x').click(function() {$('#test').dialog('open', 'option', 'buttons', {
'Ok': function() {
myFunction();
$(this).dialog('close');
}
});
});
But no luck so far, any help?

Change the third part like :
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: { "Ok": function() { $(this).dialog("close"); } }

Always return true when click on button when use jquery dialog

I am using jquery dialog box. When I click on Button popup is open but it return true and excute server side event of button.
I want when user clicks on yes then return true and else return false.
function btnCancelClick()
{
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
width: 400,
modal: true,
buttons: {
"Yes": function ()
{
$(this).dialog("close");
return true;
},
No: function ()
{
$(this).dialog("close");
return false;
}
}
});
}
<asp:Button ID="btnCancel" runat="server" Text="Cancel Appointment" CssClass="cssbutton"
OnClientClick="return btnCancelClick();" OnClick="btnCancel_Click" />

You cannot return from a dialog.
You have to use a callback function.
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
width: 400,
modal: true,
buttons: {
Yes: function() {
$(this).dialog("close");
clickedYes(); //YES CALLBACK
},
No: function() {
$(this).dialog("close");
clickedNo(); //NO CALLBACK
}
}
});

Update your btnCancelClick method to always return false. Then in the dialog button handlers, instead of return true or false do your postback right there.
function btnCancelClick() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
width: 400,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
<%=ClientScript.GetPostBackEventReference(btnCancel, "")%>;
},
No: function () {
$(this).dialog("close");
}
}
});
return false;
}
This line:
<%=ClientScript.GetPostBackEventReference(btnCancel, "")%>
will register the javascript postback call into your btnCancelClick method.