wake-up-neo.com

Wie kann ich Argumentargumente an die modal.show () - Funktion in Bootstrap übergeben?

Ich habe eine Seite, die eine Liste der lokalen Cafés zeigt. Wenn der Benutzer auf ein bestimmtes Café klickt, wird ein modaler Dialog angezeigt, in dem der "Café-Name" bereits ausgefüllt ist. Die Seite enthält viele Cafe-Namen, und das Formular sollte den "Cafe-Namen" enthalten, auf den er geklickt hat.

Es folgt die Liste der Café-Namen, die als Text mit der Schaltfläche "Link" generiert wurden

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

Hier ist die modale Form

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

Die Frage ist, wie man den tatsächlichen Wert in das "value" -Attribut der modalen Form übergibt.

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

Das Formular "show" -Ereignis wird durch das "onlick" -Ereignis ausgelöst

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

Du könntest es so machen:

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

Dann binden Sie den Klick mit jQuery und senden Sie die Announce-Daten-ID als Wert in den 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

Benutzen

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

Ich möchte mitteilen, wie ich das gemacht habe. Ich verbrachte die letzten Tage damit, mit dem Kopf zu klappern und einige Parameter an den Bootstrap-Modal-Dialog zu übergeben. Nach vielem Headbashing kam ich auf eine ziemlich einfache Art und Weise, dies zu tun. 

Hier ist mein Modalcode:

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

Und hier ist das einfache Javascript, um die Eingabewerte für gid und gname zu ändern:

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

Ich habe gerade das Onclick-Event in einem Link verwendet:

//                                                                              &#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 wird zuerst ausgelöst und ändert die value-Eigenschaft der Eingabefelder. Wenn das Dialogfeld angezeigt wird, sind die Werte für das zu übermittelnde Formular vorhanden.

Ich hoffe das hilft jemandem eines Tages. Prost.

0
detrix42