title: Triggering a jQuery Re-Draw After Getting Data With Ajax
body: <p>Good day, all,</p>
  
  <p>Long-time listener, first-time poster...</p>
  
  <p>I have a client who has been promised a seemingly very complex bit of functionality. They want to load the contents of 3 separate pages into one, after a visitor to their site successfully logs in to their account. They want this to happen without a page refresh. Ajax is the solution. I am not, however, experienced with Ajax.</p>
  
  <p>I'm having trouble figuring out how to tell when a $.get command (using jQuery's Ajax commands) has finished loading its content. My approach is to, once the login has been successful, to go and fetch the 3 separate pages, load their XHTML content into variables, and redraw the pages. Below you'll see my pseudo-code. I use "XXItemXX" to stand-in for actual paths. Each resulting page that I'm trying to pull in has a div with class "content" surrounding the data I want to retrieve. The XHTML looks like this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Page Name&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;...&lt;/div&gt;
          &lt;div class="content"&gt;
          .
          .
          .
          &lt;/div&gt;
          &lt;div id="footer"&gt;...&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jQuery code I've built follows. I'm able to get the form submitted and even get the content back from the various .get commands. The problem is, I can't seem to daisy-chain things as I normally would. I am struggling to figure out how to only fire the jQuery commands to draw the page once all 3 have been successfully retrieved. I'm afraid my biggest stumbling point is how to articulate this when searching with Google to see how others have dealt with this problem. I'm not sure exactly how to describe what I'm trying to accomplish in 10 words or less or in a fashion that will actually return the information I need.</p>
  
  <p>Can anyone help with this? I'm afraid I have too little time and too much to learn.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('XXLoginFormXX').submit(function () {
      $.ajax({  
          type: $(this).attr('method'),
          url: $(this).attr('action'),
          data: $(this).serialize(),
          beforeSend: function() {
              $('&lt;div class="loading"&gt;Loading...&lt;/div&gt;').insertBefore('XXLoginFormXX').css('position','absolute');
          },
          success: function(data) {  
              // On successful login, draw page. 
              $('.loading').fadeOut('slow');
              var dr_editProfileXHTML, dr_accountOrderListXHTML, dr_wishListsXHTML;
              $.get('XXPathToEditProfilePageXX', function(data1){
                  var dr_editProfileXHTML = $('div.content', data1);
              });
              $.get('XXPathToAccountOrderListPageXX', function(data2){
                  var dr_accountOrderListXHTML = $('div.content',data2);
              });
              $.get('XXPathToWishListsPageXX', function(data3){
                  var dr_wishListsXHTML = $('div.content',data3);
              });
              $('div.content').fadeOut(function(){
                  $(this).html(dr_editProfileXHTML);
                  $('XXEditProfileXHTMLXX').before(dr_accountOrderListXHTML);
                  $('XXEditProfileXHTMLXX').before(dr_wishListsXHTML);
              }).fadeIn();
          }
      }); 
      return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you very much for your time, help, and consideration.</p>
  
  <p>Yours,
  Sylvan012</p>