Hi,
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://defunkt.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.