jquery - pass - send data modal

Cómo pasar argumentos de valores a la función modal.show() en Bootstrap

Question

Tengo una página que muestra una lista de cafés locales. Cuando el usuario hace clic en un café determinado, se muestra un diálogo modal, que ya tiene el "nombre del café" previamente llenado. La página contiene muchos nombres de cafés, y el formulario debe contener el "nombre del café" en el que hizo clic.

A continuación se encuentra la lista de nombres de cafés generados como texto con el botón de enlace

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

Aquí está la forma modal

<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 pregunta es cómo pasar el valor real al atributo "valor" de la forma modal.

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

El evento "mostrar" de formulario se desencadena por evento "onlick"

<a class="btn btn-primary" data-toggle="modal" onClick="$(''#createFormId'').modal(''show'')" >Announce</a>

Answer 1

Podrías hacerlo así:

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

Luego use jQuery para enlazar el clic y envíe el Id. De datos de anuncio como el valor en el #cafeId de modals:

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

Answer 2

Quiero compartir cómo hice esto. Pasé los últimos días sacudiéndome la cabeza con cómo pasar un par de parámetros al diálogo modal de arranque. Después de muchos golpes de cabeza, se me ocurrió una manera bastante simple de hacer esto.

Aquí está mi código 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>

Y aquí está el javascript simple para cambiar los valores de entrada gname y gname:

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

Acabo de utilizar el evento onclick en un enlace:

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

El onclick se dispara primero, cambiando la propiedad del valor de los cuadros de entrada, por lo que cuando aparece el cuadro de diálogo, los valores están en su lugar para que el formulario se envíe.

Espero que esto ayude a alguien algún día. Aclamaciones.

Answer 3

Utilizar

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