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

j'ai une page les spectacles une liste des cafés locaux. Lorsque l'utilisateur clique sur un certain café, un dialogue modal est affiché, qui a 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é" qu'il a cliqué sur.

Voici la liste des noms de café générés en 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>

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" de la forme est déclenché par l'événement "onlick 

<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
27
demandé sur Adrian Thompson Phillips 2012-04-30 10:53:09

3 réponses

vous pourriez le faire comme ceci: 

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

puis utiliser jQuery pour lier le clic et envoyer les données D'annonce-id comme la valeur dans les modaux # cafeId: 

$(document).ready(function(){
   $(".announce").click(function(){ // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   });
});
44
répondu Menztrual 2012-04-30 07:19:13

Utiliser 

$(document).ready(function() {
    $('#createFormId').on('show.bs.modal', function(event) {
        $("#cafeId").val($(event.relatedTarget).data('id'));
    });
});
14
répondu Ri4a 2014-10-24 19:16:56

je veux partager comment j'ai fait cela. J'ai passé les derniers jours à me demander comment passer quelques paramètres dans le Dialogue modal de bootstrap. Après beaucoup de coups à la tête, j'ai trouvé une façon 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 les valeurs d'entrée gid et 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>

les feux de onclick en premier, changeant la propriété de valeur des boîtes de saisie, de sorte que lorsque la boîte de dialogue apparaît, les valeurs sont en place pour le formulaire à soumettre.

j'espère que cela aidera quelqu'un un jour. Acclamation.

0
répondu detrix42 2016-06-19 10:30:37