Resize Frame when Ajax is finished

Question

I am trying to resize an iframe after the content is loaded. The page (that is loaded into the iframe) has some controls that cause it to load addition information to the bottom of the page, and it does this through JQuery's $.ajax() method.

I have tried using $(document).ajaxComplete() but that ends up getting registered before the $.ajax() methods success event. What I want to do is register an event for after the success event.

For example:

<script type='text/javascript'>
$(document).ready(function(){
    resizeIframe();
    $(document).ajaxComplete("resizeIframe");
    $(document).load("resizeIframe");
    
});

function resizeIframe()
{
    $(window).parent().height($("body").height());
    $(window).scrollTop(0);
}
</script>

This works properly on statically loaded pages. However, if I have something like this:

<script type='text/javascript'>
    $("someObject").on('click', function (){
       $.ajax({
            type: 'post',
            url: 'someurl.php',
            success: function(data) 
            {
                 $("body").append(data);
            }
       });
    });
</script>

then the resizeIframe gets called before the .ajax success function (meaning that the DOM doesn't contain those addition elements, and thus the page is the wrong height. I would like to avoid adding resizeIframe to every ajax call I make, is there an event I can use to resolve this?

Update

I have tried this:

$(document).ready(function(){
    resizeIframe();
    $(document).load(function(){ resizeIframe();});
    $(document).ajaxComplete(function(){
            setTimeout(resizeIframe, 0);
    });
});

and it seems to be working in Firefox 21. However, it is not working in IE10 (and I have to be backwards compatible to IE8).

Answer 1

Local events will always be executed before the global event (Local Success -> Global Success -> Local complete -> Global Complete). You can set a global success event:

$(document).ajaxSuccess("resizeIframe");

API Ref: http://api.jquery.com/ajaxSuccess/

And then specify a local complete event:

url: 'someurl.php',
complete: function(data) 
{
    $("body").append(data);
}

Note that the complete function runs whenever an AJAX call finishes.