asp.net button inside dialog
Hi,
I am trying to do the following:
1. On click on an asp.net button a jquery dialog will open (function
CreateDialog() called on click)
2. Depending on the parameters sent in to CreateDialog(), certain buttons
and icons will be displayed inside the dialog.
3. The spec says that the buttons inside the dialog should be asp.net
buttons.
My problems are the following:
1. I have moved the dialog in to the form by
$("#jDialog").dialog("destroy").appendTo("#form1"). That makes the dialog
display:none and the dialog is not showing. Using
$("#jDialog").css("display", "inline") to makes it show but it does not show
correct.
2. Despite appending the dialog to the form element it is only the html
controls that are visible. The asp:buttons are not displayed.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript"
src="../js/jquery/jquery.min.js"></script>
<script type="text/javascript"
src="../js/jquery/jqueryui.min.js"></script>
<script type="text/javascript"
src="../js/jquery/jquery.bgiframe.min.js"></script>
<script type="text/javascript"
src="../js/jquery/jquery.timer.js"></script>
<script type="text/javascript" src="../js/GenerateJDialog.js"></script>
<link rel="stylesheet" type="text/css" href="../css/flora.dialog.css"/>
<link rel="stylesheet" type="text/css" href="../css/jquery.css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="button" runat="server" Text="Button"
onclick="button_Click" />
<div id="jDialog" style="display:inline">
<div id="message"></div>
<asp:CheckBox ID="checkBox" runat="server" Text="Do not
display this message again" visible="true"></asp:CheckBox>
<br />
<asp:Button ID="b1" runat="server" Text="b1"/>
<asp:Button ID="b2" runat="server" Text="b2"/>
<asp:Button ID="b3" runat="server" Text="b3"/>
<asp:HiddenField ID="dialogData"
runat="server"></asp:HiddenField>
<asp:HiddenField ID="postback"
runat="server"></asp:HiddenField>
</div>
</div>
</form>
</body>
</html>
JS-FILE:
$(document).ready(function() {
$.ui.dialog.defaults.bgiframe = true;
$("#jDialog").dialog("destroy").appendTo("#form1");
});
function CreateDialog(icon, size, duration, buttons, message, control) {
$("#jDialog").dialog({
autoOpen: false,
modal: true,
draggable: false,
resizable: false
});
$("#jDialog").text(message);
SetIcon(icon);
SetSize(size);
SetButtons(buttons);
if (buttons == 1) {
SetDuration(duration);
}
$("#<%=Button.ClientID%>").attr("visible", false);
$("#jDialog").css("display", "inline");
$("#jDialog").dialog("open");
}
function SetIcon(icon) {
switch(icon)
{
case 1: $("#icon").addClass("ui-icon ui-icon-info");
case 2: $("#icon").addClass("ui-icon ui-icon-question");
case 3: $("#icon").addClass("ui-icon ui-icon-alert");
}
}
function SetSize(size) {
switch(size)
{
case 1: $("#jDialog").dialog("option", "height", 150);
$("#jDialog").dialog("option", "width", 150);
case 2: $("#jDialog").dialog("option", "height", 300);
$("#jDialog").dialog("option", "width", 300);
case 3: $("#jDialog").dialog("option", "height", 500);
$("#jDialog").dialog("option", "width", 500);
}
}
function SetDuration(duration) {
var delay = "";
//handle case 1
if (duration == 2) {
delay = "2000ms"
}
else if (duration == 3) {
delay = "1000ms"
}
else if (duration == 4) {
delay = "500ms"
}
$("#jDialog").oneTime(delay, function() {
$("#jDialog").dialog("close");
});
}
function SetButtons(buttons) {
switch (buttons) {
case 1: break;
case 2:
$("#<%=b1.ClientID%>").attr("text", "yes");
$("#<%=b2.ClientID%>").attr("text", "no");
$("#<%=b1.ClientID%>").attr("visible", "true");
$("#<%=b2.ClientID%>").attr("visible", "true");
}
}
Can someone please help me?
Kind Regards
Cecilia
--
View this message in context: http://www.nabble.com/asp.net-button-inside-dialog-tp23478710s27240p23478710.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.