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.


    var option_container = $(this).attr('data-options');
    if($(this).val() != ""){
        if($(this).val() == "No"){

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


<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');" />
    <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}" />
            <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}"/>
                <label>Current Client?</label>
        <!-- start questionnaire -->
        <div id="questionnaire" class="select_extend_container hidden" data-options="cpa_questionaire">
            <div class="questions">
                    <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>
                    <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 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}"/>
        <!-- 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>
  • 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? Jan 13, 2016 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, 2016 at 18:29
  • @Peter that works. Going to opt with visualforce.
    – jeq214
    Jan 14, 2016 at 19:47

1 Answer 1


Opted to use Visualforce rerendering...

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .