Форма и входы не отображаются в bootstrap popover - PullRequest
Новая
       31

Форма и входы не отображаются в bootstrap popover

1 голос
/ 26 марта 2020

Я хочу создать форму внутри Bootstrap поповера. Всплывающее окно показывает все элементы, но когда я использую тег form или input, button et c. это ничего не показывает. 

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>

1 Ответ

1 голос
/ 26 марта 2020

Чтобы это работало, вам нужно вернуть объект jQuery для установки в содержимом, а не строку HTML: 

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>
...