locked
How to redirect to specfic url when clicking on that Link buttons RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User194385433 posted

    Hi,

    When I click on that Popover Inside button , it should redirect to the specific page.

    1. if we click on Action - it redirects to the google.com
    2. If we click on Another Action - it redirects to the rediff.com
    3. If we click on Something else -it redirects to the as.net 
    #popover_template
{
    display:none;
}


<div class="container">
    <button class="btn btn-primary demo_button">Click here</button>
    
    <div id="popover_template">
          <ul class="nav nav-pills nav-stacked">
    <li><a class="btn click_me" href="htttp://www.google.com">Action</a></li>
    <li><a href="htttp://www.rediff.com">Another action</a></li>
    <li><a href="htttp://www.asp.net">Something else</a></li>
   
   
</div>


jQuery(document).ready(function($) {

   $('.demo_button').click(function () {
        $(this).popover({
                    html: true,
                    trigger: 'manual',
                    placement: 'right',
                    content: function () {
                        var $buttons = $('#popover_template').html();
                        return $buttons;
                    }
        }).popover('toggle');
    });
    
    $('.container').on('click', '.click_me', function() {
       
    });
    
});

    Thanks

    Thursday, April 19, 2018 11:07 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1838255255 posted

    Hi sureshtalla,

    According to your description and code, i make a test in my side, it is very simply, you only need replace the htttp with http, here are my test code, please check:

    <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #popover_template {
            display: none;
        }
    </style>

    <script>
        jQuery(document).ready(function ($) {
            $('.demo_button').click(function () {
                $(this).popover({
                    html: true,
                    trigger: 'manual',
                    placement: 'right',
                    content: function () {
                        var $buttons = $('#popover_template').html();
                        return $buttons;
                    }
                }).popover('toggle');
            });

            $('.container').on('click', '.click_me', function () {

            });

        });
    </script>
</head>
<body>
    <div class="container">
        <button class="btn btn-primary demo_button">Click here</button>
        <div id="popover_template">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="btn click_me" href="https://www.google.com">Action</a></li>
                <li><a href="https://www.rediff.com">Another action</a></li>
                <li><a href="https://www.asp.net">Something else</a></li>
            </ul>
        </div>
    </div>
</body>

    Best Regards,

    Eric Du 

    Friday, April 20, 2018 3:07 AM