jQuery UI AJAX Tabs - first tab doesn't load

Question

I'm using jQuery Tabs to dynamically load results from some calculations with AJAX. It works fine except that the first (default) tab doesn't hit the server for the results... it caches the first tab's data from the last set of calculations or is blank if this is the first run of the session. How do I force it to load the default tab from the server?

More detail: I have a jQuery Dialog that basically displays a loading GIF while the server is doing the calculations. When the result is returned as a JSON object, it checks if the calculation was successful and if so, closes the loading dialog and opens the results dialog. The first tab either has the old results from the last calculation or is blank if it's the first run when the dialog opens... I know it's not hitting the server for the first tab because the "Net" tab in Firefox's doesn't show any activity when the dialog pops up, but if I change tabs and then back to the first, the AJAX requests show up in the network activity. I'm using Tomcat for the server if that's important.

Below is the code. Thanks for your help!

Javascript:

$(document).ready(function () {
    $("#loading-dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function() {
           $.post("run", {
             var1: whatever, ...
           }).done(function(res) {
                if( parseInt(res.status) === 0 ) {
                   $("#loading-dialog").dialog("close");
                   $("#results-dialog").dialog("open");
                } else {
                   alert(res.msg);
                }
            }).fail(function(xhr, textStatus, errorThrown) {
                alert('Error: '+xhr.responseText);
            })
         }
    })
    $("#results-dialog").dialog({
        autoOpen: false,
        width: 750,
            open: function () {
                $("#results-tab").tabs("load", 1); // try to force reloading first tab... doesn't work
            },
        buttons: {
            "OK": function() {
                $(this).dialog('close');
            }
        }
    });
    $( "#results-tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
            ui.panel.html("Results go here.");
        });
        }
    });
}); 

Relevant HTML bits:

<div id="loading-dialog">
      <center>Please wait, running model.
      <img src="${pageContext.request.contextPath}/images/loading.gif"></center>
</div>
<div id="results-dialog">
    <div id="results-tabs">
        <ul>
            <li><a href="result?type=one">Tab 1</a></li>
            <li><a href="result?type=two">Tab 2</a></li>
            <li><a href="result?type=three">Tab 3</a></li>
            <li><a href="result?type=four">Tab 4</a></li>
            <li><a href="result?type=five">Tab 5</a></li>
            <li><a href="result?type=six">Tab 6</a></li>
        </ul>
    </div>
</div>

Answer 1

Your id was wrong (missing an s) when loading the first tab, and jquery tabs are zero-indexed so the following should work:

$("#results-dialog").dialog({
       autoOpen: false,
       width: 750,
       open: function () {
            $("#results-tabs").tabs("load", 0); // try to force reloading first tab... doesn't work
        },
       buttons: {
           "OK": function() {
              $(this).dialog('close');
          }
     }
 });