3
votes

Comment passer de la valeur dans le lien href d'un Bootstrap Modal?

Je veux effacer les valeurs d'une certaine table, donc je veux obtenir le nom de la table en utilisant Bootstrap modal. Je veux le nom de la table dans l'url.

Voici mon code: Ici, j'envoie le nom de la table dans le modal

<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">Ã—</span>
        </button>
      </div>
      <div class="modal-body">Are you sure you want to clear scrap for this table.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
      </div>
    </div>
  </div>
</div>

Je veux passer la valeur à l'intérieur de la table de données dans href comme clear.php? Clear_id = "table_name"

<ol class="breadcrumb text-center">
  <li class="breadcrumb-item">
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>

Merci d'avance!

javascript jquery html twitter-bootstrap bootstrap-modal

0 commentaires

3 Réponses :

0
votes

Vous pouvez le faire en utilisant un script simple comme celui-ci:

$('#scrapModal').on('show.bs.modal', function (event) {
  var table = $(event.relatedTarget).data('table');
  $(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}

Cela fonctionnera lorsque le modal apparaîtra. Il serait préférable de donner au bouton de confirmation un attribut id afin de rechercher de manière plus élégante.

Vous pouvez trouver plus d'informations sur la variation du contenu modal ici: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

0 commentaires

4
votes

Vous pouvez modifier dynamiquement la valeur href du bouton Effacer dans votre modal en utilisant le déclencheur d'événement shown.bs.modal et en créant l'URL avec le l'attribut data-table à votre disposition fourni par la propriété relatedTarget dans l'objet événement.

J'ai ajouté un événement de clic de bouton clair pour le souligner visuellement.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="breadcrumb text-center">
  <li class="breadcrumb-item">
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
  </li>
</ol>

<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&#215;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to clear scrap for this table.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger" href="#">Clear</a>
      </div>
    </div>
  </div>
</div>

$('#scrapModal').on('show.bs.modal', function (e) {
  var table = $(e.relatedTarget).data('table')
  var href = 'clear.php?clear_id=' + table
  $('.btn-danger', this).attr('href', href)
  console.log(href)
})

// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})

0 commentaires

1
votes

Utilisez les lignes de code suivantes dans votre balise de script et cela devrait fonctionner correctement.

$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})

0 commentaires