Conditionally set the content inside the facebox modal
I am working on a form where I need to conditionally set the content inside the facebox modal. I have created a sample code below where on click of each link I need to open a facebox modal(which is getting opened). Now in this modal I am having a textbox. I want the textbox to be filled automatically with the value equals to the text of anchor which opened the modal i.e On clicking the first hyperlink the textbox should be filled with "Field1" and on clicking the second the textbox should have "Field2" value. Here is the sample code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://de开发者_JS百科funkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="HtmlForm" runat="server">
<a href="#info" rel="facebox">Field1</a> <br />
<a href="#info" rel="facebox">Field2</a> <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').facebox();
});
</script>
</body>
</html>
The one approach with which I am going right now is creating a fake anchor and then triggering its click event to open the modal
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="aspnetForm" runat="server">
<a id="afake" href="#info" style="display:none;"></a>
<a href="#info" rel="facebox">Field1</a> <br />
<a href="#info" rel="facebox">Field2</a> <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').click(function () {
$('#afake').facebox().trigger('click');
var instance = $(this);
$('#<%= TextBox1.ClientID %>').val(instance.html());
});
});
</script>
</body>
</html>
Looking for more robust solution than mine.
I'm not familiat with ASP.NET enough to know whether the ID '#TextBox1' I reference below is appropriate, but this should help get you started at least. It's simply setting the value of the input element to the text contained in the anchor tag when the anchor tag is clicked.
<script type="text/javascript">
jQuery(function($) {
$('a[rel*=facebox]').facebox().click(function(event) {
$('#TextBox1').val($(this).text());
});
});
</script>
加载中,请稍侯......
精彩评论