Question

I have a big problem with my website.

I have made it in a way that seems to stop be from doing anything.

I have a number of containers, the main part of the page has three small containers all on top of each other and then a bigger container next to them that has the main content. The content that is shown in this main container is pulled from other pages so I don’t have to refresh the whole page ever time a link is pressed. So I have one main page (the index) and a bunch of other content filled pages.

Now, if a page were to need to post data to the server to process it and then confirm with the user, this can’t be done with normal PHP like I’m used to because the whole page is refreshed and it goes back to the default.

So I thought, I know Ajax can do this. I can post data to the server, process it and then change something on that page without loading anything…..

But I was wrong, it seems that it still wants to refresh the whole page meaning I lose my data. Also with the Ajax I am using “post” not “get” but for some reason it’s putting the data into the address bar.

Is there a way I can keep my current structure and be able to do this, or am I doomed?

Any help, tips, code or advice would be MORE than welcome and thank you for the time and help.

Oh yeah, if I view the content outside of the index page the script runs just fine, it’s only when the index pulls it from another page.

Ajax:

unction pass() 
{

// Real Browsers (chrome)

if (window.XMLHttpRequest) 
{
    xhr = new XMLHttpRequest();
}

// IE

else if (window.ActiveXObject) 
{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

var oldPass = document.getElementById('oldPass').value;
var newPass = document.getElementById('newPass').value;
var newPassCheck = document.getElementById('newPassCheck').value;

xhr.open("POST","changeSettings.php");

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

var obj = {oldPass: oldPass, newPass: newPass, newPassCheck: newPassCheck};

xhr.send("data=" + JSON.stringify(obj));

xhr.onreadystatechange=function() 
{

    if (xhr.readyState==4) 
    {
        //grade = xhr.responseText;

        document.getElementById("myDiv").innerHTML = xhr.responseText;

        //document.write.grade;

        //alert ("Nice essay. Your grade is " + grade);
    }

}

return false;

}

Here is the original page:

<div id="content">
<form>

    <h1>This page is still under construction please do not attempt to use it!</h1>

        <p>
            Old Password:       <input type="password" name="oldPass" id="oldPass"><br />
            new Password:       <input type="password" name="newPass" id="newPass"><br />
            Retype Password:    <input type="password" name="newPassCheck" id="newPassCheck"><br />
                        <input type="submit" name="submit" value="Submit" onClick="return pass();">

        </p>

</form>

<div id="myDiv" name="myDiv"> </div>

</div>

Answer 1

Just because you’re supplying “POST not GET” in the form doesn’t mean ajax will handle it this way.

What needs to be actually done is attach to the submit event of the form, then let AJAX handle it the rest of the way. On a confirmed submission (or even a failure) you can update content (or show errors).

To keep it simple with jQuery…

<div id="content-container">
  <form method="post" action="/some/submission/page.php">
    <!-- flag to let the landing page know it's an ajax request
         this is optional, but IMHO it makes for a more seamless
         experience -->
    <input type="hidden" name="ajax" value="true" />

    <!-- controls go here -->
  </form>
</div>

So there’s your form. Now, you need to attach to the submit event. Again, I use jQuery for simplicity, but feel free to use any method. I also am creating a very generic controller here so you could presumably use it for every form found on the page, but that’s up to you. (And, because we still decorate the <form> an absence of javascript will still proceed, but when it IS there, it will use the nice ajax look and feel)

// use .live to catch current and future <form>s
$('form').live('submit',function(){
  var target = $(this).prop('action'),
      method = $(this).prop('method'),
      data = $(this).serialize();

  // send the ajax request
  $.ajax({
    url: target,
    type: method,
    data: data,
    success: function(data){
      //proceed with how you want to handle the returned data
    }
  });
});

The above will take a normal form found on the page and make it submit via AJAX. You may also want to bind to $.ajaxError so you can handle any failures.

Also, depending on the content you return from the AJAX call, you can either pass the entire response back to the container ($('#content-container').html(data); in the success call), or if it’s JSON or plain text, display other data.

Oh, and using my example, you may want to have something like the following in your posted page:

<?php
  $ajax_call = isset($_POST['ajax']);

  if (!$ajax_call){
    // not an ajax call, go ahead with your theme and display headers
  }

  // output content as usual

  if (!$ajax_call){
    // again, not ajax, so dump footers too
  }

(That way when it’s AJAX, only the info in your container is returned, otherwise display the page as usual because they probably don’t support AJAX/JavaScript).