[SalesForce] How to hide fields (input) by jQuery – Visualforce

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 :

<apex:page controller="AccountListController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

jQuery.noConflict();

function proxyHideItem(accId){
//uncomment this to hide via jquery, currently hiding via actionFunction
//jquery selector using the class, which is accountId for each row
//jQuery("."+accId).hide();

hideItem(accId);

}
</script>

<apex:form> //action function proxies to controller,which sets visible false

<apex:actionFunction name="hideItem" action="{!hideAccount}" reRender="thePageBlock">
<apex:param id="paramId" name="accToHide" value="" />
</apex:actionFunction>

<apex:pageBlock id="thePageBlock">
<apex:pageMessages/>

<apex:pageBlockSection>
<apex:dataTable value="{!accountList}" var="acc">

//notice how the styleClass is the accountId, to select using Jquery
<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Hide</b></apex:facet>
<apex:outputPanel onclick="proxyHideItem('{!acc.accId}');" >Hide</apex:outputPanel> 

</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Id</b></apex:facet>
{!acc.accId}
</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Name</b></apex:facet>
{!acc.accName}
</apex:column>

</apex:dataTable>

</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>

</apex:page>

Controller :

public class AccountListController{

Map<Id, AccountWrapper> accMap = new Map<Id, AccountWrapper>();

public List<AccountWrapper> getAccountList(){
    if (accMap == null || accMap.isEmpty()){
        for(Account acc : [Select Id, Name from Account LIMIT 25]){
            accMap.put(acc.Id, new AccountWrapper(acc));
        } 
    }
    return accMap.Values();
}

//this method is invoked via the action function
public PageReference hideAccount(){

Id accToHide = (Id)ApexPages.currentPage().getParameters().get('accToHide');
System.debug('**************************** Hiding ' + accToHide);
if(accToHide != null)
accMap.get(accToHide).visible = false;

//here is where you can bolt on behaviour to store the account hide event
//either a field on account if hide is global for all users, or a dedicated
//hide object, if the hiding is user specific
return null;
}

//wrapper class to hold the Visible variable, which controls visibility
public class AccountWrapper{

public Account acct {get; set;}

public Id accId {get { return acct.Id ; }}

public String accName {get { return acct.Name ;} }

public boolean visible { get; set; }

public AccountWrapper(Account acc){

this.visible = true;
this.acct = acc;

}
}
}

Once sure fire way to remove the labels is to put your apex:inputField inside a tag

Like so:

<apex:pageBlockSection id="yearInfoPageBlock" title="Fiscal Year Information">

    <apex:pageBlockSectionItem>
        <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem>        
        <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
    </apex:pageBlockSectionItem>

</apex:pageBlockSection>

Give it a try!

Oh right.. re-reading your question, that might not be what you are trying to achieve.

If you are trying to "hide" the whole input thing with a bit of Javascript. I would recomment wrapping them in output panels, and then calling "hide" on those.

<apex:pageBlockSection id="yearInfoPageBlock" title="Fiscal Year Information">

    <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>

    <apex:outputPanel Id="isCurrent"> 
        <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
    </apex:outputPanel>

</apex:pageBlockSection>

<apex:includeScript value="{! $Resource.jQuery }"/>
    <script type="text/javascript">
        function test(){
            $('[id$="isCurrent"]').hide();

            $('[id$="isCurrent"]').hide();
        }
    </script>

Also: are you familiar with the "rendered" tag on all elements, which you can use to control their display (both label and input in the case of form elements) from your Apex controller/other formulaic values?