1

The bootstrap popover stopped showing up after I encased that part of the code inside of apex:outputPanel.

Here is my table. I render the panel after clicking on a row.

apex:pageBlockTable value="{!Case}" var="c">
                        <apex:column value="{!c.name}"/> 
                        <apex:column value="{!c.time}"/> 

                        <apex:actionSupport event="onRowClick" action="{!getList}" reRender="panel">
                        <apex:param name="rowId" value="{!c.Id}" assignTo="{!selectedCaseId}" />
                        </apex:actionSupport>
                    </apex:pageBlockTable> 

Here is the panel where I would like to have a popover when hovering over each breadcrumb.

<apex:outputPanel id="panel">
        <apex:outputPanel rendered="{!hasList}">
            <div id="container">
                <div class="btn-group btn-breadcrumb">
                    <apex:repeat value="{!processedList}" var="a">
                        <a href="#" class="{!IF(a.status=='Not Done','btn btn-danger',IF(a.status=='Done','btn btn-success','btn btn-info')))))}" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content='Example popover text' type="button">
                            <span>{!a.status}</span>    
                        </a>
                    </apex:repeat>
                </div>
            </div>
        </apex:outputPanel>
    </apex:outputPanel>

I have already checked that I initiated the popover.

<script>

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true
    }); 
});</script>

Any help would be much appreciated.

3
  • Is the content being rerendered? If so, you will need to re-bind your popover events in the oncomplete event for whatever is triggering the rerender. – dsharrison Nov 17 '15 at 20:18
  • @D.S. the oncomplete worked! The need to re-bind was the issue. Thank you! – dinoD Nov 18 '15 at 21:44
  • Great to hear! I added a bit more detailed of an explanation as an answer so that you can accept it and help other people that run into this problem. – dsharrison Nov 18 '15 at 22:04
0

When using bootstrap javascript events with Visualforce, any rerender events on the page will break the bindings because Salesforce destroys the existing DOM elements, then re-draws them (sometimes differently, depending on your rendered statements). The simple solution to this is to re-bind bootstrap's events in the oncomplete of your action that invoked the rerender.

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.