function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Arun TyagiArun Tyagi 

These tab are not working (not change the position of page)

User-added image

Video Viewing All Template,Send Video,Demomail viewing,mailmerge viewing,Compaign viewing,DemoMail Sent,mailMerge sent,Exacttarget viewing all are tabs .but when i add bootstrap dropdown code tabs are not working .plz check the code and help me


<apex:page controller="temp"  sidebar="false" showHeader="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="Video Viewing All Template">
                        
                           <!----------------------------dropdown code start-------------------------->
                            <!-- Bootstrap -->
        <!-- Bootstrap -->
         <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.min.css')}" />
         <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
         
         <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'js/bootstrap.min.js')}"/>

 
     
      <body>
         
                  <!-- Table on right side -->
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                     <tr>
                        
                        <td style="font-weight:bold;" class="divider">
                           
                           <select id="SES__c" >
                              <option value="">Bootstrap Dropdown</option>
                              <option value="True">Yes</option>
                              <option value="False">No</option>
                           </select>
                        </td>
                       
                         <td style="font-weight:bold;" class="Single">
                           
                           <select id="SES__c" >
                              <option value="">Bootstrap Dropdown</option>
                              <option value="True">Yes</option>
                              <option value="False">No</option>
                           </select>
                        </td>
                       
                         <td style="font-weight:bold;" class="Single">
                           
                           <select id="SES__c" >
                              <option value="">Bootstrap Dropdown</option>
                              <option value="True">Yes</option>
                              <option value="False">No</option>
                           </select>
                        </td>
                        
                          <td style="font-weight:bold;" class="Single">
                           
                           <select id="SES__c" >
                              <option value="">Bootstrap Dropdown</option>
                              <option value="True">Yes</option>
                              <option value="False">No</option>
                           </select>
                        </td>
                        
                          <td style="font-weight:bold;" class="Single">
                           
                           <select id="SES__c" >
                              <option value="">Bootstrap Dropdown</option>
                              <option value="True">Yes</option>
                              <option value="False">No</option>
                           </select>
                        </td>
                       
                       
                     </tr>
                     
                  </table>
                  
                  
                  
                
                  <!-- END -->
             
         
        
      </body>
 
                           <!----------------------------dropdown  code close-------------------------->    
                           
                </apex:tab>
                               
                <!----------------------------teb2-------------------------->
                               
                <apex:tab label="Send Video">
                    
                </apex:tab>
                                
                                
                <!---------------------------tab3---------------------------->
                
                <apex:tab label="Demomail viewing">
                    
                </apex:tab>
                
                <!---------------------------tab4---------------------------->
                
                <apex:tab label="mailmerge viewing">
                    
                </apex:tab>
                <!---------------------------tab5---------------------------->
                
                <apex:tab label="Compaign viewing">
                    
                </apex:tab>
                <!---------------------------tab6---------------------------->
                
                <apex:tab label="DemoMail Sent">
                    
                </apex:tab>
                <!---------------------------tab7---------------------------->
                
                <apex:tab label="mailMerge sent">
                    
                </apex:tab>
                <!---------------------------tab8---------------------------->
                
                <apex:tab label="Exacttarget viewing">
                    
                </apex:tab>
                
                
                
                     </apex:tabpanel>           
                </apex:pageblock>
                
    </apex:form>
</apex:page>

<!--------controller start from herce------->
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;

 }
 }
<!----------dropdown code close--------->
 
Best Answer chosen by Arun Tyagi
pconpcon
This is actually a problem with the interaction between apex:tabPanel and jQuery [1].   I've taken the liberty to clean up the provided code a little bit (and removed the depenency on the controller to demonstrate the issue and the fix.
  
<apex:page sidebar="false" showHeader="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:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
            <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
            <script>
                if(jQuery) {
                    jQuery.noConflict();
                }
            </script>
            <apex:tabPanel id="tabPanel" switchType="client" immediate="true">
                <apex:tab label="Video Viewing All Template">
                    <table width="100%" border="0" cellspacing="0" cellpadding="1">
                        <tr>
                            <td style="font-weight:bold;" class="divider">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </apex:tab>
                <apex:tab label="Send Video">
                    <apex:outputText value="Send Video" />
                </apex:tab>
                <apex:tab label="Demomail viewing">
                    <apex:outputText value="Demomail viewing" />
                </apex:tab>
                <apex:tab label="mailmerge viewing">
                    <apex:outputText value="mailmerge viewing" />
                </apex:tab>
                <apex:tab label="Campaign viewing">
                    <apex:outputText value="Campaign viewing" />
                </apex:tab>
                <apex:tab label="DemoMail Sent">
                    <apex:outputText value="DemoMail Sent" />
                </apex:tab>
                <apex:tab label="mailMerge sent">
                    <apex:outputText value="mailMerge sent" />
                </apex:tab>
                <apex:tab label="Exacttarget viewing">
                    <apex:outputText value="Exacttarget viewing" />
                </apex:tab>
            </apex:tabpanel>
        </apex:pageblock>
    </apex:form>
</apex:page>

If you take a look at lines 12-16, you can see that the fix is to call noConflict on jQuery.  This will fix the interaction between the tab panel and jQuery.

[1] https://help.salesforce.com/apex/HTViewSolution?id=000205528&language=en_US (https://help.salesforce.com/apex/HTViewSolution?id=000205528&language=en_US)

All Answers

pconpcon
This is actually a problem with the interaction between apex:tabPanel and jQuery [1].   I've taken the liberty to clean up the provided code a little bit (and removed the depenency on the controller to demonstrate the issue and the fix.
  
<apex:page sidebar="false" showHeader="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:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
            <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
            <script>
                if(jQuery) {
                    jQuery.noConflict();
                }
            </script>
            <apex:tabPanel id="tabPanel" switchType="client" immediate="true">
                <apex:tab label="Video Viewing All Template">
                    <table width="100%" border="0" cellspacing="0" cellpadding="1">
                        <tr>
                            <td style="font-weight:bold;" class="divider">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                            <td style="font-weight:bold;" class="Single">
                                <select id="SES__c" >
                                    <option value="">Bootstrap Dropdown</option>
                                    <option value="True">Yes</option>
                                    <option value="False">No</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </apex:tab>
                <apex:tab label="Send Video">
                    <apex:outputText value="Send Video" />
                </apex:tab>
                <apex:tab label="Demomail viewing">
                    <apex:outputText value="Demomail viewing" />
                </apex:tab>
                <apex:tab label="mailmerge viewing">
                    <apex:outputText value="mailmerge viewing" />
                </apex:tab>
                <apex:tab label="Campaign viewing">
                    <apex:outputText value="Campaign viewing" />
                </apex:tab>
                <apex:tab label="DemoMail Sent">
                    <apex:outputText value="DemoMail Sent" />
                </apex:tab>
                <apex:tab label="mailMerge sent">
                    <apex:outputText value="mailMerge sent" />
                </apex:tab>
                <apex:tab label="Exacttarget viewing">
                    <apex:outputText value="Exacttarget viewing" />
                </apex:tab>
            </apex:tabpanel>
        </apex:pageblock>
    </apex:form>
</apex:page>

If you take a look at lines 12-16, you can see that the fix is to call noConflict on jQuery.  This will fix the interaction between the tab panel and jQuery.

[1] https://help.salesforce.com/apex/HTViewSolution?id=000205528&language=en_US (https://help.salesforce.com/apex/HTViewSolution?id=000205528&language=en_US)
This was selected as the best answer
Arun TyagiArun Tyagi
thanks Pcon