I've created a lightning component (called from a VF page using $Lightning.use) which contains a table of tables (product class, then a list of products for that product class). I'm trying to use bootstrap's "collapse" functionality to expand/collapse the product listing detail for each product class, and getting weird results:
- doesn't work at all
- works only the first time I click on a row
- works for a while, then it seems that after all components (there are multiple comps on the page) have finished rendering, it stops working
Also note there is another component that is also trying to do similar functionality (same results).
Is there something withing the framework that is overriding the bootstrap js functionality that I've missed? I think I have the scripts/css loaded properly, but I'm a Lightning component noob. FWIW I have been able to successfully implement this functionality in VF pages / components.
component:
<aura:component controller="ProductListingController_COM" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<ltng:require scripts="/resource/jquery191min/jquery-1.9.1.min.js, /resource/Bootstrap_3_1_1/bootstrap-3.1.1-dist/js/bootstrap.min.js"
styles="/resource/BootstrapSF1/dist/css/bootstrap-namespaced.min.css"/>
<aura:attribute name="ProdClassWraps" type="ProductListingController_COM.prodClassWrapper[]"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="_slds bootstrap-sf1">
<div id="mainContent" class="panel panel-default slds-card">
<aura:iteration items="{!v.ProdClassWraps}" var="cl" indexVar="i">
<!-- product class table; clicking on row is supposed to expand
product listing for that class -->
<table class="panel-table table" data-toggle="collapse"
data-target="{!'#collapseProdList' + i}" href="{!'#collapseProdList' + i}">
<col style="width:50%;"/>
<col style="width:25%;"/>
<col style="width:25%;"/>
<tr style="vertical-align:top;font-style:bold;">
<td style="padding-right:5px;"><ui:outputText value="{!cl.prodClass}"/></td>
<td style="padding-right:5px;"><ui:outputText value="{!'Purchased: ' + cl.totalPurcQty}" /></td>
<td><ui:outputText value="{!'Active: ' + cl.totalActiveQty}"/></td>
</tr>
</table>
<!-- product listing detail for each product class;
this table is supposed to expand when header row (above) is clicked -->
<table id="{!'collapseProdList' + i}"
class="slds-table slds-max-medium-table--stacked-horizontal slds-table--striped table panel-collapse collapse">
<thead>
<tr>
<th>SKU</th>
<th>Description</th>
<th>Qty Purchased (Since 04/01/2012)</th>
<th>Active Qty</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!cl.pList}" var="obj">
<tr>
<td>{!obj.Name}</td>
<td>{!obj.Description__c}
<aura:if isTrue="{! !empty(obj.System_Vendor__c)}"> {!obj.System_Vendor__c}</aura:if></td>
<td>{!obj.Purchased_since_2012__c}</td>
<td>{!obj.Active_Qty__c}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:iteration>
</div>
</div>