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...
Copy the controls and add to your project. Drop the javaparent.ascx on your parent page and the javachild.ascx on your child page, for simplicity change both control ids to “JavaUpdate”.
The parent page will open the child window.
The child window is where the database changes will occur, within the child page from any event that causes a database change add:
After the event fires the javachild.ascx control will cause a value to be sent to the parent. The child will send the name of the control to update to the parent. Now we just need to capture this on the parent page:
Sub Page_Load(sender as Object, e as EventArgs)
If JavaUpdate.IsUpdate = "true" Then
Select Case JavaUpdate.strSender
Case "ControlName"
‘Update control here
End Select
End If
End Sub
On the page_load event of the parent page capture the name of the control to update and update it! Notice with this method you can easily add more popup windows and update other controls.
What the user will experience is merely the parent page flashing in the background and the control data is updated. Have Fun!