Hello I'm creating a report, I want to display information about a single person in a modal form based the populated datagridview. I'm using jquery to show the modal form, but I'm having problems display the specific information based on the primary key. This is what I have done so far
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/ModalPopup.css" rel="stylesheet" type="text/css" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
//$('#mask').fadeIn(1000);
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.7);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(500);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<div id="headerText">
<asp:Label ID="Label1" runat="server" EnableViewState="False"
Font-Names="Segoe UI" Font-Size="16pt" Text="REPORTS"></asp:Label>
<br />
</div>
</div>
<div id="body">
<div id="bodySearchParam">
</div>
<div id="bodyDisplaySearch">
<asp:GridView ID="ReportGridView" runat="server" AllowPaging="True"
BorderStyle="Groove" BorderWidth="1px"
CellPadding="4" EmptyDataText="No records defined!!" ForeColor="#333333"
Height="374px" onpageindexchanging="ReportGridView_PageIndexChanging"
onrowcommand="ReportGridView_RowCommand"
onrowdatabound="ReportGridView_RowDataBound" PageSize="11" Width="790px"
AutoGenerateColumns="False" ShowHeaderWhenEmpty="True">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<a href="#modalChild" name="modal"">View Report</a>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" Width="80px" />
</asp:TemplateField>
<asp:BoundField HeaderText="Session ID" DataField="session_id"
SortExpression="session_id" />
<asp:BoundField HeaderText="Account No" DataField="card_no"
SortExpression="acc_no" />
<asp:BoundField HeaderText="Amount" DataField="amount"
SortExpression="amount" />
<asp:BoundField HeaderText="Time Req." DataField="time_req"
SortExpression="time_req" />
<asp:BoundField HeaderText="IP Address" DataField="name"
SortExpression="ip_add" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"
Font-Names="Segoe UI" HorizontalAlign="Left" Height="30px" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left"
Height="30px" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</div>
<div id="modalForm">
<div id="modalChild" class="window">
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
</div>
<div id="mask"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>