PDA

View Full Version : Form Insertion with Javascript Problem



ectechnologies
05-15-2008, 12:22 PM
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
05-15-2008, 04:12 PM
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
05-16-2008, 12:20 PM
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
05-16-2008, 02:22 PM
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
05-16-2008, 02:41 PM
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
08-05-2008, 08:19 AM
Could I refresh a div in the parent like this?

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


Here's its child.htm:

.elements['input_name'].value='whatever';
}
</script>
<input type="button" onclick="doit();">


Cheers

jscheuer1
08-05-2008, 08:42 AM
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
08-05-2008, 08:49 AM
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
08-05-2008, 09:34 AM
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
08-05-2008, 09:49 AM
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>

jscheuer1
08-05-2008, 10:13 AM
Once again, you cannot do anything from a child window to its opener that cannot be done in a window by itself. Additionally, if you are using PHP tokens from the child, they must have the expected values on the child window's page, otherwise they will not resolve properly.

To import a page to a division via javascript, you need either AJAX or Iframe, the second of which is best if the imported page has its own javascript on it unless that javascript code is very elementary and keyed only to onclick, onmouseover, etc., certainly not onload. But that's a whole other issue I don't want to get into right at the moment.

Also, when passing string arguments to a function, the delimiter for that string may not appear unescaped (delimiters in strings are escaped with a down slash [\]) within that string, and you cannot put a division with the same id as the division it is going into's id, so your second code block would need to look like so :


<a href="#" onclick="change('wishdiv', '<a href="mywishlist.php?name=<?php echo $ipaddress; ?>" onclick="MM_openBrWindow(\'mywishlist.php?name=<?php echo $ipaddress; ?>\',\'Mywishlist\',\'scrollbars=yes,width=600,height=600\');return false">My wishlist</a> <img src="img/mini-pink-heart.gif" alt="My wishlist" width="22" height="22" />');">Change me</a>

student101
08-05-2008, 10:21 AM
Thank you.

jscheuer1
08-05-2008, 11:06 AM
Yes, to answer your question that you edited out:


Cool, an iframe would be better then?

Would I then be able to pass values (like entire pages) from the child.php?

Here is a scenario -

parent page:


<!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, 'top=100, left=200, width=450 height=450');return false;">Child</a><br>
<iframe name="bob" src="about:blank" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>

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">

</head>
<body>
<a href="some.htm" target="bob">Some Page</a>
</body>
</html>

The some.htm can be any page. Incidentally, this setup (except for the specifications on the new window) will work even without javascript enabled.

jscheuer1
08-05-2008, 11:17 AM
I now see you've changed more than just your previous post, if you still have questions, make a new post or thread. In the future, if you are going to radically change a post, please consider that it might be better to just add a new post to a thread, so that the integrity of the thread may be maintained for others wishing to learn from it, and so that those responding to you don't get confused.

student101
08-05-2008, 11:44 AM
Will do for future,
That last example you gave solved it.

Thank you again.

Cheers

student101
08-06-2008, 06:49 AM
Yes, to answer your question that you edited out:
Here is a scenario -
parent page:

<!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, 'top=100, left=200, width=450 height=450');return false;">Child</a><br>
<iframe name="bob" src="about:blank" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>
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">
</head>
<body>
<a href="some.htm" target="bob">Some Page</a>
</body>
</html>
The some.htm can be any page. Incidentally, this setup (except for the specifications on the new window) will work even without javascript enabled.

Refresh an iframe from a popup window when the popup opens and or closes?

Is there a method to use in order for this to be loaded using an onload or onunload in the child.htm?

This is what I have;
parent.php which has an iframe frame.php(id=mylist) which has a link to another page.
The link should only appear if there is data for that $ipaddress, hence the refresh of the iframe frame.php(id=mylist).

The iframe frame.php(id=mylist) has this;

<?php $ipaddress = getenv('REMOTE_ADDR');
if ($rswish > 0) { // Show if not empty ?>
<a href="mylist.php?name=<?php echo $ipaddress; ?>My list</a>
<?php } // Show if not empty ?>
To produce rswish;


SELECT *
FROM table
WHERE name = '$ipaddress'

Currently I am forced to refresh the entire page to get this link to show.
I hope this can help you understand what I need?

Cheers

student101
08-06-2008, 07:51 AM
I may have solved it! YIPPPEEEEEE!!!

In the iframe I add this;
<meta http-equiv="refresh" content="6">
So every 6 seconds the iframe refreshes to see if the data is allowed to be shown.

Why didn't I see this earlier! dam&it!


THANK YOU - John