web-dev-qa-db-fra.com

Comment passer des arguments de valeurs à la fonction modal.show () dans Bootstrap

J'ai une page qui montre une liste de cafés locaux. Lorsque l'utilisateur clique sur un certain café, une boîte de dialogue modale s'affiche, qui contient déjà le "nom du café" pré-rempli. La page contient de nombreux noms de café et le formulaire doit contenir le "nom de café" sur lequel il a cliqué.

Voici la liste des noms de café générés sous forme de texte avec le bouton Lien.

         <table class="table table-condensed  table-striped">
      <tbody>   
        <tr>
          <td>B&Js
          </td>
          <td>10690 N De Anza Blvd </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

        <tr>
          <td>CoHo Cafe
          </td>
          <td>459 Lagunita Dr </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>


        <tr>
          <td>Hot Spot Espresso and Cafe
          </td>
          <td>1631 N Capitol Ave </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

      </tbody>
    </table>

Voici la forme modale

<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
    <a href="#" class="close" data-dismiss="modal">&times;</a>
    <h3>Create Announcement</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal" method="POST" commandName="announceBean" action="/announce" >
        <input type="hidden" name="cafeId" value="104" />
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="cafeName">Where I am Coding</label>
                <div class="controls">
                    <input id="cafeName" name="cafeName" class="input-xlarge disabled" type="text" readonly="readonly" type="text" value="B&amp;Js"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="date">Date</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="date" name="date" />
                    <p class="help-block"></p>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input type="submit" class="btn btn-primary" value="create" />
                    <input type="button" class="btn" value="Cancel" onclick="closeDialog ();" />
                </div>
            </div>
        </fieldset>
    </form>
</div>

La question est de savoir comment passer la valeur réelle dans l'attribut "valeur" de la forme modale?

<input type="hidden" name="cafeId" value="104" />

L'événement "show" est déclenché par l'événement "onlick"

<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
jqueryjavascript-eventstwitter-bootstrapmodal-dialog
27
Nambi

Vous pouvez le faire comme ceci:

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>

Ensuite, utilisez jQuery pour lier le clic et envoyez l'ID de données Announce comme valeur dans les modals #cafeId:

$(document).ready(function(){
   $(".announce").click(function(){ // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   });
});
45
Menztrual

Utilisation

$(document).ready(function() {
    $('#createFormId').on('show.bs.modal', function(event) {
        $("#cafeId").val($(event.relatedTarget).data('id'));
    });
});
14
Ri4a

Je veux partager comment j'ai fait cela. J'ai passé les derniers jours à me demander comment passer quelques paramètres au dialogue modal d'amorçage. Après de nombreuses critiques, j'ai trouvé un moyen assez simple de le faire. 

Voici mon code modal:

<div class="modal fade" id="editGroupNameModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div id="editGroupName" class="modal-header">Enter new name for group </div>
        <div class="modal-body">
          <%= form_tag( { action: 'update_group', port: portnum } ) do %>
          <%= text_field_tag( :gid, "", { type: "hidden" })  %>
          <div class="input-group input-group-md">
          <span class="input-group-addon" style="font-size: 16px; padding: 3;" >Name</span>
          <%= text_field_tag( :gname, "", { placeholder: "New name goes here", class: "form-control", aria: {describedby: "basic-addon1"}})  %>
        </div>
        <div class="modal-footer">
          <%= submit_tag("Submit") %>
        </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

Et voici le javascript simple pour changer le gid, et les valeurs d'entrée de gname:

function editGroupName(id, name) {
    $('input#gid').val(id);
    $('input#gname.form-control').val(name);
  }

Je viens d'utiliser l'événement onclick dans un lien:

//                                                                              &#39; is single quote
//                                                                                   ('1', 'admin')
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName(&#39;1&#39;, &#39;admin&#39;); return false;" href="#">edit</a>

Onclick se déclenche en premier, modifiant la propriété value des zones de saisie. Ainsi, lorsque la boîte de dialogue s'ouvre, des valeurs sont en place pour le formulaire à soumettre.

J'espère que cela aidera quelqu'un un jour. À votre santé.

0
detrix42