title: jQuery ajax response not displaying when returning to current page
body: <p>I'm attempting to post some data back to the same page through ajax. In the example below the <code>$name</code> variable is not being updated in my page once the button is clicked. However, if I look at the console log of the response from ajax (using firebug) it shows the correct html, with the name inserted (i.e. <code>&lt;div&gt;Matthew&lt;/div&gt;</code>) - the page just isn't being updated with this response. Any ideas for how to fix this would be greatly appreciated.</p>
  
  <p>The code I have is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;?php
  $name = "A name";
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["name"])) {
      $name = "No name!";
    }
    else{
      $name = $_POST["name"];
    }
  }
  ?&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $("button").click(function(){ 
         var mydata = {name: "Matthew"}; 
         $.ajax({
            type: 'POST',
            data: mydata,
            success: function(data){
              console.log(data);
            }
          });
  
      });
  });
  &lt;/script&gt;
  
  &lt;button&gt;Send an HTTP POST request to a page and get the result back&lt;/button&gt;
  
  &lt;div id="name"&gt;
  &lt;?php echo $name;?&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>