Member Avatar for zaxonus

Hello,

I have the following problem with Ajax :

- The files I will mention here are copied at the end of this mail, so anyone can look if necessary.
- My intention is to bring the contents of SubOne.php into the area defined by the DIV tag named "MyDiv" when I

press the button (in main.php) and then use the "Form Button" inside SubOne.php to change the text from :
"This is the subwindow one. We did not get any message"
to :
"This is the subwindow one. We got a message"

But the last part does not work the way I want. When I push the "Form Button" the text changes, but it reloads

using the whole window. I want the text to change while staying in the MyDiv area and leaving alone the top part of

my main.php window.

Can someone tell me what I need to change to make it work.

Thanks in advance for any tip or suggestion.

Michel


---------------------- Here is the code ----------------------


================== Beginning of main.php ==================
<html>
<head>
<title>Main Window</title>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("MyDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","SubOne.php",true);
xmlhttp.send();
}
</script>
</head>

<body>
This the main window.
<Input Type="SUBMIT" Value="Load SubOne into MyDiv" onClick="loadXMLDoc()">

<br>----------------------------------------------------------------<br>
<div ID='MyDiv'>
This the MyDiv space.
</div>
<br>----------------------------------------------------------------<br>

</body>
</html>
================== End of main.php ==================


================== Beginning of SubOne.php ==================
<html>
<head>
<title>Subwindow One</title>
</script>

</head>
<body>
This is the subwindow one.

<?php

$MSG=$_POST;

if ($MSG) echo "We got a message";
else echo "We did not get any message";

?>

<BR><BR>

<FORM METHOD='POST' ACTION='SubOne.php'>
<INPUT TYPE='SUBMIT' NAME='MSG' VALUE='Form Button'>
</FORM>

</body>
</html>
================== End of SubOne.php ==================

  • 3 Contributors
  • 6 Replies
  • 251 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by zaxonus
Member Avatar for Graphix

You first check whether a responsetext is returned before you even sent the request! Also the $MSG will always be empty, as you do not send any post-data with your request.

Member Avatar for zaxonus

I am not sure I understand this comment.

The reception of MSG is OK. If you try it and push on the "Form Button" button you will see the message change from :
"We did not get any message"
to
"We got a message"
so this part is fine. My problem is that SubOne.php occupies the whole window, when it should occupy only the part between the two :
"----------------------------------------------------------------"
and leave alone the upper part.

Member Avatar for Graphix

Oooh alright, I think I know what you mean. You are loading the <html> and <body> into the html-page, so there are 2 different documents. This is not allowed. Change your SubOne.php to:

This is the subwindow one.

<?php

$MSG=$_POST['MSG'];

if ($MSG) echo "We got a message";
else echo "We did not get any message";

?>

<BR><BR>

<FORM METHOD='POST' ACTION='SubOne.php'>
<INPUT TYPE='SUBMIT' NAME='MSG' VALUE='Form Button'>
</FORM>

(without the <html>, <head> and <body> tags)

~G

Edited by Graphix because: n/a
Member Avatar for zaxonus

Thanks a lot for this idea. I just followed your advice and tried it. But unfortunately it did not work.
It still behaves the same way as before.

If you happen to try on your server and find a solution please let me know.
I have to admit I am stuck with this problem right now -:)
Since I have no experience with Ajax it is probably not surprising, but still.

Member Avatar for fxm

You need something like this

<form name="inp" onsubmit="send();return false;">
     <input type="text" name="inp1" />
     <input type="submit" value="send" />
</form>

so there will be no further action after the send() function has finished communicating with the server and updating the <div>.

Member Avatar for zaxonus

Thank you.
I tried to follow this suggestion in several ways I could think of, but without success. If I take this part out of my code:
"ACTION='SubOne.php'"
and insert this :
"onsubmit="send();return false;""
Only the DIV gets reloaded indeed, but it comes back to its initial state instead of being filled with SubOne.php.
In other words it is like when I first look at main.php.

I must be missing something obviously.
But let me ask a question. When you use this code :
<form name="inp" onsubmit="send();return false;">
How does the form know which page it should use to fill up the DIV space ?
With what I tried, the reloaded contents is not taken from the right place.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.