title: Populate div with data returned from another page using JQuery and AJAX
body: <p>I have a form that when submitted, goes to <code>blah.php</code>. The problem is, <code>blah.php</code> goes off site to another domain. JQuery sees that and gives a <code>302 Object Moved error</code>. So I had to use <code>JSON</code> and <code>AJAX</code> to send the form. Comment details are within the Jquery code below.</p>
  
  <p>The flow should be click button, check server side, if not <code>'ok'</code> response, output response in status div and stop everything server side on that page. If <code>'ok'</code> was the response let form continue on its way</p>
  
  <p>Quick mock up of my code</p>
  
  <pre><code>&lt;form id="ppform" method="post" action"blah.php"&gt;
  &lt;input id="someid" type="text" /&gt;
  &lt;button id="sendbutton"&gt;Send&lt;/button&gt;
  &lt;div id="status"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  $(document).ready(function(){
      $(document).on('click', '#sendbutton', function(){
           $('#status').empty();
           $.ajax({
               type: "POST",
               url: "blah.php",
               data: reqBody,
               dataType: "json",
               success:function(data,textStatus){ 
                    // here I want the div to return data if the response isn't 'ok'
                    if(data!='ok'){
                        $('#status').append(data);
                    }else{
                        // response was 'ok' so empty div, 
                        // show loading gif and submit the form
                        $('#status').empty().html('&lt;div id="proc"&gt;Processing&lt;/div&gt;&lt;img src="loading.gif" /&gt;');
                        if (data.redirect){
                           window.location.href = data.redirect;
                        } else {
                           $("#ppform").replaceWith(data.form);
                        }
                    }
                 }
           });
      }); 
  });
  </code></pre>