如何在用戶點擊選項卡時刷新JSP中的選項卡內容？

我知道這是一個重複的問題。但是我沒有找到解決我的問題的好辦法。我用一些標籤創建了一個JSP頁面。我想在用戶點擊選項卡時重新加載標籤的內容。如何在用戶點擊選項卡時刷新JSP中的選項卡內容？

<div class="navbar btn-navbar"> 
     <div id="tabs" class="tabbable"> 
      <ul id="myTab" class="nav nav-tabs"> 
       <li><a href="#datacollector" target="main" 
        data-toggle="tab">Data Collector</a></li> 
       <li><a href="#fromDB" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li><a href="#fromFile" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li><a href="#email" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data 
         Map</a></li> 
       <li><a href="#schedule" target="main" data-toggle="tab">Schedule</a></li> 
      </ul>

什麼應該是我的腳本？

來源

2013-04-02 iCode

如何AJAX？ –

你能幫助我如何使用AJAX進行編碼嗎？ – iCode

$('#tab-id-selector').click(function() { 
    $.ajax({ 
     type:'POST', 
     url: 'targetUrl', 
     data: { 
     'foo': 'bar' //request parameters,In your case may be the tab ID to recognize on the server side that which tab pressed 
    }, 
     success: function(response) { 
      //handle the data here ,means set the data where you want 
     } 
    }); 
});

http://api.jquery.com/jQuery.ajax/

來源

2013-04-02 07:42:55

我應該下載任何AJAX javascript嗎？ – iCode

將jquery添加到您的頁面就足夠了。 http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ –

我在一個選項卡中有一個iframe。那麼，我應該爲foo：bar提供哪些目標url和wat？ – iCode

爲什麼你需要重新加載內容的標籤，當點擊？根據請求加載內容還不夠嗎？

$("tab selector").click(function(){ 

     //do ajax-request to fetch data 
     $.ajax({ 
      url: "/url/to/your/data", 
      type: "GET", 
      contentType: "application/json; charset=UTF8", 
      success: (function (data) { 
       //load your tab with your new data 
      }), 
      error: (function (data) { 
      }) 
     }); 
    });

來源

2013-04-02 07:46:04

選項卡的內容基於前一個選項卡內容的處理。 – iCode

像@Baadshah建議的那樣，您從已處理的選項卡發佈數據，然後根據處理的選項卡響應正確的數據。 –

我的標籤包含iframe。當我點擊標籤時，我想要重新加載iframe。我該怎麼辦？ – iCode

使用jQuery來獲取數據（使用AJAX）。我猜你已經在使用jQuery UI了。我假設你想從HTML文件加載內容？

HTML

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Data Collector</a></li> 
    <li><a href="#tabs-2">Data Load</a></li> 
    <li><a href="#tabs-3">Data Load</a></li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
    </div> 
    <div id="tabs-3"> 
    </div> 
</div>

的JavaScript - 初始化這樣

$("#tabs").tabs({ 
    beforeActivate: function(event, ui) { 
     var myData = { 
       previousTabSelection: 5 // read previous tab data ... 
     }; 

     $.get('/url/to/your/content.html', myData).done(function(contentHtml){ 
     ui.newPanel.html(contentHtml); 
     }); 

     // or without params 
     if(myData.previousTabSelection === 5){ 
      ui.newPanel.load('/url/to/your/content.html'); 
     } 
    } 
});

來源

2013-04-02 08:40:49 kayz1

URL應該是什麼。你能舉一個例子嗎？因爲每個選項卡都包含iframe。當我點擊選項卡時，我想要重新加載iframe頁面 – iCode

如何在用戶點擊選項卡時刷新JSP中的選項卡內容？

回答

相關問題