1

I have a visualforce that shows a pageDataTable with a list of records os a wrapper 'OrderItemWrapper'.

I have a inputCheckBox that when it's checked I want to hide some of this records based on a condition (if a variable 'hijo' of this recordWrapper is equal to true).

I want to achieve this with Javascript but I'm starting with this.

This is my pageBlockTable:

<apex:pageBlock title="Productos ya añadidos al servicio:" rendered="{!mostrarProductosYaAnadidos}">
        <apex:pageBlockSection columns="1" id="productosYaAnadidos">
            <apex:inputCheckbox label="Ocultar productos hijos / productos que forman parte de un bundle" onchange="HideMsg(this);"/>
            <apex:outputPanel > 
                <apex:pageBlockTable value="{!listaProductosAnadidos}" var="wrpOrderItem" styleClass="test">
                    <apex:column >
                        <apex:inputCheckbox value="{!wrpOrderItem.check}"></apex:inputCheckbox>
                    </apex:column>
                    <apex:column headerValue="Producto"><apex:outputLink value="/{!wrpOrderItem.productosAnadidos.Id}">{!wrpOrderItem.productosAnadidos.Product2.Name}</apex:outputLink></apex:column>
                    <apex:column headerValue="Precio por unidad">
                        <apex:inputField value="{!wrpOrderItem.productosAnadidos.UnitPrice}"/>
                    </apex:column>
                    <apex:column headerValue="Cantidad">
                        <apex:inputField value="{!wrpOrderItem.productosAnadidos.Quantity}"/>
                    </apex:column>
                    <apex:column headerValue="Precio Total" value="{!wrpOrderItem.productosAnadidos.TotalPrice}"/>
                    <apex:column headerValue="IVA" value="{!wrpOrderItem.productosAnadidos.IVA__c}"/>
                    <apex:column headerValue="Precio Total con IVA" value="{!wrpOrderItem.productosAnadidos.Precio_total_con_IVA__c}"/>    
                    <apex:column headerValue="Regalo" value="{!wrpOrderItem.productosAnadidos.blnGM_Regalo__c}"/>
                    
                </apex:pageBlockTable>
                <apex:commandButton value="Modificar" action="{!modificarProductos}" reRender="form" />
                <apex:commandButton value="Eliminar" action="{!borrarProductos}" reRender="form" />   
            </apex:outputPanel>
        </apex:pageBlockSection>
    </apex:pageBlock>   

This is the javascript function that I'm trying to create:

<script>
  function HideMsg(istrue){
    var checkval = document.getElementById("test");
    for(var i = 0; i < checkval.length; i++){
        if(istrue.checked){   
            checkval[i].style.display='block';
        }else{
            checkval[i].style.display='none';
        }
    }
  }
</script>

Ans this is my Wrapper (into the visualforce Controller):

public class OrderItemWrapper{
    public OrderItem productosAnadidos {get;set;}
    public Boolean check        {get;set;}
    public Boolean regalo       {get;set;}
    public Boolean hijo     {get;set;}
    //public Boolean tipoRegistro {get;set;}
    
    public orderItemWrapper(OrderItem orderItems){
        productosAnadidos = orderItems.clone (true, false, false, false);
        system.debug('productosAnadidos.product2.pckGM_Codigo_Padre__c = ' + productosAnadidos.product2.pckGM_Codigo_Padre__c);
        hijo = (productosAnadidos.product2.pckGM_Codigo_Padre__c != null) ? true : false;
        system.debug('hijo = ' + hijo);
        check   = false;
        regalo  = false;
    }
}
2

I'm not sure I'd solve this on with a client side JS if it was me. Or at least I'd try first to filter the data on the server.

But let's focus on what you have.

I suspect you may have problems here:

document.getElementById("test");

Ostensibly, this line will look for some element in your markup that is labeled with Id="test". But there isn't such an object.

On the other hand, there is something with class="test".

It's pretty widely accepted these days that using DOM queries by class isn't the best option. But if you have a reason for keeping the class in there, you could simply change that line to use the element.querySelector JavaScript DOM API as follows:

document.querySelector(".test");

That should successfully look up a class value in the DOM.

But as I said above, class isn't really the best approach. There's no uniqueness for class, meaning someone reusing that class on the same page could cause unexpected behavior. And since this is Visualforce, you can use Id to create a document-unique Id, and then resolve it on page render (on the server-side).

In your pageBlockTable you'd need your Id value.

<apex:pageBlockTable Id="test" value="{!listaProductosAnadidos}" var="wrpOrderItem">

Then, in the JS, you'd reference it with the $Component global variable reference.

var checkval = document.getElementById("{!$Component.test}");

One other option for lookup is to use a data- tag in the markup and also use querySelector, but I'm honestly not sure how well that will mesh with using the pageBlock family of tags. And in the end the whole reason for the $Component global variable was to support precisely this functionality.

Disclaimer, the above was based on my memory, and not tested, but in principle, this is how this is supposed to work. If it doesn't, leave a note, and I'll check back. And of course, if anyone sees a typo in my suggestions, please either say so, or edit (if you have the privileges).

1
  • Hi @pchittum, I've modified the pageBlockTable and the JS method with your notes, but the method is not working. <script> function HideMsg(){ var checkval = document.getElementById("{!$Component.test}"); //var checkval = document.getElementById("test"); for(var i = 0; i < checkval.length; i++){ checkval[i].style.display='block'; } } </script> – Davidenserio Oct 19 '20 at 7:05
0

I update with more data.

This is my pageBlockTable enter image description here

When I mark the checkbox (red circle), I want to hide some of the records (based on a value field).

The visualforce:

<script>
  function HideMsg(){
      var checkval = document.getElementById("{!$Component.test}");
      for(var i = 0; i < checkval.length; i++){
          checkval[i].style.display='none';
      }
  }
</script>


<apex:pageBlock title="Productos ya añadidos al servicio:" rendered="{!mostrarProductosYaAnadidos}">
            <apex:pageBlockSection columns="1" id="productosYaAnadidos">
                <apex:inputCheckbox label="Ocultar productos hijos / productos que forman parte de un bundle" onchange="HideMsg();"/>
                <apex:outputPanel > 
                    <apex:pageBlockTable id="test" value="{!listaProductosAnadidos}" var="wrpOrderItem">
                        <apex:column >
                            <apex:inputCheckbox value="{!wrpOrderItem.check}"></apex:inputCheckbox>
                        </apex:column>
                        <apex:column headerValue="Producto"><apex:outputLink value="/{!wrpOrderItem.productosAnadidos.Id}">{!wrpOrderItem.productosAnadidos.Product2.Name}</apex:outputLink></apex:column>
                        <apex:column headerValue="Precio por unidad">
                            <apex:inputField value="{!wrpOrderItem.productosAnadidos.UnitPrice}"/>
                        </apex:column>
                        <apex:column headerValue="Cantidad">
                            <apex:inputField value="{!wrpOrderItem.productosAnadidos.Quantity}"/>
                        </apex:column>
                        <apex:column headerValue="Precio Total" value="{!wrpOrderItem.productosAnadidos.TotalPrice}"/>
                        <apex:column headerValue="IVA" value="{!wrpOrderItem.productosAnadidos.IVA__c}"/>
                        <apex:column headerValue="Precio Total con IVA" value="{!wrpOrderItem.productosAnadidos.Precio_total_con_IVA__c}"/>    
                        <apex:column headerValue="Regalo" value="{!wrpOrderItem.productosAnadidos.blnGM_Regalo__c}"/>
                        
                    </apex:pageBlockTable>
                    <apex:commandButton value="Modificar" action="{!modificarProductos}" reRender="form" />
                    <apex:commandButton value="Eliminar" action="{!borrarProductos}" reRender="form" />   
           </apex:outputPanel>
      </apex:pageBlockSection>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.