0

Buenas tardes utilizo el siguiente código para mostrar un popovers con un formulario, pero al llamar la función realiza un salto de linea sin ejecutar la función y no muestra nada. Gracias de antemano

<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>
1
  • tu ul con el form debería mostrarse dentro de un popover al hacer click en un boton?
    – Fran Islas
    Commented el 25 nov. 2018 a las 23:38

1 respuesta 1

1

Te dejo un ejemplo de como lo podrias hacer. Recuerda que para poder usar los popover necesitas añadir 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.