title: jQuery load reloading content in div via form submit in div
body: <p>I'm working on a messaging system. I have finished the inbox and message viewing parts. They are loaded in a div on the user account page and it all works with out refreshing the page.</p>
  
  <p>I based the jquery for this on <a href="http://www.hashbangcode.com/blog/using-jquery-load-content-page-without-iframe-536.html" rel="nofollow noreferrer">this article</a>.</p>
  
  <p>Got some help on here for getting the message links to open the message within the div with out refreshing the page, and how to add a filter to allow profile links to actually refresh and go to the actual profile page. That's all good.</p>
  
  <p>I moved on to the message sending side which uses a modal (twitter bootstrap) to load the external form. That works too, but I have now spent ages trying to work out how to do the same thing I did with links, with the form submit i.e. getting it to submit with out refreshing the whole page. Again, I am using pretty much the same jQuery as on the inbox part.</p>
  
  <p>Here is the inbox code:</p>
  
  <pre><code>&lt;p id="waiting"&gt;&lt;!-- ajax loading --&gt;&lt;/p&gt;
  &lt;div class="messages"&gt;&lt;!-- inbox --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$.ajaxSetup({ cache: false});
  $(document).ready(function(){
      // set up the click event
      $('a.loader').live('click', function() {
          var toLoad = '&lt;? echo base_url(); ?&gt;user/messaging/';
          $('.messages').fadeOut(100, loadContent);
          $('#load').remove();
          $('#waiting').append('&lt;div id="load" style="height: 700px; background:url(&lt;? echo base_url(); ?&gt;files/recordCovers/index.html?&lt;? echo rand(5,1555); ?&gt;); background-size: cover;"&gt;&lt;div class="circle"&gt;&lt;/div&gt;&lt;div class="circle1"&gt;&lt;/div&gt;&lt;/div&gt;');
          $('#load').fadeOut(1000);
  
          function loadContent() {
              $('.messages').load(toLoad, '', function(response, status, xhr) {
                  if (status == 'error') {
                      var msg = "Sorry but there was an error: ";
                      $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                  }            
              }).fadeIn(4000, hideLoader());
          }
          function hideLoader() {
              $('#load').fadeOut(2000);
          }
          return false;
      });
  });
  
  &lt;? // this makes the links open in the same div
  // a:not(.profile) allows profile links to open in browser window
  // we put class="profile" on profile links.?&gt;
  $(".messages").on("click", "a:not(.profile)", function (e) {
      $(".messages").load($(this).attr("href"));
      e.preventDefault();
  });
  </code></pre>