Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap Popover Inside Popover not working

I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.

<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>

<div class='container hide' id='cont'>
     <a onclick="Facebook()"
        class="btn btn-default">
        Facebook 
        </a>
         <a onclick="twitter()"
        class="btn btn-default">
        Twitter 
        </a>
         <a class="btn btn-default"
        data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
        type="button" data-html="true" href="#" id="login">
        Email 
        </a>
</div>

<div id="popover-content" class="hide">
      <form class="form-inline" role="form">
        <div class="form-group">
          <input type="text" placeholder="Name" class="form-control" maxlength="5">
          <button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>                                  
        </div>
      </form>
    </div>

and the js 

$('#but1').popover({
    html: true,
    content: $('#cont').html()
});


$("[data-toggle=popover]").popover({
    html: true, 
    content: function() {
          return $('#popover-content').html();
        }
});

function Facebook(){
    alert('share on facebook');
}
function twitter(){
    alert('share on twitter');
}

function EmailToSomeOne(){
 alert('Email to send');   
}

for more clearing i have created a fiddle also.

Tags:

4

Answers


  1. 0

    Bootstrap not support the Nested popover
    http://getbootstrap.com/javascript/#modals

    Login or Signup to reply.
  2. 0

    You can simply bind the buttons with an id like

    <a id="Facebook"class="btn btn-default">Facebook </a>

    and access it using 

    $("#Facebook").on('click',function(){
    alert('share on facebook');
})

    EDIT:
    You cannot have nested popover in bootstrap.However you can use the below two approaches
    1)You can change the html inside the popover and display your email form 

    $('.popover-content').html($('#emailform').html())

    Please refer to the fiddle attached for this appproach

    https://jsfiddle.net/mohit181191/mxstLfnf/

    2)You can open a modal on popover button click.

    <a data-toggle="modal" data-target="#facebook"
    class="btn btn-default">

    Please refer to the below fiddle for this approach

    http://jsfiddle.net/mohit181191/o35zqy7w/

    Login or Signup to reply.
  3. 0

    Use this :

    $('body').on('click',".btn-default", function(){
   alert('share on facebook');
});

    .btn-default change this to your button default id

    Login or Signup to reply.
  4. 0

    Your code works fine. Its just a jsFiddle setting issue.

    In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.

    See example

    When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)

    BTW, here’s an equivalent example on plunkrenter link description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search