Velocity Reviews - populating webpage elements with contents of an iframe

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)

- Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)

- - populating webpage elements with contents of an iframe (http://www.velocityreviews.com/forums/t929480-populating-webpage-elements-with-contents-of-an-iframe.html)

populating webpage elements with contents of an iframe

Hi friends,

I am developing a web application using Jsp and JS.

I have a main Jsp page(Jsp1).Inside it I have an iframe having an Html-
table which is created dynamically and contains all records from the
backend-table . For creating this dynamic table I've used another
Jsp(Jsp2) and in Jsp1 I say:
<iframe id = "I1" src="Jsp2.jsp" width=320 scrolling="yes">

Now I have links on every row of the table and the link is used to
select a particular row for modifying it.User can select one row at a
time.
For eg on clicking a link on the name 'Mr.Jack Brown' from the table
in the iframe I need that the info of 'Jack Brown' be populated into
the corresponding fields of the main Jsp(Jsp 1) i.e in 'Student Name-
textbox' it should show 'Mr.Jack Brown', in 'Batch ID-textbox' it
should show '1' etc .

Here's a snapshot of Jsp1:-
http://www.thescripts.com/forum/atta...tachmentid=138

Is it possible that I can actually populate the elements of the parent
window with data(fields) from the table present in the iframe or is
there any other way of achieving this?

Any suggestions much appreciated !

Re: populating webpage elements with contents of an iframe

First of all i would suggest moving away from iframes but since you
have them. Also I am not a jsp expert by any means. I think the answer
you are looking for is displayed in my example below I will recap to
make sure I understand.

jsp1.jsp:
<html>
<body>
<iframe src=jsp2.jsp></iframe>
</body>
</html>

jsp2.jsp

<a href="jsp1.jsp?id= + <%jspcode to identy record%>"
target="_parent">Mr. Jack Brown</a>

let me know if that makes since!

Re: populating webpage elements with contents of an iframe

On Jan 30, 10:27 am, "Adambrz" <Adam...@msn.com> wrote:
> First of all i would suggest moving away from iframes but since you
> have them. Also I am not a jsp expert by any means. I think the answer
> you are looking for is displayed in my example below I will recap to
> make sure I understand.
>
> jsp1.jsp:
> <html>
> <body>
> <iframe src=jsp2.jsp></iframe>
> </body>
> </html>
>
> jsp2.jsp
>
> <a href="jsp1.jsp?id= + <%jspcode to identy record%>"
> target="_parent">Mr. Jack Brown</a>
>
> let me know if that makes since!
-----------------------------------------------------------------------
-----------------------------------------------------------------------
--------------------------------------
Hi and Thanks for your reply, well I gave up the idea of working with
iframe and now I'm creating&displaying a dynamic table on Jsp1 itself,
also I discarded the idea of using links; now what I have is as
below:-

The dynamic table is placed inside a <div> on Jsp1 and it has vertical
scrollbar. Each row in this table has a radio button associated with
it which is used to select a particular row for modifying it.User can
select a single row at a time.So now I want that if I select the radio
button on say the 3rd row then the cell-contents of the third row
should be populated in the corresponding textfields of Jsp1.

I am totally clueless as to how to determine which row it is that has
its radio button clicked and how to retrieve individual cell values of
the table and set them as text in the textboxes on Jsp1?! Any ideas?

Re: populating webpage elements with contents of an iframe

Your killin' me! Just kidding. Doesn't sound to difficult.

It looks like you will create your table with jsp and the radio on
creation should the value should be declared. So I image it would look
something like this:
<body>
<form id="form1" name="form1" method="get" action="JSP1.jsp">
<table>
<%jsp to start loop to create radio button for each record%>
<tr><td>
<input type="radio" name="id" value="<%jsp code for ID%>"
onChange="javascript:document.form1.submit();" />
</td><td><%JSP to write Mr. Jack Brown</td>
</tr>
<%jsp for end of loop to go to next record%>
</table>
</form>

you should see that the form on submit to the same page. What will
happen is when radio button is selected i will auto submit the form to
the same page with the address being "JSP1.jsp?id=1234" or whatever
your id number is. I know php so i will just write out what I would do
for that to work.

Check to so if url param is set.
if set query database with id set to url param
fillin value of jsp1 form with those values.

Hope this helps and makes since feel free to ask any questions.

Re: populating webpage elements with contents of an iframe

On Jan 31, 1:01 am, "Adambrz" <Adam...@msn.com> wrote:
> Your killin' me! Just kidding. Doesn't sound to difficult.
>
> It looks like you will create your table with jsp and the radio on
> creation should the value should be declared. So I image it would look
> something like this:
> <body>
> <form id="form1" name="form1" method="get" action="JSP1.jsp">
> <table>
> <%jsp to start loop to create radio button for each record%>
> <tr><td>
> <input type="radio" name="id" value="<%jsp code for ID%>"
> onChange="javascript:document.form1.submit();" />
> </td><td><%JSP to write Mr. Jack Brown</td>
> </tr>
> <%jsp for end of loop to go to next record%>
> </table>
> </form>
>
> you should see that the form on submit to the same page. What will
> happen is when radio button is selected i will auto submit the form to
> the same page with the address being "JSP1.jsp?id=1234" or whatever
> your id number is. I know php so i will just write out what I would do
> for that to work.
>
> Check to so if url param is set.
> if set query database with id set to url param
> fillin value of jsp1 form with those values.
>
> Hope this helps and makes since feel free to ask any questions.
-----------------------------------------------------------------------
-----------------------------------------------------------------------
----------------------------------------------
Hi Adambrz
Thanks for your time and response,

A snapshot of my webpage is located here:-
http://www.dynamicdrive.com/forums/attachment.php?
attachmentid=758&d=1170187911

It's a Jsp and on it I have a table (say T1) which is created
dynamically and contains all the backend-table's records as rows. I am
creating this dynamic table inside a <div> on Jsp1 and using a Jsp-
scriptlet to get the backend data into the table. I have set a
vertical scrollbar on the <div> such that user can see 4 rows of T1 at
a time. Each row in T1 has a radio button associated with it which is
used to select a particular row for modifying it. User can select a
single row at a time.

The requirement is that if I select the radio button on any row then
the cell-contents of that row should be populated in the corresponding
textfields of Jsp1.

For eg: if the user clicks the radio of the 3rd row then 'Student Name-
textfield' should show "Mr.Jonathan Brown"; 'Batch-ID-textfield'
should show "1" etc i.e. every textfield should be populated with the
corresponding cell value of the row.

I have grouped the radio-buttons and the group-name is "Group" but I
am totally clueless as to how to determine which row it is that has
its radio clicked and how to retrieve individual cell values of the
table and set them as text in the textfields of Jsp1?!

This is somewhat how my entire webpage(JSP) looks like in brief:-

<%@ page language = "JAVA" import = "java.sql.*" %>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
<style type=text/css>
# divStayTopLeft{
height:100px;
width:400px;
border:1px;
}
table.T1{
text-align:center;
font-weight:bold;
float:right;
width:450px;
}
. highlighted{
background-color:#ffffcc;
border:1px solid black;
}
</style>
<script language = "javascript">
// some clientside validation code
</script>
</head>
<body>
<form name = "Students">
<table>
<!-This is the main layout table and I have fixed my entire webpage in
to this table -->
</table>
</form>
<script>
document.write('<div id="divStayTopLeft"
style="position:absolute;overflow:scroll">')
</script>
<div id="divStayTopLeft">
<%
PreparedStatement pst ;
ResultSet rs = null ;
try
{
pst = con.prepareStatement("select * from
Students");
rs = pst.executeQuery();

if (rs != null)
{
out.write("<table class = \"T1\" id = \"TId\" border =
\"1\" cellspacing=0 cellpadding=2>");
out.write("<tr>");
out.write("<th bgcolor=lightgrey>Candidate Name</th>");
out.write("<th bgcolor=lightgrey>Batch-ID</th>");
out.write("<th bgcolor=lightgrey>Reg Amt</th>");
out.write("<th bgcolor=lightgrey>Total Fees </th>");
out.write("<th bgcolor=lightgrey>Balance</th>");
out.write("</tr>");

// Here I have the code for getting the backend record and appending
it to the dynamically created table T1
while(rs.next())
{
out.write("<tr> <td bgcolor=#ECF9FF
nowrap><input type=\"radio\" value=\"V\" checked name=\"Group\"><b>" +
rs.getString(1) + "</b></a></td>");
out.write("<td>" + rs.getInt(2) + "</
td>");
out.write("<td>" + rs.getLong(3) +
"</td>");
out.write("<td>" + rs.getLong(4) +
"</td>");
out.write("<td>" + rs.getLong(5)+ "</
td></tr>");
}
out.write("</table>");
}
rs.close();
pst.close();
}
catch(Exception e)
{
e.printStackTrace();
}
%>
</div>
</body>
</html>

Any assistance from anyone is greatly appreciated !

Re: populating webpage elements with contents of an iframe

Realize with my lack of JSP knowledge i am going to take a shot in the
dark here.
-----------------------------------------------------------------------
------------------------------------------------
On Jan 30, 3:59 pm, "eureka" <mseur...@rediffmail.com> wrote:
> On Jan 31, 1:01 am, "Adambrz" <Adam...@msn.com> wrote:
>
> > Your killin' me! Just kidding. Doesn't sound to difficult.
>
> > It looks like you will create your table with jsp and the radio on
> > creation should the value should be declared. So I image it would look
> > something like this:
> > <body>
> > <form id="form1" name="form1" method="get" action="JSP1.jsp">
> > <table>
> > <%jsp to start loop to create radio button for each record%>
> > <tr><td>
> > <input type="radio" name="id" value="<%jsp code for ID%>"
> > onChange="javascript:document.form1.submit();" />
> > </td><td><%JSP to write Mr. Jack Brown</td>
> > </tr>
> > <%jsp for end of loop to go to next record%>
> > </table>
> > </form>
>
> > you should see that the form on submit to the same page. What will
> > happen is when radio button is selected i will auto submit the form to
> > the same page with the address being "JSP1.jsp?id=1234" or whatever
> > your id number is. I know php so i will just write out what I would do
> > for that to work.
>
> > Check to so if url param is set.
> > if set query database with id set to url param
> > fillin value of jsp1 form with those values.
>
> > Hope this helps and makes since feel free to ask any questions.
>
> -----------------------------------------------------------------------
> -----------------------------------------------------------------------
> ----------------------------------------------
> Hi Adambrz
> Thanks for your time and response,
>
> A snapshot of my webpage is located here:-http://www.dynamicdrive.com/forums/attachment.php?
> attachmentid=758&d=1170187911
>
> It's a Jsp and on it I have a table (say T1) which is created
> dynamically and contains all the backend-table's records as rows. I am
> creating this dynamic table inside a <div> on Jsp1 and using a Jsp-
> scriptlet to get the backend data into the table. I have set a
> vertical scrollbar on the <div> such that user can see 4 rows of T1 at
> a time. Each row in T1 has a radio button associated with it which is
> used to select a particular row for modifying it. User can select a
> single row at a time.
>
> The requirement is that if I select the radio button on any row then
> the cell-contents of that row should be populated in the corresponding
> textfields of Jsp1.
>
> For eg: if the user clicks the radio of the 3rd row then 'Student Name-
> textfield' should show "Mr.Jonathan Brown"; 'Batch-ID-textfield'
> should show "1" etc i.e. every textfield should be populated with the
> corresponding cell value of the row.
>
> I have grouped the radio-buttons and the group-name is "Group" but I
> am totally clueless as to how to determine which row it is that has
> its radio clicked and how to retrieve individual cell values of the
> table and set them as text in the textfields of Jsp1?!
>
> This is somewhat how my entire webpage(JSP) looks like in brief:-
>
> <%@ page language = "JAVA" import = "java.sql.*" %>
> <html>
> <head>
> <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
> <meta name="ProgId" content="FrontPage.Editor.Document">
> <meta http-equiv="Content-Type" content="text/html;
> charset=windows-1252">
> <title></title>
> <style type=text/css>
> # divStayTopLeft{
> height:100px;
> width:400px;
> border:1px;
> }
> table.T1{
> text-align:center;
> font-weight:bold;
> float:right;
> width:450px;
> }
> . highlighted{
> background-color:#ffffcc;
> border:1px solid black;
> }
> </style>
> <script language = "javascript">
> // some clientside validation code
> </script>
> </head>
> <body>
> <form name = "Students">
> <table>
> <!-This is the main layout table and I have fixed my entire webpage in
> to this table -->
> </table>
> </form>
> <script>
> document.write('<div id="divStayTopLeft"
> style="position:absolute;overflow:scroll">')
> </script>
> <div id="divStayTopLeft">
> <%
> PreparedStatement pst ;
> ResultSet rs = null ;

//create variables that are empty to fill into your form
String name = "";
int myint = null;
long mylong = null;

// check to see if url param is set. This is in php code so
you will have to adapt to jsp

if(isset($_GET['id']){
PreparedStatement pst2 ;
ResultSet rs2 = null ;
pst2 = con.prepareStatement("select * from Students WHERE
id=$_GET['id']");
rs2 = pst.executeQuery();
}
//then set these variables equal to the field in the form
name = rs.getString(1) ;
//ect..

> try
> {
> pst = con.prepareStatement("select * from
> Students");
> rs = pst.executeQuery();
>
> if (rs != null)
> {
> out.write("<table class = \"T1\" id = \"TId\" border =
> \"1\" cellspacing=0 cellpadding=2>");

out.write(" <form id="radioform" name="radioform"
method="get" action="jsp1.jsp">");

> out.write("<tr>");
> out.write("<th bgcolor=lightgrey>Candidate Name</th>");
> out.write("<th bgcolor=lightgrey>Batch-ID</th>");
> out.write("<th bgcolor=lightgrey>Reg Amt</th>");
> out.write("<th bgcolor=lightgrey>Total Fees </th>");
> out.write("<th bgcolor=lightgrey>Balance</th>");
> out.write("</tr>");
>
> // Here I have the code for getting the backend record and appending
> it to the dynamically created table T1
> while(rs.next())
> {
> out.write("<tr> <td bgcolor=#ECF9FF
> nowrap><input type=\"radio\" value=\"V\" checked name=\"Group\"><b>" +
> rs.getString(1) + "</b></a></td>");

I am assuming that value=\"V\" is something for jsp to fill in the
value. But by your other calls I would say thats not likely. When
setting up a database I usually setup a primary Key that is auto
numbered. then I use that Key as an ID for the record. Now if you know
that the name is unique than you can use that. and have it like:
out.write("<tr>
<td bgcolor=#ECF9FF nowrap>
<input type=\"radio\" value=\"" +
rs.getString(1) + "\" name=\"id\" onChange=
\"javascript:document.radioform.submit();\"><b> " + rs.getString(1) +
"</b></a>
</td>");

> out.write("<td>" + rs.getInt(2) + "</
> td>");
> out.write("<td>" + rs.getLong(3) +
> "</td>");
> out.write("<td>" + rs.getLong(4) +
> "</td>");
> out.write("<td>" + rs.getLong(5)+ "</
> td></tr>");
> }

out.write("</form>");

> out.write("</table>");
> }
> rs.close();
> pst.close();
> }
> catch(Exception e)
> {
> e.printStackTrace();
> }
> %>
> </div>
> </body>
> </html>
>
> Any assistance from anyone is greatly appreciated !

Re: populating webpage elements with contents of an iframe

On Jan 31, 2:36 am, "Adambrz" <Adam...@msn.com> wrote:
> Realize with my lack of JSP knowledge i am going to take a shot in the
> dark here.
> -----------------------------------------------------------------------
> ------------------------------------------------
> On Jan 30, 3:59 pm, "eureka" <mseur...@rediffmail.com> wrote:
>
>
>
>
>
> > On Jan 31, 1:01 am, "Adambrz" <Adam...@msn.com> wrote:
>
> > > Your killin' me! Just kidding. Doesn't sound to difficult.
>
> > > It looks like you will create your table with jsp and the radio on
> > > creation should the value should be declared. So I image it would look
> > > something like this:
> > > <body>
> > > <form id="form1" name="form1" method="get" action="JSP1.jsp">
> > > <table>
> > > <%jsp to start loop to create radio button for each record%>
> > > <tr><td>
> > > <input type="radio" name="id" value="<%jsp code for ID%>"
> > > onChange="javascript:document.form1.submit();" />
> > > </td><td><%JSP to write Mr. Jack Brown</td>
> > > </tr>
> > > <%jsp for end of loop to go to next record%>
> > > </table>
> > > </form>
>
> > > you should see that the form on submit to the same page. What will
> > > happen is when radio button is selected i will auto submit the form to
> > > the same page with the address being "JSP1.jsp?id=1234" or whatever
> > > your id number is. I know php so i will just write out what I would do
> > > for that to work.
>
> > > Check to so if url param is set.
> > > if set query database with id set to url param
> > > fillin value of jsp1 form with those values.
>
> > > Hope this helps and makes since feel free to ask any questions.
>
> > -----------------------------------------------------------------------
> > -----------------------------------------------------------------------
> > ----------------------------------------------
> > Hi Adambrz
> > Thanks for your time and response,
>
> > A snapshot of my webpage is located here:-http://www.dynamicdrive.com/forums/attachment.php?
> > attachmentid=758&d=1170187911
>
> > It's a Jsp and on it I have a table (say T1) which is created
> > dynamically and contains all the backend-table's records as rows. I am
> > creating this dynamic table inside a <div> on Jsp1 and using a Jsp-
> > scriptlet to get the backend data into the table. I have set a
> > vertical scrollbar on the <div> such that user can see 4 rows of T1 at
> > a time. Each row in T1 has a radio button associated with it which is
> > used to select a particular row for modifying it. User can select a
> > single row at a time.
>
> > The requirement is that if I select the radio button on any row then
> > the cell-contents of that row should be populated in the corresponding
> > textfields of Jsp1.
>
> > For eg: if the user clicks the radio of the 3rd row then 'Student Name-
> > textfield' should show "Mr.Jonathan Brown"; 'Batch-ID-textfield'
> > should show "1" etc i.e. every textfield should be populated with the
> > corresponding cell value of the row.
>
> > I have grouped the radio-buttons and the group-name is "Group" but I
> > am totally clueless as to how to determine which row it is that has
> > its radio clicked and how to retrieve individual cell values of the
> > table and set them as text in the textfields of Jsp1?!
>
> > This is somewhat how my entire webpage(JSP) looks like in brief:-
>
> > <%@ page language = "JAVA" import = "java.sql.*" %>
> > <html>
> > <head>
> > <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
> > <meta name="ProgId" content="FrontPage.Editor.Document">
> > <meta http-equiv="Content-Type" content="text/html;
> > charset=windows-1252">
> > <title></title>
> > <style type=text/css>
> > # divStayTopLeft{
> > height:100px;
> > width:400px;
> > border:1px;
> > }
> > table.T1{
> > text-align:center;
> > font-weight:bold;
> > float:right;
> > width:450px;
> > }
> > . highlighted{
> > background-color:#ffffcc;
> > border:1px solid black;
> > }
> > </style>
> > <script language = "javascript">
> > // some clientside validation code
> > </script>
> > </head>
> > <body>
> > <form name = "Students">
> > <table>
> > <!-This is the main layout table and I have fixed my entire webpage in
> > to this table -->
> > </table>
> > </form>
> > <script>
> > document.write('<div id="divStayTopLeft"
> > style="position:absolute;overflow:scroll">')
> > </script>
> > <div id="divStayTopLeft">
> > <%
> > PreparedStatement pst ;
> > ResultSet rs = null ;
>
> //create variables that are empty to fill into your form
> String name = "";
> int myint = null;
> long mylong = null;
>
> // check to see if url param is set. This is in php code so
> you will have to adapt to jsp
>
> if(isset($_GET['id']){
> PreparedStatement pst2 ;
> ResultSet rs2 = null ;
> pst2 = con.prepareStatement("select * from Students WHERE
> id=$_GET['id']");
> rs2 = pst.executeQuery();}
>
> //then set these variables equal to the field in the form
> name = rs.getString(1) ;
> //ect..
>
> > try
> > {
> > pst = con.prepareStatement("select * from
> > Students");
> > rs = pst.executeQuery();
>
> > if (rs != null)
> > {
> > out.write("<table class = \"T1\" id = \"TId\" border =
> > \"1\" cellspacing=0 cellpadding=2>");
>
> out.write(" <form id="radioform" name="radioform"
> method="get" action="jsp1.jsp">");
>
> > out.write("<tr>");
> > out.write("<th bgcolor=lightgrey>Candidate Name</th>");
> > out.write("<th bgcolor=lightgrey>Batch-ID</th>");
> > out.write("<th bgcolor=lightgrey>Reg Amt</th>");
> > out.write("<th bgcolor=lightgrey>Total Fees </th>");
> > out.write("<th bgcolor=lightgrey>Balance</th>");
> > out.write("</tr>");
>
> > // Here I have the code for getting the backend record and appending
> > it to the dynamically created table T1
> > while(rs.next())
> > {
> > out.write("<tr> <td bgcolor=#ECF9FF
> > nowrap><input type=\"radio\" value=\"V\" checked name=\"Group\"><b>" +
> > rs.getString(1) + "</b></a></td>");
>
> I am assuming that value=\"V\" is something for jsp to fill in the
> value. But by your other calls I would say thats not likely. When
> setting up a database I usually setup a primary Key that is auto
> numbered. then I use that Key as an ID for the record. Now if you know
> that the name is unique than you can use that. and have it like:
> out.write("<tr>
> <td bgcolor=#ECF9FF nowrap>
> <input type=\"radio\" value=\"" +
> rs.getString(1) + "\" name=\"id\" onChange=
> \"javascript:document.radioform.submit();\"><b> " + rs.getString(1) +
> "</b></a>
> </td>");
>
> > out.write("<td>" + rs.getInt(2) + "</
> > td>");
> > out.write("<td>" + rs.getLong(3) +
> > "</td>");
> > out.write("<td>" + rs.getLong(4) +
> > "</td>");
> > out.write("<td>" + rs.getLong(5)+ "</
> > td></tr>");
> > }
>
> out.write("</form>");
>
>
>
> > out.write("</table>");
> > }
> > rs.close();
> > pst.close();
> > }
> > catch(Exception e)
> > {
> > e.printStackTrace();
> > }
> > %>
> > </div>
> > </body>
> > </html>
>
> > Any assistance from anyone is greatly appreciated !- Hide quoted text -
>
> - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

Thanks for all the help Adambrz , my code is up and running now!!
Cheers!