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 &nbsp;&nbsp; : &nbsp;&nbsp; {!con.email}
                            Phone &nbsp;&nbsp; : &nbsp;&nbsp; {!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.





 

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 &nbsp;&nbsp; : &nbsp;&nbsp; {!con.email}
                            Phone &nbsp;&nbsp; : &nbsp;&nbsp; {!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.





 

Hi big audience!
I've developer several components since the release of Lightning framework but I still have a strange problem.
When I load external libraries (most common case is Bootstrap and jQuery) sometimes the jQuery library is not correctly loaded on startup, thus causing problems on dynamically loaded UI.
The docs say I should use the "renderer" with the afterRender event, but doing this I don't see any trace of jQuery (like it is not yet loaded, the $ plugin is undefined), so I can't init my UI from that method.
This leads to random crash of the app on first load, because sometimes the jQUery library is not loaded on startup.
Do you have any suggestions on this?
I'm currently using "setTimeout" to run the UI initializazione asynchronously, but I don't think this is a clean and good solution.
Thanks
Enrico