error Popovers Bootstrap

Question

error Popovers Bootstrap

Navigation

#1 by (1 votes)

0

Good afternoon I use the following code to show a popovers with a form, but when calling the function, it performs a line break without executing the function and does not show anything. Thanks in advance

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
function Popover() {
            $("[data-toggle=popover]").popover({
                    html: true,
                    content: function () {
                        return $('.popover').html();
                    }
            });            
        } 
</script> 


    <ul class="list-unstyled">
     <li><a data-placement="bottom" data-toggle="popover" data-title="Ambito" data-container="body" onclick="Popover();" type="button" data-html="true" href="#" id="Ambito"><span class="fa fa-plus fa-1x"></span></a></li>
        <div class="popover" role="tooltip">
          <!--<form class="form-inline" role="form">-->
             <div class="popover-body">
                  <select class="form-control">
                        <option>NA</option>
                        <option>RU</option>
                        <option>EU</option>
                        <option>SEA</option>
                   </select> 
             <input type="text" placeholder="Name" class="form-control" maxlength="5" />
            <button type="submit" class="btn btn-primary">Agregar</button>                                  
           </div>
        <!--</form>-->
     </div>
   </ul>

jquery bootstrap

asked by Mario Morales 25.11.2018 в 23:18

source

1 answer

How do I average the method: calculate AverageWeightDownload? POO Java Show wait GIF while ajax makes the request

score 1 · Accepted Answer

Here is an example of how you could do it. Remember that to use the popover you need to add popper.min.js

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover"> Abrir popover</button>


<div class="popover" role="tooltip" style="display:none">
          <!--<form class="form-inline" role="form">-->
             <div class="popover-body">
                  <select class="form-control">
                        <option>NA</option>
                        <option>RU</option>
                        <option>EU</option>
                        <option>SEA</option>
                   </select> 
             <input type="text" placeholder="Name" class="form-control" maxlength="5" />
            <button type="submit" class="btn btn-primary">Agregar</button>                                  
           </div>
        <!--</form>-->
     </div>