function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mahipal reddymahipal reddy 

facing issue in acheiving popover in lightning components..

Hi Members,
I have a requiremnt in lighting , to display popover when user clicks on account name.
Basically  i am displaying scollable list of accounts with names. and if user clicks on account name we should display account full details as popover.
I tried bootstrap popover() method but it is throwing errors...
HTML in the component: 
<ul class="slds-list--vertical slds-has-dividers--top-space">
                <li><a href="javascript:void(0);" id="abcd" title="Header" onclick="{!c.displaypopup}" data-toggle="popover" data-placement="top" data-content="right">Test Account 1</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.displaypopup}" data-placement="right" data-content="Content">Test Account 2</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.displaypopup}" data-placement="right" data-content="Content">Test Account 3</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.displaypopup}" data-placement="right" data-content="Content">Test Account 4</a></li>
            </ul>
Controller Method:
  
displaypopup : function(component, event, helper){
        var popup=event.currentTarget;
        var listid =popup.id;
        var jqelement = $("#"+listid);
        console.log('element clicked',listid);
        console.log('jqelement ',jqelement);
        jqelement.popover();
       
    },

Below is the error i am getting when clicked on account name:
User-added image

 
sfdcMonkey.comsfdcMonkey.com
hi mahipal

please check your bootstrap laibrary (css and js) is working well. than try bleow code .its working good :)
  
<aura:application >
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <ltng:require styles="{! $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/css/bootstrap.min.css'}" 
            scripts="{!join(',', 
                     $Resource.jquery224 + '/bootstrapejq/jquery-2.2.4.min.js', 
                     $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/js/bootstrap.min.js')
                    }"/>  

<div class="container">
    <br/><br/><br/><br/><br/> 
    <ul class="slds-list--vertical slds-has-dividers--top-space">
                <li><a href="javascript:void(0);" title="Header" onclick="{!c.pop}" data-toggle="popover" data-placement="left" data-content="one account">Test Account 1</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="right" data-content="two account">Test Account 2</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="right" data-content="Three account">Test Account 3</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="bottom" data-content="Four account">Test Account 4</a></li>
     </ul>
    
    </div>
</aura:application>

js controller  
({
	pop : function(component, event, helper) {
        $(document).ready(function(){
    $('[data-toggle="popover"]').popover();
      });
		
	}
})

result -:
User-added image

if you dont add jquery file on your component go to the link and --> right click -- save as-- save file as file.js and upload at static resources in zip file and using it your component and also check your current bootstrape libarary 
https://code.jquery.com/jquery-2.2.4.min.js (https://code.jquery.com/jquery-2.2.4.min.js" target="_blank)

Thanks :)
If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer. :-)


 
mahipal reddymahipal reddy

Hi Piyush,
Some new Error Came...

User-added image

got this error now.

I have downloaded bootstrap from "http://getbootstrap.com/getting-started/#download".
and Jquery from "https://code.jquery.com/jquery-2.2.4.min.js".

APP : 
<aura:application >
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <ltng:require styles="{! $Resource.BSandJQ + '/css/bootstrap.min.css'}" 
            scripts="{!join(',', 
                     $Resource.BSandJQ + '/jquery-2.2.4.min.js', 
                     $Resource.BSandJQ + '/js/bootstrap.min.js')
                    }"/>  

<div class="container">
    <br/><br/><br/><br/><br/> 
    <ul class="slds-list--vertical slds-has-dividers--top-space">
                <li><a href="javascript:void(0);" title="Header" onclick="{!c.pop}" data-toggle="popover" data-placement="left" data-content="one account">Test Account 1</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="right" data-content="two account">Test Account 2</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="right" data-content="Three account">Test Account 3</a></li>
                <li><a href="javascript:void(0);" title="Header" data-toggle="popover" onclick="{!c.pop}" data-placement="bottom" data-content="Four account">Test Account 4</a></li>
     </ul>
    
    </div>
</aura:application>

and Controller code same as yours...
sfdcMonkey.comsfdcMonkey.com
hi mahipal
you got this error because any of your bootstrap or jquery file not load successfully 
please double check your static resources file Name and path in zip file.

upload 2 zip files
1 for bootstrap and 
1 for only jquery file 
focus on css, and js file path location. open zip file in your system and check the file proper path and name. 
Thanks
let me inform if it work and mark it solve :)​ 

 
Trey FlowersTrey Flowers
Sorry to bring up an old thread, just wanted to add my two cents. Seems like it's an issue with locker service, as 'instanceof' is no longer allowed with locker service enabled. You can temporarily fix this by disabling locker service, if your org qualifies. Unfortunately, it looks like the locker service critical update will auto activate in 2017, which will break the code again. I don't know if a permanent fix has come to light yet, but if anyone knows one, I'd love to know.

Check out this link:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_code.htm