CODEWITHSUNDEEP
jqueryhtml
Han
Han

Reputation: 99

How can I know when ajax loaded content finished?

I am loading HTML using AJAX, in the main page I have two divs (one is on the left side called home-logo, the other is called home-copy), AJAX will load content fit into the div home-copy, but content of each page are different. How do I get the height of each content then set this height to home-copy.height? 

function handleAjax(e) { 
    // get the page we want 
    getPage = $(this).attr('href'); 
    // make AJAX call 
    $.get('ajax.php', {page: getPage}, function(data) { 
        result = $.parseJSON(data); 
        // fill in new page 
        $('#subnav').html(result.subnav); 
        $('#home-copy').html(result.copy);
        // get document height and get rid of 15% minus the height of the boxes and padding 
        docHeight = [$(document).height()-($(document).height()*.15)]-100; 

        // change height of content boxes 
        $('#home-logo').animate({height: docHeight}, 0); 
        $('#home-copy').animate({
            height: docHeight, 
            backgroundColor: 'white', 
            color: 'gray', 
            paddingTop: 50
        }, 0); 
        // fade out the footer 
        $('#footer-row').fadeOut(); 
        // change background 
        //$('#content-area').backstretch(result.background); 
        $('#background img').attr("src",result.background); 

        // clear old nav 
        $('.current_page_item_green').removeClass('current_page_item_green'); 
        $('.current_page_item').removeClass('current_page_item'); 

        // update navigation 
        if (result.nav_color == 'green') { 
            // add green 
            $('.nav-link').each(function() { 
                $(this).addClass('green'); 
            }); 
            $(result.current_page_item).addClass('current_page_item_green'); 
        } else { 
            $('.nav-link').each(function() { 
                $(this).removeClass('green'); 
            }); 
            $(result.current_page_item).addClass('current_page _item'); 
        } 
    }); 
}

Upvotes: 0

Views: 94

Answers (2)

Nick
Nick

Reputation: 4212

use ajax success function

like

success: function (dataCheck) {
                // code after success 
                }

or by using done method like

Example: Save some data to the server and notify the user once it's complete.

$.ajax({
         type: "POST",
         url: "some.php",
         data: { name: "John", location: "Boston" }
      }).done(function( msg ) 
       {
         alert( "Data Saved: " + msg );
      });

Upvotes: 2

Chris Farmer
Chris Farmer

Reputation: 25396

It looks like you're already specifying a function that gets called on success of the AJAX call. You may want to use the ajax method instead of get, though, since you get more granularity in how you deal with configuration and failure.

Upvotes: 3

Related Questions