Form Insertion with Javascript Problem

[ectechnologies]

Hi,

I have a slight problem that i cant seem to fix. What i have is a CMS site developed by yours truly however. This site is coded on Coldfusion language and HTML and a bit of javascript.

I have a page that allows me to add an item to the webpage (Refered to as the Parent Page), like a personal little blog about the clients site. Inside this page is a Image Upload button and this opens up a little popup(referred to as the Child Page) that handles all of the image upload (Coldfusion language only), and this works fine. This also gives me the Absolute Path of the image just uploaded and i use Coldfusion Code (ExpandPath()) to make it a relative path.

However once i have finished uploading the file, i want it to insert the RELATIVE path into the Parent Pages FORM.

All of this information is being saved to the database and i am allowing the client to have complete control. At the moment i have set up a copy and paste function (Javascript) to copy the Path, from the Child Page, and then they have to paste the path back into the Parent Page's Form.

This is frustrating as IE asks for access to do this and also isnt a neat way of doing it.

Is there Javascript code that does allow for this to happen and does anyone know how to do it. Before any would like to say that it can Lock the row in the database and just update that particular coloumn, my answer NO as there are too many contributing factors as to why not.

Any advise would be appreciated. Thanks.

p.s. I am new to javascipt so go easy on me and i should be able to learn it easy enough.

[jscheuer1]

First of all, if IE balks at the client doing this, it may mean that IE would also balk at javascript doing this, but it might not, because we don't have to paste anything in javascript, unless that is that the two pages are on different domains, and at that point we probably can't paste using javascript anyway.

If both pages are on the same domain and the child window is opened using javascript:

In the child window, the parent is known as this.opener.

So you could do in javascript:

this.opener.document.forms['form_name'].elements['input_name'].value=whatever;

from the page in the child window to change the value of an input on the page in the parent window, where form_name is the name a uniquely named form on the parent page, and input_name is the name of a uniquely named text (or other) input in that form, and whatever is a variable on the page in the child window that holds the value you want to pass.

[ectechnologies]

Hi,

Thanks for the reply, but i am not sure what to do with this. How do i call this to make it work. Do i use an onload event??????. and also when i tryed to add this to my code (this was a quick test so i will try again later when i have more time) i wasnt able to make sense of it. Thanks for the fast reply though.

Regards,

[jscheuer1]

It should be done at a time when the string value you want to appear on the parent window's page is available on the child page. It can even be done repeatedly, like every time that value might change on the child page.

Re-reading your original post, it would be after the file is uploaded and after you have obtained the relative path. If you can do (the green part is just a comment):

var x=ExpandPath(); // use the full syntax required to get the relative path here

Then you can follow that immediately with:

this.opener.document.forms['form_name'].elements['input_name'].value=x;

This requires that both pages are on the same domain and that the parent actually opened the child (preferably opened the child via javascript), and a form on the parent window's page that has at least these features:

<form name="form_name">
<input type="text" name="input_name">
</form>

The input could be a hidden input or any type of input that suits your purposes, as long as it has the name (which can be anything you like) referenced from the child page. It just sounded like you wanted a text input.

Same with the form name, as long as you use it on the parent for the form and on the child to reference that form, you're good.

However, as I said before there can be only one form on the parent with that particular form name, and only one element in that form with that particular input name.

Now, the example form I gave isn't even valid, it has no action attribute for one thing. So of course you can add that and any other stuff you wan/need to it, including other inputs and elements.

Further, this is all just a bare bones approach. You probably also want to make sure that the parent window is still open and that it still contains the page with the form on it. But we can get to that later, once we get the basics working.

[jscheuer1]

I figured I should test this out. After all, I haven't done anything like this in awhile. It works, but window.opener works in more cases than this.opener does. And the child must be opened using javascript.

Here's my test parent.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<a href="child.htm" target="_blank" 
onclick="window.open(this.href,this.target,'width=300, height=300, left=250');return false;"
>Child</a><br>
<form name="form_name">
<input type="text" name="input_name">
</form>
</body>
</html>

Here's its child.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function doit(){
window.opener.document.forms['form_name'].elements['input_name'].value='whatever';
}
</script>
</head>
<body>
<input type="button" onclick="doit();">
</body>
</html>

[student101]

Could I refresh a div in the parent like this?

window.opener.document.forms['frmwishform'].elements['wishdiv'].location.reload();

Here's its child.htm:
[CODE<script type="text/javascript">
function doit(){
window.opener.document.forms['form_name'].elements['input_name'].value='whatever';
}
</script>
<input type="button" onclick="doit();">
[/CODE]

Cheers

[jscheuer1]

Could I refresh a div in the parent like this?

window.opener.document.forms['frmwishform'].elements['wishdiv'].location.reload();

Probably not. And this isn't because you cannot do just about anything you like on the parent from the child, but because I don't think you can do that from the parent. The location.reload() method is for reloading an entire page, not just portions of it. However, you could change the contents of a division. Now, if you wanted to do that, and you mean an actual division element, although it is an element, it isn't a form element, so would need to be accessed via its id using window.opener.document.getElementsById(id) or another method that accesses those sorts of elements (divisions, paragraphs, etc.) on a page.

Bottom line, if you can't do it on the opener itself without the window.opener prefix, you cannot do it from its child window with the window.opener prefix.

[student101]

I have this idea below; but would like to only REFRESH a DIV in the parent page.

<div id="div1">This is my text. <a onclick="change('div2','I love the color blue!')">Click here</a>.</div>
<div id="div2">How cool is blue? <a onclick="change('div3','I love the color blue!')">Click here</a>.</div>
<div id="div3">I hate the color blue.</div>
<script type="text/javascript">
function change(id, html){
document.getElementById( id ).innerHTML = html;
}
</script>

My only other option is to keep it the same and reload the entire page with;

<script language="JavaScript">
window.close();
if (window.opener && !window.opener.closed) {
window.opener.location.reload();
} 
</script>

[jscheuer1]

You can use a function like:

function change(id, html){
document.getElementById( id ).innerHTML = html;
}

that is on the opener from the child window like so:

window.opener.change('div2', 'whatever');

But if you mean you want to put things back the way they were (in your example), it would be:

window.opener.change('div2', 'How cool is blue? <a onclick="change(\'div3\',\'I love the color blue!\')">Click here</a>.');

You could get creative and store the original values as properties of the function itself:

function change(id, html, restore){
if(!change[id] && !restore)
change[id] = document.getElementById( id ).innerHTML;
else if (change[id] && restore)
document.getElementById( id ).innerHTML = change[id];
if (!restore)
document.getElementById( id ).innerHTML = html;
}

Then if the innerHTML had been changed, this would restore it (from the child window):

window.opener.change('div2', '', true);

The function would still also work with its original syntax for its original purpose.

[student101]

Better idea;

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}

And use this;

<a href="#" onclick="load('wish.php','wishdiv');return false;">Load it</a>

What I need to do is add this to the closing tag of the child page - so when the child page closes it load this page in the parent.

Not sure how it goes?

<script language="JavaScript">
load('wish.php','wishdiv');return false;
window.close();
if (window.opener && !window.opener.closed) {
window.opener.location.reload();
} 
</script>