You need to sign in to do that
Don't have an account?
Arun Tyagi
Big chalange for experience Develpor.....
<apex:page controller="temp" sidebar="false">
<apex:form >
<apex:pageBlock >
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>
<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
<apex:tab label="Select Mail Merge Template">
<apex:pageBlockSection >
<apex:pageBlockTable value="{!temp1}" var="t">
<apex:column >
<apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
{!t.name}
<apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
<apex:outputPanel id="temp_dt" >
{!em.Name}
</apex:outputPanel>
</apex:pageBlockSection>
</apex:tab>
<!----------------------------teb2-------------------------->
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>
</apex:tab>
<!-------tab3---------------->
<apex:tab label="Select Contact" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
$(document).ready(function(){
$('.tabs a').click(function(){
var tabId = $(this).attr('href');
$('.tabs a').removeClass('active');
$(this).addClass('active');
$('.tabContent .tabBox').removeClass('activeTab');
$(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
<apex:selectRadio >
<apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
<apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
</apex:selectRadio>
</apex:tab>
<apex:tab label="Preview & Send" >
</apex:tab>
</apex:tabPanel>
</apex:pageblock>
</apex:form>
</apex:page>
<-.............................................->this is the controller for this visualforce code
public class temp {
public string Contact{get;set;}
public string lead{get;set;}
public string selectedTemplate{get; set;}
public EmailTemplate em{get; set;}
public void callEmailTemplate(){
em = [select id,name,HtmlValue,body from EmailTemplate where Id=: selectedTemplate];
}
public temp() {
}
list<EmailTemplate> temp1=[SELECT id ,Name,HtmlValue FROM EmailTemplate ORDER by Name ASC];
public list<EmailTemplate> gettemp1(){
return temp1;
}
}
<-............................->
problem is that . tab is not working ..when we click on other its not work .plz check it on your end
<apex:form >
<apex:pageBlock >
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>
<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
<apex:tab label="Select Mail Merge Template">
<apex:pageBlockSection >
<apex:pageBlockTable value="{!temp1}" var="t">
<apex:column >
<apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
{!t.name}
<apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
<apex:outputPanel id="temp_dt" >
{!em.Name}
</apex:outputPanel>
</apex:pageBlockSection>
</apex:tab>
<!----------------------------teb2-------------------------->
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>
</apex:tab>
<!-------tab3---------------->
<apex:tab label="Select Contact" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
$(document).ready(function(){
$('.tabs a').click(function(){
var tabId = $(this).attr('href');
$('.tabs a').removeClass('active');
$(this).addClass('active');
$('.tabContent .tabBox').removeClass('activeTab');
$(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
<apex:selectRadio >
<apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
<apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
</apex:selectRadio>
</apex:tab>
<apex:tab label="Preview & Send" >
</apex:tab>
</apex:tabPanel>
</apex:pageblock>
</apex:form>
</apex:page>
<-.............................................->this is the controller for this visualforce code
public class temp {
public string Contact{get;set;}
public string lead{get;set;}
public string selectedTemplate{get; set;}
public EmailTemplate em{get; set;}
public void callEmailTemplate(){
em = [select id,name,HtmlValue,body from EmailTemplate where Id=: selectedTemplate];
}
public temp() {
}
list<EmailTemplate> temp1=[SELECT id ,Name,HtmlValue FROM EmailTemplate ORDER by Name ASC];
public list<EmailTemplate> gettemp1(){
return temp1;
}
}
<-............................->
problem is that . tab is not working ..when we click on other its not work .plz check it on your end
NOTE: When adding code please use the "Add a code sample" button (icon <>) to increase readability and make it easier to reference.
I think this jquery code is create the problem in select contact list tab.