如何在用户点击选项卡时刷新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中的选项卡内容？

回答

相关问题