Reload Whole Content of Tab in JQuery
<p>First of all, with all due respect, don't ask me why I have to do this. This request is someone request and he has his own reason. :D</p>

<p>So just to the point...</p>

<p>Lets just say "p1.php" contains this code :</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="tab1"&gt;
    &lt;?= $_GET['somechange1'] ?&gt;
    &lt;a onclick="actionRunOnTab1()"&gt;some change 1&lt;/a&gt;
&lt;/div&gt;
&lt;div id="tab2"&gt;
    &lt;?= $_GET['somechange2'] ?&gt;
&lt;/div&gt;
</code></pre>

<p>Then I include "p1.php" in "p2.php" and added some javascript just like this :</p>

<pre><code>&lt;script type="text/javascript" src="jquery-1.6.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="redmond/jquery-ui-1.8.16.custom.css" type="text/css" /&gt;

&lt;div id="tab"&gt;
    &lt;? include 'p1.php'; ?&gt;
&lt;/div&gt;

&lt;script language="javascript"&gt;
      $(function() {
        $('#tab').tabs();
      });

      // Some function
      function actionRunOnTab1() {
        $.get(
            "p1.php",
            { somechange1 : 'Something to send out 1' },
            function(data){
                $('#tab').html(data);
                $('#tab').tabs();
            }
        );      
    }
&lt;/script&gt;
</code></pre>

<p>I debug the result using firebug on firefox. at the first creation of tab using <code>$('#tab').tabs();</code> , it added some css class to all needed elements to create tab, but at the second time I use <code>$('#tab').tabs();</code> at function <code>actionRunOnTab1</code> it doesn't have any effect.</p>

<p>How can I refresh all tabs? If I reload 1 by 1 of tab it sure needs more extra $.get() which means need more than once to connect to server.</p>
