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
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

Visualforce Tabbed navigation affected by Javascript

Hi there,

 

I am attempting to make it so that some of my PageblockTable rows will remain highlighted after clicking, I have some code, but when I try and insert it into my visualforce page, when I test it out, my Tabbed Visualforce page loses its ability to navigate between the tabs. I know that it works as I have deleted the first few tabs (making the FactFinder object tab the first).

 

I have highlighted in red the code that I have added in which to highlight the rows. I am pretty sure that it is the <apex:includescript tag which affects my tab navigation.

 

<apex:page standardController="Account" showHeader="true" 
tabStyle="account"  >

 <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
    <apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
    <script>
        function highlightElem(elem){
            $('tr').removeClass('ui-state-highlight');
            $(elem).addClass('ui-state-highlight');
        }
    </script>





<style>
.activeTab {background-color: #892034; color:White;
background-image:none}
.inactiveTab { background-color: #00204E; color:white;
background-image:none}
</style>
<apex:tabPanel switchType="client" selectedTab="tabdetails"
id="AccountTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab">
<apex:tab label="Details" name="AccDetails" id="tabdetails">
<apex:detail inlineEdit="True" relatedList="false" title="true"/>
</apex:tab>
<apex:tab label="Contacts" name="Contacts" id="tabContact">
<apex:pageBlock title="Hello {!$User.FirstName}!">
You are displaying contacts from the {!account.name} account.
Click a contact's name to view his or her details.
</apex:pageBlock>
<apex:pageBlock title="Contacts">
<apex:form >
<apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4"
border="1">
<apex:column >
<apex:commandLink rerender="detail">
{!contact.Name}
<apex:param name="cid" value="{!contact.id}"/>
</apex:commandLink>
</apex:column>
</apex:dataTable>
</apex:form>
</apex:pageBlock>
<apex:outputPanel id="detail">
<apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="True" inlineEdit="True"
title="false"/>
</apex:outputPanel>
</apex:tab>


<apex:tab label="Fact Finder" rendered="{!$ObjectType.Fact_Finder__c.Accessible}" name="FactFinder" id="tabFactFinder" >

<apex:pageBlock title="Hello {!$User.FirstName}!">
You are displaying Fact Finders from the {!account.name} account.Click a Fact Finder to view its details.
</apex:pageBlock>
<apex:pageBlock title="Fact Finder" >
<apex:form >
<apex:outputlink value="/a0L/e?CF00N90000007AjAp={!Account.name}&CF00N90000007AjAp_lkid=                                                                                                                           {!Account.id}">Create New Fact Finder</apex:outputlink> 
<apex:pageBlockTable value="{!account.Fact_Finder__r}" var="Fac" cellPadding="4"  border="4"  onRowClick="highlightElem(this)" >
<apex:column headerValue="Fact Finder" >
<apex:commandLink rerender="details"> {!Fac.Name}
<apex:param name="Fid" value="{!Fac.id}"/>
</apex:commandLink>
</apex:column>
<apex:column value="{!Fac.Employed_Since__c}"/>
</apex:pageBlockTable>
</apex:form>
</apex:pageBlock>
<apex:outputPanel id="details">
<apex:detail subject="{!$CurrentPage.parameters.Fid}" relatedList="False" inlineEdit="True" title="false"/>
</apex:outputPanel>
</apex:tab>

 Please help me find a solution to my problem or perhaps an alternative way in which to highlight the rows in my pageblocktable sections.

 

Thank you so much,

 

Mikie

 

P.S. It may help, the rows that I hope to highlight are links which re-render the bottom half of the page, that is why I need the rows highlighted so that the users can tell which record they have last selected.

Best Answer chosen by Admin (Salesforce Developers) 
firechimpfirechimp

Hi Mikie,

Here is updated code:

<script>
        $j = jQuery.noConflict();

        function highlightElem(elem){
            $j('tr').removeClass('ui-state-highlight');
            $j(elem).addClass('ui-state-highlight');
        }
</script>

 Hope this helps!

 

All Answers

firechimpfirechimp

Hi Mikie,

It is advised when using jquery in salesforce to do the following (to avoid conflicts):

$j = jQuery.noConflict();

 then reverence $j instead of $

 

See Here for an example.

 

Hope this helps!

 

 

 
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student

Hey Gary,

 

Thank you so much for the quick reply, would it be asking to much to ask where abouts I should enter this code?

 

Mikie

 
firechimpfirechimp

Hi Mikie,

Here is updated code:

<script>
        $j = jQuery.noConflict();

        function highlightElem(elem){
            $j('tr').removeClass('ui-state-highlight');
            $j(elem).addClass('ui-state-highlight');
        }
</script>

 Hope this helps!

 

This was selected as the best answer
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student

Mate you are a legend. Thank you so much!!! It may seem like a tiny bit of code, but you have helped me alot.

 

Mikie
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student

So sorry mate, but real quick. I have just noticed that my code will highlight the row if I click anywhere on the row. The problem is that the bottom half of the page will only re-render if the commandlink is clicked. Is it possible to make it so that the row will only highlight if the commandlink (which re-renders the second half of the page) is clicked?

 

Thank you for your time mate.
firechimpfirechimp

Hi Mikie,

I would guess you would need to move your onclick event from the row to the commandLink. Then inorder to get this to highlight the row instead of the commind link you clicked you would need to do some additional JQuery to find the tr surrounding the link you clicked and then add the highlight to that.

 

I hope this helps!
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student

Thank you my friend, I am very appreciative.
firechimpfirechimp

No probs,

Glad I could help!