-2

私はtwitterブートストラップのナビゲーションバーを使用しています。各タブのコンテンツは、データベースからデータをロードするphp関数から取得されます。ページが読み込まれたら、タブの変更時に各タブの下のデータを更新できるようにしたいと思います（これは、それぞれのphp関数を再度呼び出すことと同じです）。それはjqueryonclick（）イベントになると思いますが、コンテンツを更新するにはどうすればよいですか？

<?php 
    require_once 'Offers.php';
    $offers = new Offers();
?>

<div class="navbar">
   <div class="navbar-inner">
    <ul class="nav" id="mytab">
      <li class="active"><a href="#tab1" data-toggle="tab">A</a></li>
      <li><a href="#tab2" data-toggle="tab">B</a></li>
      <li><a href="#tab3" data-toggle="tab">C</a></li>
    </ul>
  </div>
</div>


 <div class="tab-content">
     <div class="tab-pane active" id="tab1">
       <?php echo($offers->retrieveA());?>   
     </div>
     <div class="tab-pane" id="tab2">
       <?php echo($offers->retrieveB());?>
     <div class="tab-pane" id="tab3">
       <?php echo($offers->retrieveC());?>
    </div>

4

2 に答える 2

2

したがって、これはajaxを使用した非常に単純なソリューションです。

まず、jqueryイベントクリックを各タブにアタッチし、次に関数へのajax呼び出しを起動します。通常、ajaxイベントはファイル内のいくつかのphpスクリプトを呼び出し、ここでは関数を処理する必要があるため、それらを別のphpファイルに入れ、switch caseステートメントを使用してそれらから選択します。

だからここに行きます。まず、ナビゲーションバーのタブにIDを追加します。

<li class="active"><a href="#tab1" data-toggle="tab" id="nav1">A</a></li>
<li><a href="#tab2" data-toggle="tab" id="nav2">B</a></li>
<li><a href="#tab3" data-toggle="tab" id="nav3">C</a></li>

次に、各タブのイベントハンドラーをクリックします。各ハンドラーはajaxを使用してタブコンテンツを更新します。

//Functions to dynamically update navbar
$('#nav1').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab1'},
           type: 'post',
           success: function(output) {
                     $('#tab1').html(output);
                    }
    });
});
$('#nav2').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab2'},
           type: 'post',
           success: function(output) {
                      $('#tab2').html(output);
                    }
    });
});
$('#nav3').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab3'},
           type: 'post',
           success: function(output) {
                      $('#tab3').html(output);
                    }
    });
});

方法は次のとおりです。各ハンドラーで、作成しようとしている新しいphpスクリプト「refreshTabContent.php」を呼び出します。そのスクリプトでは、の値に基づいてwhichTab、適切なタブに表示するコンテンツを返す適切な関数を呼び出し、それをエコーバックします。

<?php

require_once 'Offers.php';
$offers = new Offers();


if(isset($_POST['whichTab']) && !empty($_POST['whichTab'])) {
    $action = $_POST['whichTab'];
    switch($action) {
        case 'tab1' : 
            echo($offers->retrieveA());
            break;
        case 'tab2' : 
            echo($offers->retrieveB());
            break;
        case 'tab3' : 
            echo($offers->retrieveC());
            break;
    }
}

?>
于 2013-03-07T20:16:59.030 に答える
1

ページ全体をリロードせずにオンザフライで何かを更新できる唯一の方法は、特にajaxを使用する場合はjavascript/jQueryを使用することです。onclickしたがって、PHPファイルへのajaxコールバックを実行するタブにをアタッチする必要があります。（ブートストラップがどのようにそれ自体をアタッチするかを覚えていないonclickので、それがまったく機能しない場合は、それが最初にチェックする場所です）。

$_GETただし、私は個人的に、選択したタブのコンテンツのみを返すことができるように、パラメーターを受け入れることができる方法でPHPファイルの2番目のバージョンを作成します。結果はajaxを介して返され、タブに送り返すことができます。

PHPから取得するコンテンツによっては、タブをクリックしたときに読み込みが一時停止する場合があります。

とにかく、タブをクリックしてリロードする場合は、事前にタブコンテンツをロードする価値があるかどうかはわかりません。詳細なしで言うのは難しい。

于 2013-03-07T19:21:58.787 に答える