|
 |
| |
ASP.NET Popup Fancy Box ต้องการส่งค่าจาก Parent Page ไปหน้า Popup |
| |
 |
|
|
 |
 |
|
คือผมใช้ fancybox popup เพื่อเรียกไฟล์อีกหน้าไว้เป็นหน้าค้นหาหรือหน้า save data โดยเรียกเป็น iFrame ปัญหาคือ ผมต้องการส่งค่าจาก asp:DropDownList หรือ asp:TextBox ในหน้า parent page ไปหน้า popup ครับ
Code : parent page
Code : TestJqueryPopup.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestJqueryPopup.aspx.cs"
Inherits="TestJqueryPopup" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FancyBox 1.3.4 | Demonstration</title>
<%--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>--%>
<script src="Js/fancybox/jquery.min.js" type="text/javascript"></script>
<script>
!window.jQuery && document.write('<script src="Js/fancybox/jquery-1.4.3.min.js"><\/script>');
</script>
<script src="Js/fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script src="Js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="App_Themes/CSS/jqueryCSS/jquery.fancybox-1.3.4.css" rel="stylesheet"
type="text/css" />
<link href="App_Themes/CSS/jqueryCSS/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
$("a#example3").fancybox({
'transitionIn': 'none',
'transitionOut': 'none'
});
$("a#example4").fancybox({
'opacity': true,
'overlayShow': false,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition': 'outside',
'overlayColor': '#000',
'overlayOpacity': 0.9
});
$("a#example7").fancybox({
'titlePosition': 'inside'
});
$("a#example8").fancybox({
'titlePosition': 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'titlePosition': 'over',
'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
$("#various4").fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="content">
<h1>
fancybox <span>v1.3.4</span></h1>
<hr />
<p>
Various examples
</p>
<ul>
<li>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">-- เลือกประเภทลูกค้า --</asp:ListItem>
<asp:ListItem Value="1">นามบุคคล</asp:ListItem>
<asp:ListItem Value="2">นามบริษัท</asp:ListItem>
</asp:DropDownList>
<asp:HyperLink ID="various3" runat="server" NavigateUrl="TestJqueryPopup_iFrame.aspx">เลือก</asp:HyperLink>
<br />
ชื่อ-นามสกุล :
<asp:TextBox ID="CusFname" runat="server" Width="23%" />
-
<asp:TextBox ID="CusLname" runat="server" Width="50%" />
</ContentTemplate>
</asp:UpdatePanel>
</li>
</ul>
</div>
</form>
</body>
</html>
Code : Popup page with Fancybox
Code : TestJqueryPopup_iFrame.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestJqueryPopup_iFrame.aspx.cs" Inherits="TestJqueryPopup_iFrame" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
ประเภทลูกค้า :
<asp:Label ID="CusTypeName" runat="server" />
<asp:GridView ID="GridViewCustomer" runat="server" AutoGenerateColumns="False" BorderColor="#E7E7FF"
CellPadding="3" BorderStyle="None" Width="80%" OnRowDataBound="GridViewCustomer_RowDataBound"
HorizontalAlign="Center">
<RowStyle BackColor="#F5F5F5" ForeColor="#4A3C8C" />
<Columns>
<asp:TemplateField HeaderText="ชื่อ-นามสกุล">
<ItemTemplate>
<asp:Label ID="LblCusname" runat="server" Text="" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="BtSelectCus" runat="server" Text="เลือก" CommandArgument='<%#Eval("CusID")%>'
OnClick="BtSelectCus_Click" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#ecf5ff" ForeColor="#4A3C8C" />
</asp:GridView>
</div>
</form>
</body>
</html>
อยากทราบวิธีส่งค่า <asp:DropDownList ID="DropDownList1" > จากหน้า parent page ไปแสดงหน้า Popup page Fancybox ที่ <asp:TextBox ID="TextBox1" runat="server"> ด้วยการกดจาก <asp:HyperLink> หรือ <asp:Button> ก็ได้ครับ 
Tag : .NET, Ms SQL Server 2008, jQuery, Web (ASP.NET), VS 2008 (.NET 3.x)
|
|
|
 |
 |
 |
 |
| Date :
2014-01-17 17:00:05 |
By :
karn4851 |
View :
1713 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ใช้ Code นี้ครับ
parent.document.frmMain.txtServiceID.value='xyz';
|
| |
|
|
| |
| Date :
2014-01-18 09:03:34 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.win เมื่อวันที่ 2014-01-18 09:03:34
รายละเอียดของการตอบ ::
นำโค้ตนี้ใส่ที่ส่วนไหนครับ หน้า Parent หรือหน้า Popup ครับ คือผมลองใช้เรียกข้อมูลของ Dropdown แบบนี้ครับ
$("#various3").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'href' : 'TestJqueryPopup_iFrame.aspx?CusType=' + parent.document.form1.DropDownList1.value,
'type': 'iframe'
});
ผมเปลี่ยนเป็นแบบนี้ครับถึงเรียกได้
$("#various3").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'href' : 'TestJqueryPopup_iFrame.aspx?CusType=' + document.getElementById('<%= DropDownList1.ClientID %>').value,
'type': 'iframe'
});
ปัญหาหลังจากเรียกได้คือ ถ้าเลือก dropdownlist แล้วไม่มีการ postback มันก็จะไม่รัน script ให้ครับ ผมเลยต้องใส่ function ครอบไว้และเรียกใช้ function แบบนี้ครับ
<script type="text/javascript">
function getPop() {
$(document).ready(function() {
});
}
</script>
<asp:DropDownList ID="DropDownList1" runat="server" onchange="getPop();" >
วิธีที่ผมทำนี้ถูกมั้ยครับ หรือมีวิธีที่ง่ายกว่านี้ ขอคำแนะนำด้วยครับ
|
| |
|
|
| |
| Date :
2014-01-21 08:52:50 |
By :
karn4851 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
