I want to know how to hide a row using jQuery (I have jQuery set up in my code already). Let's say I have an object called Entry, and I have several records like E-0001, E-0002, E-0003 etc. I have a data table that lists those records as such:
Entries | Date
E-0001 | 12/1/2012
E-0002 | 5/2/2011
E-0003 | 7/2/2011
I would like to add a button next to each record that will hide the record and the row:
Entries | Date
(-) E-0001 | 12/1/2012
(-) E-0002 | 5/2/2011
(-) E-0003 | 7/2/2011
So if I pressed the (-) next to 'E-0001', it will hide that record so the result would be
Entries | Date
(-) E-0002 | 5/2/2011
(-) E-0003 | 7/2/2011
And even after a page reload, that row should still be appear to be gone (but the record itself not permanently deleted!). ALSO: it should only be hidden to the user, NOT globally. Thank you!
Edit:
Visualforce code
<apex:page showheader="true" standardController="Entry__c" recordsetVar="entries" sidebar="false" extensions="entryExtension" >
<head>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.9.0.custom/js/jquery-1.8.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.9.0.custom/js/jquery-ui-1.9.0.custom.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery-ui-1.9.0.custom/css/pepper-grinder/jquery-ui-1.9.0.custom.css')}"/>
<script>
$j = jQuery.noConflict();
function hideRow(){
}
</script>
</head>
<body>
<apex:pageBlock title="View Recent Entries" mode="edit">
<apex:pageBlockSection title="Entry Information" columns="2">
<apex:dataTable value="{!entries}" var="e" cellpadding="4" border="1" width="475">
<apex:column >
(-)
</apex:column>
<apex:column >
<apex:facet name="header"><b>Name</b></apex:facet>
{!e.name}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Level One</b></apex:facet>
{!e.Join__r.Level_One__r.name}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Level Two</b></apex:facet>
{!e.Join__r.Level_Two__r.name}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Date</b></apex:facet>
{!e.Date__c}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Hours</b></apex:facet>
{!e.Hours__c}
</apex:column>
</apex:dataTable>
</apex:pageblocksection>
</apex:pageblock>
</body>
</apex:page>
Best Answer
There are two dimensions to this question, one is the hiding on the UI and the other persisting the hiding (even after a refresh)
To hide on the UI, you can use the jQuery.hide() function, which is trivial.
To persist the hiding, you will need to proxy it via an actionFunction (equally you could use JS-Remoting via Jquery, but I've chosen actionFunction for the purposes of this illustration) to the controller class, so it can process the Id and possibly, set a field on the Account to hide it in further loads. Now if you want a different behaviour per use (i.e. hidden only for the user who has hidden it, then you will possibly need to create another object, where you will store a user's 'hide' preferences, a user Id - hidden id mapping of sorts)
Here's my illustration using Accounts, where I've implemented the hide behaviour using both jQuery and proxying through actionFunction. You can bolt on the behaviour to persist the hiding in the controller action method which is invoked when Hide is clicked.
Visualforce Page :
Controller :