Dynamically Change Frame Pages

• Download source code - 45 Kb

Introduction

This code is mainly for beginners and intermediate level programmers who are working with Frames and ASP pages. Normally the html pages are calling in the frame once. That will give you the static output to your site. And when the web page is divided into more than two frames and if you want to update your web pages in the frame dynamically and also at a time in two or more frames then this code will direct you for that.

What it is

This code is working with one ASP page which has been divided into three frames top, left and main frame. And the problem is how to change pages in the frame dynamically on user request and also multiple pages in two different frames at a time.

How it works

Here is main page named index.asp having divided into three frame pages. At initial the top frame having topbar.html, the left frame having leftbar1.htm and the main frame having main1.htm page. On left bar user having login option and on entering userid and password when user logged in it will get two different pages in both left and main frame at a time. In left frame it will get new personal page (leftbar2.htm) and in main page a photo gallery page (gallerytable.htm). And that time the top bar frame page remain static. On both new pages the user will get logout option and clicking on that it will redirect same old pages at a time. And this is the most important part of this code that you can dynamically update two or more pages in different frames at a time.

Understand the code

The main trick behind this code is dynamically change the value for src (source) and target attributes of frame and also the links.

First when user submitting its request to the index.asp page it’s setting it’s the target attribute to “_top” of form tag, which is overriding whole page in the window, when calling and displaying index.asp page by submitting user request for login.

Leftbar1.htm

<form method="POST" action="index.asp" target="_top">

Here the most important thing is set the target attribute to “_top” otherwise the whole index.asp page will appear in the “main” frame instead of in the main browser window. The second thing is if that catch the user request on index.asp page and if it has supplied correct userid and password then need to update pages in left and main frames. For that I have added following ASP code in index.asp page to set the condition.

Index.asp

<%@ language="vbscript" %>
<%
    dim id, pass, mem
    if request("mem")="NO" then
        mem="NO"
    else
        mem="YES"
    end if
    id = request.form("T1")
    pass = request.form("T2")
    if id = "techneel" and pass="techneel" then
        mem = "YES"
    else
        mem = "NO"
    end if
%>

Here it will check the userid and password and set the value for “mem” variable to “YES” if the it is correct. And the second thing is now need to set the src (source) attribute of left frame and main frame based on condition of the ‘mem” variable value.

Index.asp

<frame name="left" target="contents" src=" <%
   if mem="NO" then response.write("leftbar1.htm") 
     else response.write("leftbar2.htm") end if %>">
<frame name="main" scrolling="no" noresize src=" <%
   if mem="NO" then response.write("main1.htm") 
     else response.write("gallerytable.htm") end if %>" target="_top">

Here I have set the src attribute value conditionally using response.write object of vbscript. When the web page display in the browser the code should like this

<frame name="left" target="contents" src="leftbar2.htm">
<frame name="main" scrolling="no" noresize src="gellerytable.htm">

Now, you will get both bottom frames left and main with new pages. The left bar has user’s personal link page and the right main frame has photo gallery page. In both pages you will find “LOGOUT” hyperlink. Which will just added to show how to work with hyperlink to update frame pages.

Leftbar2.htm, gallerytable.htm

<a href="index.asp?mem=NO" target="_top">LOGOUT</a>

See, here when user click on LOGOUT link it will call index.asp page and will also pass query string mem=”NO” which we will catch in index page. And also again I have set the target attribute with “_top” so it will call page in the browser window instead of particular frame. For this you can read the code shown above for index.asp page carefully.

Conclusion

This code will help you to understand the frame pages and ASP script to work dynamically with multiple frame pages simultaneously. This code is not showing any other strict rules for ASP login or logout tricks or passing variable state. It is just to demonstrate that how to work dynamically with frames. If you have any suggestions or comments please write it and also about this code.

Thanking you. Nilesh Shah.