Page reload inside a DIV not working with Ajax. How do I solve it ?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • zaxonus
    New Member
    • Jun 2010
    • 1

    Page reload inside a DIV not working with Ajax. How do I solve it ?

    Hello,

    I have had the following problem with Ajax for a few days, and have not been able to solve it even after a few suggestions :

    - The two files I mention here are copied at the end of this mail, so anyone can look if necessary.

    I have a main document called : main.php
    and a sub-document called : SubOne.php

    My intention is to :
    1) Bring the contents of SubOne.php into the area defined by the DIV tag named "MyDiv" when I press the button (in main.php).
    2) 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"

    The first part works OK, but the second 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 =============== ===
    Code:
    <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 =============== ===
    Code:
    <html>
    <head>
    <title>Subwindow One</title>
    </head>
    
    <body>
    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>
    
    </body>
    </html>
    =============== === End of SubOne.php =============== ===
  • johny10151981
    Top Contributor
    • Jan 2010
    • 1059

    #2
    you better try iframe instead div.
    for debug purpose try to see on alert what you see.

    Comment

    Working...