jQuery UI external tabs plugin issue

Question

After I link an external html - which is a flexigrid table - all the flexigrid formatting and functions become extremely buggy. Has any one had this issue before or have any advice?

This is what I am doing to link the external html document:

 <div id = "tabs">

 <li><a href="#paymentsTab">Transaction History</a></li><

 <div id = "paymentsTab"></div>

 </div>

 </div>

<script>

    $(function() {
            $('#tabs').tabs();
            $('#paymentsTab').load('financialTransactions.html');
    });

</script>

Answer 1

This is what I did to solve it:

         $(function() {
            $( "#tabs" ).tabs({
                    beforeLoad: function( event, ui ) {
                            ui.ajaxSettings.dataTypes[0] = "html"; //very important!
                            ui.jqXHR.error(function() {
                                    ui.panel.html(
                                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                    "If this wouldn't be a demo." );
                            });
                    }
            });
    });