0

I have a lookup field that inserts a row of fields onto my page. I have an outputpanel that surrounds the html which needs to be rerendered. The problem is, inside that outputpanel I have a few selectLists (Current Client) that unhide a div (#questionaire) based on an option. How do I prevent that outputpanel from refreshing/rerendering when the javascript fires? I also have javascript firing off inside the #questionaire div.

Flow I select "Yes" or "No" for "Current Client" and javascript unhides the #questionaire div. If the answer is "No", the "Who do they currently bank with?" question unhides.

jQuery

$('.select_questionaire').change(function(){
    var option_container = $(this).attr('data-options');
    if($(this).val() != ""){
        $(this).getParent(3).find('div[data-options="'+option_container+'"]').removeClass('hidden');
        if($(this).val() == "No"){
            $(this).getParent(3).find('div[data-options="'+option_container+'"]').find('li.bank').removeClass('hidden');
        }
    }
})

jQuery.fn.getParent = function(num) {
    var last = this[0];
    for (var i = 0; i < num; i++) {
        last = last.parentNode;
    }
    return jQuery(last);
};

HTML

<ul id="cpa-list">
    <apex:outputPanel id="cpa_outerpanel">
    <li class="exclude_hidden">
        <apex:inputField html-placeholder="Search by Client Name" value="{!contactLookup.Contact__c}" required="false" /> 
        <label>Search Existing Clients/Prospects</label>
        <apex:actionSupport action="{!addContactToList}" event="onchange" focus="CPA_repeat" rerender="cpa_outerpanel" id="addContact_cpa" oncomplete="unhide_row('cpa-list');" />
    </li>
    <apex:repeat id="CPA_repeat" var="index" value="{!contactCPA}">
    <li class="hidden">
        <ul class="no-margin">
            <li class="exclude_hidden no-padding">
                <apex:inputText styleClass="otherText" value="{!contactCPA[index].Name}" />
                <label>Name</label>
            </li>
            .....
            <li class="exclude_hidden">
                <apex:selectList value="{!contactCPA[index].Is_Client__c}" size="1" styleClass="select_questionaire" html-data-options="cpa_questionaire" >
                    <apex:selectOptions value="{!Client_Options}"/>
                </apex:selectList>
                <label>Current Client?</label>
            </li>
        </ul>
        <!-- start questionnaire -->
        <div id="questionnaire" class="select_extend_container hidden" data-options="cpa_questionaire">
            <div class="questions">
                <ul>
                    <li class="exclude_hidden" data-options="cpa_professional">
                        <strong>Have you met with the professional?</strong>
                        <select name="select" class="selectOptions">
                            <option value="">choose one</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </li>
                    <li class="hidden" data-options="cpa_professional">
                        <strong>If no, why? </strong>
                        <input type="text" name="name" placeholder="please provide a reason here" class="error" />
                    </li>
                    <li class="hidden bank">
                        <strong>Who do they currently bank with?</strong>
                        <apex:selectList value="{!crCPA[index].Client_Prospect__r.Banks_With__c}" size="1" >
                            <apex:selectOptions value="{!BanksWith_Options}"/>
                        </apex:selectList>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end questionnaire -->
        <div style="margin: 0px auto; text-align:center; padding:10px"><a href="#" class="btn btn-default openall fl_addOther">Add Additional CPAs</a> </div>
    </li>
    </apex:repeat>
    </apex:outputPanel>
</ul>
  • Can you provide the flow which you are going through? You select the Current client selectlist than how are you displaying the questionnaire div? js or rerender? – Salesforcesmarty Jan 13 '16 at 23:03
  • I would either use jQuery, or use the native Visualforce rerendering functionality...not mix the two at the same time. I think the two will always be fighting for control. – pchittum Jan 14 '16 at 18:29
  • @Peter that works. Going to opt with visualforce. – jeq214 Jan 14 '16 at 19:47
0

Opted to use Visualforce rerendering...

<div id="questionnaire" class="hidden" style="display:{!if(showQuestionaireDiv,"block","none")};">
...
</div>

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.