173
rated 0 times
[
180]
[
7]
/ answers: 1 / hits: 15793
/ 10 Years ago, wed, april 30, 2014, 12:00:00
I am using jQuery daialog for showing the forms in an ASP.net application.
Everything is working fine. I need to place a custom close button on each form so that when they click this button, I can save the record from code behind. I don't want to use the jQuery built in Exit button. The code for creating the dialog is below:
jQuery(function (e) {
$(a).each(function () {
e.data(this, 'dialog',
$(this).next(div).dialog({
resizable: false,
autoOpen: false,
modal: false,
title: this.id,
width: 900,
height: 590,
position: ['middle', 150],
draggable: true,
open: function (event, ui) {
$(this).parent().children().children(.ui-dialog-titlebar-close).hide();
},
//buttons: {
// Exit: function () {
// $(this).dialog(close);
// }
//}
}));
}).click(function (event) {
if (this.id != '#') {
document.getElementById('frame_' + this.id).src = this.id + '.aspx';
e.data(this, 'dialog').dialog('open');
return false;
}
});
});
The code I use for closing the dialog :
function CloseDialog()
{
$(#LabUsers).dialog('close');
}
is not working.
The entire code for parent page is below:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src=Scripts/jquery-1.9.1.js></script>
<script src=Scripts/jquery-ui.js></script>
<link href=Scripts/themes/jquery-ui.css rel=stylesheet />
<link href=Scripts/themes/jquery-ui.min.css rel=stylesheet />
<link href=Scripts/themes/jquery.ui.theme.css rel=stylesheet />
<link href=Scripts/Site.css rel=stylesheet />
<link rel=stylesheet href=Scripts/style.css type=text/css />
<script>
jQuery(function ($) {
$(a).each(function () {
$.data(this, 'dialog',
$(this).next(div).dialog({
resizable: false,
autoOpen: false,
modal: false,
title: this.id,
width: 900,
height: 590,
position: ['middle', 150],
draggable: true,
open: function (event, ui) {
$(this).parent().children().children(.ui-dialog-titlebar-close).hide();
},
// buttons: {
// Exit: function () {
// $(this).dialog(close);
// }
// }
})
);
}).click(function (event) {
if (this.id != '#') {
$.data(this, 'dialog').dialog('open');
document.getElementById('frame_' + this.id).src = this.id + '.aspx';
return false;
}
});
});
$(document).ready(function () {
$(iframe).attr(scrolling, no);
$(iframe).attr(frameborder, 0);
});
function CloseDialog(id)
{
$(id).dialog('close');
}
</script>
</head>
<body>
<div class=center>
<div id=menu1 class=menu>
<ul id=nav>
<li>
<a id=#>Log Samples</a>
<div id=#><iframe class=framestyle id=frame_#></iframe> </div>
<ul>
<li>
<a id=#>Commercial</a>
<div id=#><iframe class=framestyle id=frame_#></iframe> </div>
<ul>
<li>
<a id=LogSamples>Log Samples</a>
<div id=LogSamples><iframe class=framestyle id=frame_LogSamples></iframe> </div>
</li>
<li>
<a id=Customers>Customers</a>
<div id=Customers><iframe class=framestyle id=frame_Customers></iframe> </div>
</li>
</ul>
</li>
</ul>
<li>
<a id=#>Admin</a>
<div id=#><iframe class=framestyle id=frame_#></iframe> </div>
<ul>
<li>
<a id=LabUsers>Lab Users</a>
<div id=LabUsers><iframe class=framestyle id=frame_LabUsers></iframe> </div>
</li>
<li>
<a id=LabRoles>Lab Roles</a>
<div id=LabRoles><iframe class=framestyle id=frame_LabRoles></iframe> </div>
</li>
<li>
<a id=ScreenForRoles>ScreenForRoles</a>
<div id=ScreenForRoles><iframe class=framestyle id=frame_ScreenForRoles></iframe> </div>
</li>
</ul>
</ul>
</div>
</div>
<div id=header>
<div style=width: 100%;>
<div class=MainTitle style=position: relative; float: right;>
</div>
<div class=MainTitle style=position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;>
</div>
</div>
</div>
</body>
</html>
The code for the child form is below:
<%@ Page Title=About Us Language=C# AutoEventWireup=true CodeBehind=LabRoles.aspx.cs Inherits=Company.LabRoles %>
<!doctype html>
<html lang=en>
<head runat=server>
<meta charset=utf-8>
<title></title>
<script src=../View/Content/JScript/jquery-1.7.2.js></script>
<script src=../View/Content/JScript/jquery-ui.js></script>
<link href=../View/Content/themes/jquery-ui.css rel=stylesheet />
<link href=../View/Content/Styles/Site.css rel=stylesheet />
<link href=../View/Content/themes/jquery.ui.theme.css rel=stylesheet />
<script>
function CloseThisForm()
{
parent.CloseDialog(#LabRoles);
}
</script>
</head>
<body>
<form id=form1 runat=server>
<div style=height: 510px; margin: 16px;>
<div style=height: 450px; background: none;>
<div style=text-align: left;>
<asp:TextBox ID=txtSearch runat=server />
<asp:Button ID=btnSearch runat=server Text=Search OnClick=btnSearch_Click CssClass=button />
<asp:HiddenField ID=hdnvalue runat=server ClientIDMode=Static />
</div>
<br />
<asp:GridView ID=gvRoles runat=server AutoGenerateColumns=False BackColor=#d8e8ff Width=100%
RowStyle-Height=20 OnPageIndexChanging=gvRoles_PageIndexChanging DataKeyNames=WM_RoleId
EmptyDataText=There are no data records to display. OnRowDataBound=gvRoles_RowDataBound
AllowPaging=true ForeColor=Black
OnSelectedIndexChanged=gvRoles_SelectedIndexChanged PageSize=15>
<Columns>
<asp:BoundField DataField=WM_RoleName HeaderText=Role Name HeaderStyle-HorizontalAlign=Center
ItemStyle-HorizontalAlign=Left ItemStyle-Width=100>
<HeaderStyle HorizontalAlign=Left></HeaderStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
<div style=text-align: center; height: 20px;>
<asp:Button ID=Button1 OnClientClick =CloseThisForm(); return false; runat=server Text=Close />
<asp:Button ID=btnInsert runat=server Text=Add New CssClass=button />
<asp:Button ID=BtnDelete runat=server Text=Delete CssClass=button OnClientClick=return confirm('Do you want to delete this record? Click OK to proceed.');
OnClick=BtnDelete_Click />
<asp:Button ID=btnEdit runat=server Text=Details Visible=true
CssClass=button />
</div>
</div>
</form>
</body>
</html>
More From » jquery
