+ Start a Discussion
TanejaTaneja 

How to wrap apex:columns in a div to use in slideToggle()

Hi All,

 

I am trying to have a jquery slideToggle() function bound to a row of data in an apex:pageBlockTable.

 

I am displaying some information in the table and want that if someone clicks on any row, some more information related to that contact is displayed in a slider and the rest of the rows move down. When he clicks again, the slider moves up and everything is back to normal.

 

If I am not wrong, I think I need to bind row elements (apex:columns) in one div and the information in the slider in the other. But somehow this is not working.

 

Here is the code:

 

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 
#rowInfo,#rows
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#rowInfo { 
	width:50px;
	display:none; 
}
 </style>
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

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

   $j(document).ready(function(){
      $j("#rows").click(function(){
    $j("#rowInfo").slideToggle("slow");
  });
});

</script>

</head>
<body>

<apex:pageMessages />
    <div id='backtoDiv' style="height:20px;">
        <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink>
    </div>
    
<apex:pageBlock title="Suche Kontakte"> 
    <apex:pageBlockSection columns="1">
    <apex:form style="float:right" >
        <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" />
    </apex:form>
    </apex:pageBlockSection>
    <apex:pageBlockTable value="{!newList}" var="contacts" id="contactsTable">
       
       <div id="rows">
        <apex:column > 
            <apex:image url="{!contacts.photoURL__c}" /> 
        </apex:column>
        
       
        <apex:column headerValue="Name"> {!contacts.displayName__c}</apex:column>
      
        
        <apex:column headerValue="Firma"> {!contacts.firma__c}</apex:column>
        <apex:column headerValue="Title" > {!contacts.title__c}</apex:column>
      </div>
        
               
      
     <div id="rowInfo" >
         <p>
            This is the paragraph to end all paragraphs.  You
            should feel <em>lucky</em> to have seen such a paragraph in
            your life.  Congratulations!
         </p>
     </div>  
     </apex:pageBlockTable>
</apex:pageBlock>              
</body>



</apex:page>

 

I am trying to understand VF and JS so any help would be appreciated.

 

Best,

Ankit

Best Answer chosen by Admin (Salesforce Developers) 
CaptainObviousCaptainObvious

I dont think you'll be able to accomplish what you are looking for because of the way that an apex:pageBlockTable renders in HTML.

 

If you inspect the rendered table through firebug or other developer tool, you'll see that your div's are never created (at least where you expect them to be)...

 

A possible work-around is to manually create the HTML table and instead use the apex:repeat component.

 

Here is some sample (untested) code to give you some ideas:

 

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 

.rowInfo,.rows {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}

.rowInfo { 
    width:50px;
    display:none; 
}

</style>
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j(".rows").click(function(){
        var rowInfoId = $j(this).attr('id');
        $j('tr[name='+rowInfoId+']').slideToggle("slow");
    });
}); </script> </head> <body> <apex:pageMessages /> <div id='backtoDiv' style="height:20px;"> <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink> </div> <apex:pageBlock title="Suche Kontakte"> <apex:pageBlockSection columns="1"> <apex:form style="float:right" > <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" /> </apex:form> </apex:pageBlockSection> <table border="0" > <tr> <th>&nbsp;</th> <th>Name</th> <th>Firma</th> <th>Title</th> </tr> <apex:repeat var="contacts" value="{!newList}"> <tr class="rows" id="row-{!contacts}"> <td><apex:image url="{!contacts.photoURL__c}" /></td> <td>{!contacts.displayName__c}</td> <td>{!contacts.firma__c}</td> <td>{!contacts.title__c}</td> </tr> <tr class="rowInfo" name="row-{!contacts}" > <td colspan="4" >
This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations! </td> </tr> </apex:repeat> </apex:pageBlock> </body> </apex:page>

 

Also note the changes to the css, jQuery, and id's. 

All Answers

CaptainObviousCaptainObvious

I dont think you'll be able to accomplish what you are looking for because of the way that an apex:pageBlockTable renders in HTML.

 

If you inspect the rendered table through firebug or other developer tool, you'll see that your div's are never created (at least where you expect them to be)...

 

A possible work-around is to manually create the HTML table and instead use the apex:repeat component.

 

Here is some sample (untested) code to give you some ideas:

 

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 

.rowInfo,.rows {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}

.rowInfo { 
    width:50px;
    display:none; 
}

</style>
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j(".rows").click(function(){
        var rowInfoId = $j(this).attr('id');
        $j('tr[name='+rowInfoId+']').slideToggle("slow");
    });
}); </script> </head> <body> <apex:pageMessages /> <div id='backtoDiv' style="height:20px;"> <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink> </div> <apex:pageBlock title="Suche Kontakte"> <apex:pageBlockSection columns="1"> <apex:form style="float:right" > <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" /> </apex:form> </apex:pageBlockSection> <table border="0" > <tr> <th>&nbsp;</th> <th>Name</th> <th>Firma</th> <th>Title</th> </tr> <apex:repeat var="contacts" value="{!newList}"> <tr class="rows" id="row-{!contacts}"> <td><apex:image url="{!contacts.photoURL__c}" /></td> <td>{!contacts.displayName__c}</td> <td>{!contacts.firma__c}</td> <td>{!contacts.title__c}</td> </tr> <tr class="rowInfo" name="row-{!contacts}" > <td colspan="4" >
This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations! </td> </tr> </apex:repeat> </apex:pageBlock> </body> </apex:page>

 

Also note the changes to the css, jQuery, and id's. 

This was selected as the best answer
TanejaTaneja

Hello Captain,

 

 

Yes, it did prove to be a great work around. After some hacking, I finally got what I wanted.

 

Thanks,

Ankit