How to refresh the content of a tab in JSP when user clicks on a tab?

Question

I know this is a duplicate question. But I don't find a good solution to my problem. I created a JSP page with some tabs. I want to reload the contents of a tab when the user clicks on the tab.

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

What should be my script?

Answer 1

$('#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/

Answer 2

Why do you need to reload the content when clicking on the tabs? Isn't it enough to load the content at request?

    $("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) {
            })
        });
    });

Answer 3

Use jQuery to fetch data (using AJAX). I guess you already using jQuery UI . I assume you want to load content from HTML file?

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 - init like this

$( "#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');
      }
  }
});