Hi all,

I have page block table with apex:inputfield and JavaScript function that highlight selected row of that table. In Applex Safari it works perfect but in FireFox whenewer I click only first row of a table are highlighted and focus is set to the first row inputfield(Second Manager).

VF markup:

<apex:pageBlockTable id="tt"  value="{!selectedEmployees}" rules="rows" style="MbO_tab"
                          columnsWidth="24%,23%,23%,10%,20%" var="dd"   >

                      <apex:column onclick="highlight(this,'first'); " headerValue="Name"> 
                          <apex:outputField  value="{!dd.Employee.name}"/>
                      </apex:column>

                      <apex:column headerValue="Manager" onclick="highlight(this,'first'); "> 
                        <apex:outputField value="{!dd.Employee.ManagerId}"/> <!---->
                      </apex:column>

                      <apex:column headerValue="Second Manager(optional)"  >
                        <apex:inputField html-autocomplete="off" onclick="highlight(this,'second'); "  value="{!dd.secManager.Second_Manager__c}">
                           <apex:actionSupport action="{!checkSecondManagers}" event="onkeyup" reRender="employeeSelectionMessages"/>
                        </apex:inputField>          
                      </apex:column> 

                      <apex:column rendered="false" onclick="highlight(this,'first');" headerValue="Type" >
                        <apex:selectList label="Type" title="Type" value="{!dd.sType}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.type}"/>
                              <apex:actionSupport event="onchange" action="{!dd.refresh}" reRender="Secondcolumn"/>
                        </apex:selectList>
                      </apex:column>
                      
                      <apex:column rendered="false" onclick="highlight(this,'first');" headerValue="Contract start" >
                        <apex:outputPanel id="Secondcolumn">
                        <apex:selectList rendered="{!dd.showPeriod}" label="Period" title="Period" value="{!dd.sPeriod}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.period}"/>
                        </apex:selectList>
                        &nbsp;
                        <apex:selectList label="Year" title="Year" value="{!dd.sYear}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.year}"/>
                        </apex:selectList>
                        </apex:outputPanel>
                      </apex:column>

                    </apex:pageBlockTable>

Script:

<script type="text/javascript">

var lastRow;
function highlight(elem,type){
    if(lastRow != undefined) {
        $('tr').removeClass('highlighted');
      }
    //if(lastRow == elem)
        //$('tr').removeClass('highlighted');
    //else {
      if(type=='second') {
        $(elem).parent().parent().parent().addClass('highlighted');  
      } else {
        $(elem).parent().addClass('highlighted');
      }
      lastRow = elem;
   // }
   
}

</script>

 

Hi all,

I have page block table with apex:inputfield and JavaScript function that highlight selected row of that table. In Applex Safari it works perfect but in FireFox whenewer I click only first row of a table are highlighted and focus is set to the first row inputfield(Second Manager).

VF markup:

<apex:pageBlockTable id="tt"  value="{!selectedEmployees}" rules="rows" style="MbO_tab"
                          columnsWidth="24%,23%,23%,10%,20%" var="dd"   >

                      <apex:column onclick="highlight(this,'first'); " headerValue="Name"> 
                          <apex:outputField  value="{!dd.Employee.name}"/>
                      </apex:column>

                      <apex:column headerValue="Manager" onclick="highlight(this,'first'); "> 
                        <apex:outputField value="{!dd.Employee.ManagerId}"/> <!---->
                      </apex:column>

                      <apex:column headerValue="Second Manager(optional)"  >
                        <apex:inputField html-autocomplete="off" onclick="highlight(this,'second'); "  value="{!dd.secManager.Second_Manager__c}">
                           <apex:actionSupport action="{!checkSecondManagers}" event="onkeyup" reRender="employeeSelectionMessages"/>
                        </apex:inputField>          
                      </apex:column> 

                      <apex:column rendered="false" onclick="highlight(this,'first');" headerValue="Type" >
                        <apex:selectList label="Type" title="Type" value="{!dd.sType}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.type}"/>
                              <apex:actionSupport event="onchange" action="{!dd.refresh}" reRender="Secondcolumn"/>
                        </apex:selectList>
                      </apex:column>
                      
                      <apex:column rendered="false" onclick="highlight(this,'first');" headerValue="Contract start" >
                        <apex:outputPanel id="Secondcolumn">
                        <apex:selectList rendered="{!dd.showPeriod}" label="Period" title="Period" value="{!dd.sPeriod}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.period}"/>
                        </apex:selectList>
                        &nbsp;
                        <apex:selectList label="Year" title="Year" value="{!dd.sYear}" size="1" multiselect="false">
                          <apex:selectOptions value="{!dd.year}"/>
                        </apex:selectList>
                        </apex:outputPanel>
                      </apex:column>

                    </apex:pageBlockTable>

Script:

<script type="text/javascript">

var lastRow;
function highlight(elem,type){
    if(lastRow != undefined) {
        $('tr').removeClass('highlighted');
      }
    //if(lastRow == elem)
        //$('tr').removeClass('highlighted');
    //else {
      if(type=='second') {
        $(elem).parent().parent().parent().addClass('highlighted');  
      } else {
        $(elem).parent().addClass('highlighted');
      }
      lastRow = elem;
   // }
   
}

</script>