Apex Code Development You need to sign in to do that
Don't have an account?
rahul mamtani 6 jquery and css not working while Iterating values in lightning?
Hi all,
I am creating a simple example with Jquery Mobile and lightning.When i am iterating my records using <aura:iteration> component Jquery and css is not working with it.But when i am using simple html code it is working fine.It is showing the records.
Here is my component code : -
<--------- Component---------------------------->
<aura:component controller="balluforce.fetchContacts">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<aura:attribute name="contacts" type="contact"/>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Company Contacts</h1>
</div>
<aura:iteration items="{!v.contacts}" var="con">
<div data-role="collapsible">
<h1>{!con.Name}</h1>
<p>
Email : {!con.email}
Phone : {!con.phone}<br/>
</p>
</div>
</aura:iteration>
</div>
</div>
</aura:component>
<============ App Code=============>
<aura:application >
<link rel="stylesheet" href="/resource/balluforce__lightninglib/lightninglib/bootstrap.css"/>
<balluforce:jquerymobilecomp />
<script src="/resource/balluforce__lightninglib/lightninglib/jquery.js"></script>
<script src="/resource/balluforce__lightninglib/lightninglib/bootstrap.js"></script>
</aura:application>
Is there any mistake in the code.Please help me.Thanks in advance.
I am creating a simple example with Jquery Mobile and lightning.When i am iterating my records using <aura:iteration> component Jquery and css is not working with it.But when i am using simple html code it is working fine.It is showing the records.
Here is my component code : -
<--------- Component---------------------------->
<aura:component controller="balluforce.fetchContacts">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<aura:attribute name="contacts" type="contact"/>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Company Contacts</h1>
</div>
<aura:iteration items="{!v.contacts}" var="con">
<div data-role="collapsible">
<h1>{!con.Name}</h1>
<p>
Email : {!con.email}
Phone : {!con.phone}<br/>
</p>
</div>
</aura:iteration>
</div>
</div>
</aura:component>
<============ App Code=============>
<aura:application >
<link rel="stylesheet" href="/resource/balluforce__lightninglib/lightninglib/bootstrap.css"/>
<balluforce:jquerymobilecomp />
<script src="/resource/balluforce__lightninglib/lightninglib/jquery.js"></script>
<script src="/resource/balluforce__lightninglib/lightninglib/bootstrap.js"></script>
</aura:application>
Is there any mistake in the code.Please help me.Thanks in advance.
to
This should fix it.
If my answer helps resolve your query, please mark it as the 'Best Answer' & upvote it to benefit others and improve the overall quality of Discussion Forums.
Gaurav Kheterpal
Certified Force.com Developer| Salesforce Mobile Evangelist| Developer Forums Moderator| Dreamforce Speaker
Records are coming no problem with Contact[] . My css is not applied and even jquery is not working when i use <aura:iteration> with simple html it is working fine.
For example : if i use like this Jquery and CSS is not working.
<aura:iteration items="{!v.contacts}" var="con">
<div data-role="collapsible">
<h1>{!con.Name}</h1>
<p>
Email : {!con.email}
Phone : {!con.phone}<br/>
</p>
</div>
</aura:iteration>
But if i use like this it is working.
<div data-role="collapsible">
<h1>Name</h1>
<p>
Email : Email
Phone : Phone<br/>
</p>
</div>
I think problem is with Iteration.
Double check these
<script src="/resource/balluforce__lightninglib/lightninglib/jquery.js"></script> <script src="/resource/balluforce__lightninglib/lightninglib/bootstrap.js"></script>If my answer helps resolve your query, please mark it as the 'Best Answer' & upvote it to benefit others and improve the overall quality of Discussion Forums.
Gaurav Kheterpal
Certified Force.com Developer| Salesforce Mobile Evangelist| Developer Forums Moderator| Dreamforce Speaker
I have double check this and it is applied on other part of page.No problem with jquery and css they were loaded.It is not applied only on Iteration component.