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>
