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." );
                            });
                    }
            });
    });

Answer 2

What you are doing is not neassary Do it so:

<div id="tabs">
 <ul>
  <li><a href="financialTransactions.html">Transaction History</a></li>
 </ul>
</div>

<script>
    $(function() {
            $('#tabs').tabs();
    });
</script>

Look at the docs. This examples does the same what you like to do.

Answer 3

try:

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