3

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

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.

  • Thank you for your response. I tried both of your approaches but I am still facing some issues with it. I edited my post with the update as per your comments. can you please check if I am missing anything. – Pel May 8 '15 at 15:51
  • Is there any error coming on browser console?. Please try like - <a id="tablink" href="#tabs-{!obj.id}" onclick="return testTabClick();">{!obj.name}- {!obj.id} </a>. Also return true at the end of testTabClick() method – Victor May 8 '15 at 16:01
  • Thank you so much for your help ! I am able to resolve the issue finally. My bad I used "Alert" instead of "alert". I updated the post with the solution.. – Pel May 8 '15 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.