How to fetch data dynamically on each "Tab" click?

Question

I have a scenario where in a VisualForce page, there are multiple tabs with some repeating values. On clicking each tab, data needs to be fetched dynamically. Currently I am implementing the tabs using JQuery tabs.

For Eg:

<apex:page controller="xxx">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
    var j$ = jQuery.noConflict();  

    function onclick() {
        j$("#tabs").tabs();               
    }  
</script>
<apex:form id="frm1>
.
.
.
.
<div id="tabs" >
    <ul>
        <apex:repeat value="{!objList}" var="obj">
            <li><a id="tablink" href="#tabs-{!obj.id}" >{!obj.name} - {!obj.id} </a>                            
            </li>                        
        </apex:repeat>                    
    </ul>    
    <apex:repeat id="repId" value="{!objList}" var="obj" >                    
        <div id="tabs-{!obj.id}" >                        
            <apex:tabPanel switchType="client" selectedTab="sch" id="dataTabPanel" >
                <apex:tab label="Tab1" name="Scheduled Visit Mapping" id="sch"> 
                    <apex:outputPanel id="op1">
                        <apex:outputLabel styleClass="c1">Name : </apex:outputLabel>{!obj.name}
                        <apex:outputLabel styleClass="c1">ID : </apex:outputLabel>{!obj.id}
                         .           
                         .
                <apex:tab label="Tab2" name="Scheduled Visit Mapping" id="sch"> 
                    .
                    .
                    .
            </apex:tabPanel>
        </div>
    </apex:repeat>
</div>
</apex:form>
</apex:page>

Question:

I want to fetch data dynamically if a tab is clicked, by passing obj.id value to my controller. Please suggest using current approach or any other approach to implement this design.

Any help would be greatly appreciated!

Update based on @Victor comments

Added onclick method as below:

<apex:repeat value="{!objList}" var="obj">
    <li><a id="tablink" href="#tabs-{!obj.id}" onclick="testTabClick();">{!obj.name}- {!obj.id} </a>                            
    </li>                        
</apex:repeat>   

Javascript function:

function testTabClick() {
    alert('Test1');
}    

I tried with actionfunction for the Javascript method. It was not working. So I tried a basic Javascript method, but this is not triggering either. Is there anything I am missing here ?

I also tried to use the Javascript remoting method. That worked fine, but with the limitation that RemoteAction method has to be static, I wont be able to access the class instance and its data created on pageload. Is there any way to solve this ?

Solution:Added the following code

1. onclick="testTabClick('{!obj.id}');" to <a href..>

2. <apex:actionFunction action="{!getCurrentObjId}" name="testTabClick" oncomplete="onclick();" > <apex:param id="objId" name="currObjId" value="" /> </apex:actionFunction>

3. Apex controller: public void getCurrentObjId(){ String currObj = Apexpages.currentPage().getParameters().get('currObjId'); }

Reference link: Parameter passing using Javascript+actionFunction in visualforce

Answer 1

You can call a controller method to get list of data and pass object Id using two methods 1) Using actionfunction and a parameter inside it 2) Using RemoteAction.

In both ways finally you will get a javascript method name. Call that javascript method onclick of tab.