重新加载JQuery中Tab的全部内容

Question

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

So just to the point...

Lets just say "p1.php" contains this code :

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

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

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

<div id="tab">
    <? include 'p1.php'; ?>
</div>

<script language="javascript">
      $(function() {
        $('#tab').tabs();
      });

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

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

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.

Answer 1

要以编程方式重新加载Ajax选项卡，请调用load event并提供相关的选项卡索引。

$('#mytabs').tabs( "load" , index );