jovialjonny
06-11-2003, 09:24 AM
Hey,
I tried putting this in the HTML forum but I think it might be a javascript issue so I'll see if you gurus can help!
I have a page containing a form. There is a button for submitting the form that has an onClick method that carries out some JavaScript before submitting the form- namely it opens a child page called 'multiviewer.html'.
The child page is a dynamic tab-based viewing system and what it does when it opens is creates a tab and an i-frame for displaying the result from the form. The child page is working correctly i.e.: it opens, creates an iframe and when its ready it calls back to the parent with the id of the newly created i-frame.
The parent then takes this id of the new i-frame and sets it to be the target of the form so that the servlet the form is submitted to returns to the correct place.
My problem is caused by the targetting. Here is the code and I will explain the issue after it:
Parent page:
<html>
<head>
<title>Untitled</title>
<script>
//The child Page.
var viewer = null;
function openViewer()
{ //if the page isn't open, open it.
if(viewer==null || viewer.closed==true)
{
viewer = window.open("multiviewer.html","mv");
}
else
{ //If it is open already just add the new form to it
addPage();
}
}
function addPage()
{ /* 'createTab() is in child page, it creates tab+iframe and returns the id of the new i-frame */
var iframeId = viewer.createTab();
var servletForm = document.getElementById("svForm");
***** servletForm.target = iframeId; *******
servletForm.submit();
}
</script>
</head>
<body>
<form id="svForm" action="/servlet/viewerServlet">
<input type="Button" onclick="openViewer()" value="Enter" />
</form>
</body>
</html>
The problem is the 'servletForm.target' just reads a variable (in fact the id is "f1") and does not see that the i-frame is contained in a child page so the form is returned to a new blank page instead.
I have found that by naming the window i.e.:
viewer = window.open("multiviewer.html","mv");
and then setting the target to be the new name:
servletForm.target = "mv";
That the form will return to the correct window, and it overwrites 'multiviewer.html'. This is almost what I need however instead of overwriting what is in the window I want to direct it into an i-frame within that window. But I have found that I cannot reference the DOM using the window name i.e: something like mv.document.getElementById("f1"); does not work. Does anyone know is it possible to reference objects in a page using the window name?
On the other hand if I use the javascript variable (viewer) I can reference the DOM but I cannot get the target to reference the correct location.
Another hack I tried was to set the location of the i-frame directly to the servlet i.e.:
viewer.frames[0].location="/servlet/viewerServlet";
it did load into the iframe, but the problem being the form variables are not being submitted in this case so this isn't exactly right either.
This is really driving me nuts so if anyone has tried anything like this before please let me know! :)
(By the way Khalid I know you asked for more of the code but I don't have any webspace so I can't post a url and all of this is kind of a plugin to a bigger system so I couldn't show it all because its huge! So unfortunately snippets is about the best I can do! But the code above is all that I have aside from the child page's code, which isn't really related to this problem)
I tried putting this in the HTML forum but I think it might be a javascript issue so I'll see if you gurus can help!
I have a page containing a form. There is a button for submitting the form that has an onClick method that carries out some JavaScript before submitting the form- namely it opens a child page called 'multiviewer.html'.
The child page is a dynamic tab-based viewing system and what it does when it opens is creates a tab and an i-frame for displaying the result from the form. The child page is working correctly i.e.: it opens, creates an iframe and when its ready it calls back to the parent with the id of the newly created i-frame.
The parent then takes this id of the new i-frame and sets it to be the target of the form so that the servlet the form is submitted to returns to the correct place.
My problem is caused by the targetting. Here is the code and I will explain the issue after it:
Parent page:
<html>
<head>
<title>Untitled</title>
<script>
//The child Page.
var viewer = null;
function openViewer()
{ //if the page isn't open, open it.
if(viewer==null || viewer.closed==true)
{
viewer = window.open("multiviewer.html","mv");
}
else
{ //If it is open already just add the new form to it
addPage();
}
}
function addPage()
{ /* 'createTab() is in child page, it creates tab+iframe and returns the id of the new i-frame */
var iframeId = viewer.createTab();
var servletForm = document.getElementById("svForm");
***** servletForm.target = iframeId; *******
servletForm.submit();
}
</script>
</head>
<body>
<form id="svForm" action="/servlet/viewerServlet">
<input type="Button" onclick="openViewer()" value="Enter" />
</form>
</body>
</html>
The problem is the 'servletForm.target' just reads a variable (in fact the id is "f1") and does not see that the i-frame is contained in a child page so the form is returned to a new blank page instead.
I have found that by naming the window i.e.:
viewer = window.open("multiviewer.html","mv");
and then setting the target to be the new name:
servletForm.target = "mv";
That the form will return to the correct window, and it overwrites 'multiviewer.html'. This is almost what I need however instead of overwriting what is in the window I want to direct it into an i-frame within that window. But I have found that I cannot reference the DOM using the window name i.e: something like mv.document.getElementById("f1"); does not work. Does anyone know is it possible to reference objects in a page using the window name?
On the other hand if I use the javascript variable (viewer) I can reference the DOM but I cannot get the target to reference the correct location.
Another hack I tried was to set the location of the i-frame directly to the servlet i.e.:
viewer.frames[0].location="/servlet/viewerServlet";
it did load into the iframe, but the problem being the form variables are not being submitted in this case so this isn't exactly right either.
This is really driving me nuts so if anyone has tried anything like this before please let me know! :)
(By the way Khalid I know you asked for more of the code but I don't have any webspace so I can't post a url and all of this is kind of a plugin to a bigger system so I couldn't show it all because its huge! So unfortunately snippets is about the best I can do! But the code above is all that I have aside from the child page's code, which isn't really related to this problem)