Form and inputs not shown in bootstrap popover

user_8386280 0
Viewed 540

I want to create a form inside a Bootstrap popover. The popover shows all elements but when I use a form tag or input, button etc. it doesn't show anything. 

var options = {
  content: function() {
    return $("#message_popover_content").html();
  },
  html: true,
  container: "body",
  placement: 'bottom',
};

$('#message_popover').popover(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<a href="javascript:void(0)" id="message_popover" class="sm-btn-success border-default mt-2 ml-4" rel="popover">Envoyer une autre version</a>
<div id="message_popover_content" class="d-none">
  <div class="popover-cart">
    <div class="popover-head">
      <h3 class="s-m-title">Envoyer une nouvelle version de l’EVP (juillet 19)</h3>
    </div>
    <div class="popover-body">
      <div class="send-msg-form add-formation-modal">
        <form action="javascript:void(0)">
          <div class="form-group">
            <textarea class="form-control" name="message" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="etablissementLogo" class="file-etablissement-logo-label"> <img src="images/bo/icons/attatch.svg" alt="> Joindre un fichier</label>
            <input type="file" class="form-control-file" name="file" id="etablissementLogo">
          </div>
          <div class="add-formation-actions">
            <input type="submit" class="btn btn-update" value="Envoyer l’EVP">
            <button type="button" class="btn btn-cancel" data-dismiss="modal">Annuler</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

popover bootstrap-4 jquery
1 Answers

For this to work you need to return the jQuery object to set in the content, not the HTML string:

var options = {
  title: () => $("#message_popover_content .popover-head h3"),
  content: () => $("#message_popover_content .add-formation-modal form"),
  html: true,
  placement: 'bottom'
};

$('#message_popover').popover(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<a href="javascript:void(0)" id="message_popover" class="sm-btn-success border-default mt-2 ml-4" rel="popover">Envoyer une autre version</a>
<div id="message_popover_content" class="d-none">
  <div class="popover-cart">
    <div class="popover-head">
      <h3 class="s-m-title">Envoyer une nouvelle version de l’EVP (juillet 19)</h3>
    </div>
    <div class="popover-body">
      <div class="send-msg-form add-formation-modal">
        <form>
          <div class="form-group">
            <textarea class="form-control" name="message" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="etablissementLogo" class="file-etablissement-logo-label"> <img src="images/bo/icons/attatch.svg" alt=""> Joindre un fichier</label>
            <input type="file" class="form-control-file" name="file" id="etablissementLogo">
          </div>
          <div class="add-formation-actions">
            <input type="submit" class="btn btn-update" value="Envoyer l’EVP">
            <button type="button" class="btn btn-cancel" data-dismiss="modal">Annuler</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

user_5194130
Related