You may find yourself using pop-up child windows to extend and enhance your existing web pages. You should consider using child-pop windows to prevent your users from navigating to additional pages and it makes for a sharp looking application. Clearly there are limitations to this, such as having JavaScript disabled by the user’s browser, but honestly the benefits here out weigh a few odd browser settings. I found myself using this multiple times on several pages and put the needed code into two user controls to simplify the process.
Specifically what I wanted was a child page that I could edit database information, add or make changes, and then update the changes back to the parent. The pop-up would contain the data for a dropdown list on the parent page, if the child is updated or deleted then I want the parent to refresh the dropdown list and not loose all the other information on the page. From the parent page user a button, hyperlink, or any control of you’re choosing. This could be added to a RowDataBound event also.
MyControl.Attributes.Add("onclick", "window.open('child.aspx?sender=controlname','myWindow','height=600px,width=700px,top=200,left=200')")
This will add the javascript needed to the control to open a new window and pass a query string with the “sender” – change the controlname to the name of your control to update.
Now for the controls...
First control: javaparent.ascx
‘----------------------------------------------------
<%@ Control Language="VB" ClassName="javaparent" %>
<script runat="server">
Public Property IsUpdate()
Get
Return inputupdate.value
End Get
Set(ByVal value)
inputupdate.value = value
End Set
End Property
Public Property strSender()
Get
Return inputsender.Value
End Get
Set(ByVal value)
inputsender.Value = value
End Set
End Property
Sub Page_load(ByVal SEnder As Object, ByVal e As EventArgs)
javatext.Text = inputupdate.ClientID
javatext2.TExt = inputsender.ClientID
End Sub
</script>
<script type="text/javascript" >
function showValue(val, sender) {
document.getElementById('<asp:literal runat="server" id="javatext" />').value=val;
document.getElementById('<asp:literal runat="server" id="javatext2" />').value=sender;
theForm.submit();
}
</script>
<input runat="server" id="inputupdate" type="hidden" />
<input runat="server" id="inputsender" type="hidden" />
‘---------------------------------------------------------
Second control: javachild.ascx
‘---------------------------------------------------------
<%@ Control Language="VB" ClassName="javareturn" %>
<script runat="server">
Public Property Update() As Boolean
Get
Return False
End Get
Set(ByVal value As Boolean)
Select Case value
Case True
javaupdate.Text = "window.opener.showValue('true', '" & Request("sender") & "');"
Case False
javaupdate.text = ""
End Select
End Set
End Property
Sub Page_load(ByVal SEnder As Object, ByVal e As EventArgs)
javatext.text = inputupdate.ClientID
End Sub
</script>
<script type="text/javascript">
function update() {
document.getElementById('<asp:literal runat="server" id="javatext" />').value='true';
window.opener.showValue('true');
}
<asp:literal runat="server" id="javaupdate" />
</script>
<input id="inputupdate" runat="server" value="false" type="hidden" />
‘-----------------------------------------------------
Now to wire it all up...