1

I want to integrate jquery to show/hide table rows dependent on a parameter:

The jQuery looks like this:

<apex:includeScript value="{!URLFOR($Resource.input_js, 'input_js/jquery-3.1.0.min.js')}" />
<script>
    $j = jQuery.noConflict();

    $j(document).ready(function() {
        var addcount = '{!addcount}';
        var contact = $j('[id$=table]').get();

        for (i = 0; i < 20; i++) {
            if (i < addcount) { 
                console.log(contact[i]);
                $j(contact[i]).show();
            } else {
                $j(contact[i]).hide();
            }
        }
    }
</script>

And the table rows like this:

    <div id="table">
        <apex:repeat value="{!listTest}" var="item">
            <div id="contact">
                <div class="divTable">
                    <div class="divRow">
                        <div class="cellOne">
                            <label>Test</label>
                        </div>
                        <div class="cellTwo">
                            <apex:inputText value="{!item.Test}"></apex:inputText>
                        </div>
                    </div>  
                    <div class="divRow">
                        <div class="cellOne">
                            <label>Test2</label>
                        </div>
                        <div class="cellTwo">
                            <apex:inputText value="{!item.Test2}"></apex:inputText>
                        </div>
                    </div>
                </div>
            </div>
        </apex:repeat>
    </div>

The parameter "addcount" is defined in the table as:

public Integer addCount {get; set;}

and further defined in a method. The display "{!addcount}" on Visualforce works correctly.

Also, the jQuery seems to be called correctly. So why is it not working? Thanks!

Improve this question
7
  • 2
    Why do you need to do this with jQuery? Isn't Visualforce sufficient enough? Commented Apr 30, 2017 at 16:11
  • Elaborating on why sfdcfox has said, is there any reason why you aren't using <apex:pageBlockTable> here? If you wrap the entire row in an <apex:outputBlock>, you could set the rendered attribute as desired (if displaying your rows is controlled by something in the controller/extension). Commented Apr 30, 2017 at 16:15
  • Yes, there is a reason because on the same page I want to upload files, but I cannot use rerender, because SF has restricted functionality here (apex:inputFile in combination with rerendering). So I need to show/hide columns dynamically via JavaScript in order to avoid rerendering the page. Commented Apr 30, 2017 at 16:39
  • rerender is different from rendered Commented Apr 30, 2017 at 20:25
  • I need to rerender as this is not the entire code, but "addcount" is dependent on the input in an inputText, and then parts of the page need to be rerendered. The code above is just the first step to the full functionality. Thus, it seems I cannot avoid JavaScript. Commented May 1, 2017 at 6:32

1 Answer 1

Reset to default
1

The problem is likely to be 

var contact = $j('[id$=table]').get();

If you want to retrieve the child divs of the object, use children() instead of get(). Finally you might reconsider the advice of sfdcfox and Derek. Such a suggested solution wouldn't rerender anything, just not render the unnecessary and save you the Javascript. For example:

<div id="table">
    <apex:variable var="i" value="{!0}"/>
    <apex:repeat value="{!listTest}" var="item">
        <apex:outputPanel layout="block" rendered="{!(i<addcount)}">
        [...]
        <apex:variable var="i" value="{!i+1}"/>
    </apex:repeat>
</div>

Not possible?

Improve this answer
1
  • Thank you very much, now the jQuery functions well. As stated above, the page has further functionalities and I just wrote the basic problem here. "addcount" is dependent on an inputField, and therefore I need to rerender the page. Commented May 1, 2017 at 7:28

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.