在JQuery中重新加载Tab的整个内容

时间:2012-01-13 03:45:14

标签: php jquery

首先,在充分尊重的情况下,不要问我为什么要这样做。这个请求是有人要求的,他有自己的理由。 :d

所以就这一点......

让我们说“p1.php”包含以下代码:

<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>

然后我在“p2.php”中加入“p1.php”并添加一些javascript就像这样:

<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>

我在firefox上使用firebug调试结果。在使用$('#tab').tabs();首次创建选项卡时,它为所有需要的元素添加了一些css类来创建选项卡,但是第二次在函数$('#tab').tabs();使用actionRunOnTab1它没有任何影响。

如何刷新所有标签?如果我重新加载1个标签,确实需要更多额外的$ .get(),这意味着需要不止一次连接到服务器。

1 个答案:

答案 0 :(得分:1)

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

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