Popup window

P

Peter Kirk

Hi,

I want to open a popup-window which displays a list to the user. From this
list, the user can select an item, and the data regarding this item is then
transferred to some fields on the main window (and the popup then closes).

But I am having several problems. I have an example "main.html" which opens
an example "lookup.html". In the actual application "lookup.html" is
generated dynamically be a server, and will have different lists depending
on a "typeid" sent to the server in the request. In the example below I want
the possibility to select from 2 lists: one called FUNCTION, and one called
MATERIAL.

But I can't even get the "function" data to be transferred to the main
window. What is the problem?

Also, what is the easiest way to tell "lookup.html" what fields to write to
on the main window? The field names will be different depending on the
particular list shown (I guess I will need to get the server which generates
the lists to also ensure that the javascript on "lookup.html" matches the
correct field names etc).

Thanks,
Peter



The MAIN window (main.html):

<html>
<head>
<title>
Test Popup
</title>
</head>

<script language="javascript">
function newWindow(url,window,param)
{
popupWindow=open(url, window, param);
if (popupWindow.opener == null) popupWindow.opener = self;
}
</script>

<body>
<table width="100%" border="1" bgcolor="f1f8ff">
<form method="post">
<tr>
<td valign="top" width="20%">
<b>FUNCTION</b>
</td>
<td valign="top" width="40%">
<input type="button" value="pop"
onclick="newWindow('lookup.html?typeid=5000','catalogue','width=500,height=4
00')" />
<input type="hidden" value="2" name="function" />
<input type="text" value="f2" name="function_shortcut"
style="width:25px" />&nbsp;
<input type="text" value="function 2" name="function_name" />
</td>
</tr>
<tr>
<td valign="top" width="20%">
<b>MATERIAL</b>
</td>
<td valign="top" width="40%">
<input type="button" value="pop"
onclick="newWindow('lookup.html?typeid=5001','catalogue','width=500,height=4
00')" />
<input type="hidden" value="11" name="material" />
<input type="text" value="m1" name="material_shortcut"
style="width:25px" />&nbsp;
<input type="text" value="material 1" name="material_name" />
</td>
</tr>
</form>
</table>
</body>
</html>



An example POPUP window (lookup.html):

<html>
<head>
<title>
Lookup
</title>
</head>

<script language="javascript">
function choose( id, shortcut, name )
{
window.opener.document.forms[0].function.value = id;
window.opener.document.forms[0].function_shortcut.value = shortcut;
window.opener.document.forms[0].function_name.value = name;
window.close();
}
</script>

<body>
<table width="100%" border="1" bgcolor="f1f8ff">
<tr>
<td valign="top" width="20%">
<b>Lookup List</b>
</td>
<td>
<table width="100%">
<tr>
<td>
<a href="#" onclick="choose(1,'f1','function 1')">func 1</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="choose(2,'f2','function 2')">func 2</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="choose(3,'f3','function 3')">func 3</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="choose(4,'f4','function 4')">func 4</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
 
R

Richard Cornford

Peter Kirk wrote:
<input type="hidden" value="2" name="function" />
Click to expand...
^^^^^^^^ ^^
If you are writing HTML why are there appendix C style XHTML space-slash
sequences at the end of your empty tags?

<script language="javascript">
function choose( id, shortcut, name )
{
window.opener.document.forms[0].function.value = id;
Click to expand...
<snip> ^^^^^^^^

Lowercase "function" is a keyword in javascript and so it cannot be used
as an identifier. Thus it cannot appear in a dot-notation property
accessor (that would be a syntax error). It may be used in a bracket
notation property accessor but changing the name of the INPUT element to
something that does not overlap with known browser property names or
javascript key, or reserved, words would probably be the best idea.

Richard.
 
P

Peter Kirk

Thanks for the quick repsonse...

Richard Cornford said:
Peter Kirk wrote:

^^^^^^^^ ^^
If you are writing HTML why are there appendix C style XHTML space-slash
sequences at the end of your empty tags?
Click to expand...

The html I posted were just "exmple" test files. Some of the people I work
with like to put the /> at the end of these sorts of the tags. I thought
that was the "way it was done". I admit my main problem with all this is
that the project I am working on lacks a person who is an expert in
javascript and html. I'm just trying to "hack" the frontend together to hook
it up with the glorious backend code we have written :) (sorry)

<script language="javascript">
function choose( id, shortcut, name )
{
window.opener.document.forms[0].function.value = id;
Click to expand...
<snip> ^^^^^^^^

Lowercase "function" is a keyword in javascript and so it cannot be used
as an identifier. Thus it cannot appear in a dot-notation property
accessor (that would be a syntax error). It may be used in a bracket
notation property accessor but changing the name of the INPUT element to
something that does not overlap with known browser property names or
javascript key, or reserved, words would probably be the best idea.
Click to expand...

I did wonder if this could be a problem. It appears that an input field
called "function" is ok unless I need to access that field via javascript
(is that the case?). Where can I find information about this "bracket
notation property accessor" you mention. From my point of view it might be
easier to get javascript to write to a field called "function". What about
the "getElementById" function in javascript - would this allow me to access
a field called "function"?

Thanks again,
Peter
 
P

Peter Kirk

Peter Kirk said:
Thanks for the quick repsonse...



I did wonder if this could be a problem. It appears that an input field
called "function" is ok unless I need to access that field via javascript
(is that the case?). Where can I find information about this "bracket
notation property accessor" you mention. From my point of view it might be
easier to get javascript to write to a field called "function". What about
the "getElementById" function in javascript - would this allow me to access
a field called "function"?
Click to expand...

Hi, I now have a workable solution. (Good enough for me anyway).
It is indeed possible to use something like this in the popup window:

el = window.opener.document.getElementById('function_id')

(where el then refers to my main window field called "function", which has
an id "function_id").

Then I can set "el" to the value I want.

Thanks,
Peter
 
R

Richard Cornford

Peter said:
The html I posted were just "exmple" test files. Some of the
people I work with like to put the /> at the end of these sorts
of the tags.
Click to expand...

They are required if the code is XHTML (except the space as it is only
needed for Appendix C XHTML (which browsers don't regard as XHTML
anyway)). In HTML they are just noise that the browser will
error-correct out. Though apparently they are meaningful in proper SGML,
where the slash would terminate the element and the following '>' would
be lateral and appear in the text. To date nobody has cited a web
browser that follows the SGML rules in this respect so it isn't a
problem, but it is still better not to make the browser waste its time
correcting errors.
I thought that was the "way it was done".
Click to expand...

Such nonsense in HTML source code is common, but in web authoring what
is common is not necessarily related to the correct.
I admit my main problem with all this is that the project I am
working on lacks a person who is an expert in javascript and html.
Click to expand...

Is there another field of human endeavour where technical jobs are so
routinely handed to individuals without knowledge of the technologies
they are expected to use?
I'm just trying to "hack" the frontend together to hook it up
with the glorious backend code we have written :) (sorry)
Click to expand...

There is no need to apologise, it won't have been you who made the
strange decision.
<script language="javascript">
function choose( id, shortcut, name )
{
window.opener.document.forms[0].function.value = id;
Click to expand...
<snip> ^^^^^^^^

Lowercase "function" is a keyword in javascript ...
Click to expand...
Click to expand...
I did wonder if this could be a problem.
It appears that an input
field called "function" is ok unless I need to access that field via
javascript (is that the case?).
Click to expand...

Yes, HTML doesn't care (name attributes are CDATA, virtually
unrestricted) and the server side doesn't have to care either. It still
saves a lot of trouble in the long run if form control names do not
correspond with browser property names, javascript key and reserved
words, etc, and conform to the format of legal javascript identifiers.
Where can I find information about
this "bracket notation property accessor" you mention.
Click to expand...

I should be able to say "any book on javascript", but unfortunate that
would not be true as javascript books tend to be poor and the ones I
have read brush over the subject, or make misleading statements about
it. So this group's FAQ is your best bet (and the resources linked to
from it, possibly along with the ECMAScript language specification (ECMA
262 3rd edition):-

<URL: http://jibbering.com/faq >

(quick answers: (4.13) 4.25 and 4.39 directly address this subject.)
From my point of view it might be easier to get
javascript to write to a field called "function".
Click to expand...

Bracket notation should allow that.
What about the "getElementById" function in
javascript - would this allow me to access a field called
"function"?
Click to expand...

If 'called' means 'given an *ID* attribute of "function"', then yes. But
you sacrifice some back-compatibility in doing so as the -
document.forms - collection (and contained structure) has been around
for considerably longer than W3C DOM Core implementations.

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image shifts to the right when export the page to pdf 4
Javascript DOM 1
Nested Loop Insert Page Break 1
Script to send email not working 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Only one table shows up with the information 2
Function call from button to automatic 7

Members online

Total: 53 (members: 1, guests: 52)
Robots: 326

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,059
Latest member
cryptoseoagencies

Latest Threads

Top