Cách chuyển đối số giá trị sang hàm modal.show() trong Bootstrap

Question

Tôi có một trang hiển thị danh sách các quán cà phê địa phương. Khi người dùng nhấp vào một quán cà phê cụ thể, một hộp thoại phương thức được hiển thị, đã có tên "quán cà phê" được điền trước. Trang chứa nhiều tên quán cà phê và biểu mẫu phải chứa "tên quán cà phê" mà anh đã nhấp vào.

Sau đây là danh sách các tên quán cà phê được tạo ra dưới dạng văn bản với liên kết nút

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

Dưới đây là hình thức modal

Câu hỏi là làm thế nào để vượt qua giá trị thực tế vào " giá trị "thuộc tính của hình thức phương thức?

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

Hình thức "show" sự kiện được kích hoạt bởi sự kiện "onlick"

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

Answer 1

Bạn có thể làm điều đó như thế này:

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

Sau đó sử dụng jQuery để ràng buộc các nhấp chuột và gửi ID dữ liệu thông báo là giá trị trong các phương thứC#cafeId:

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

Answer 2

Sử dụng

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

Answer 3

Tôi muốn chia sẻ cách thực hiện điều này. Tôi đã dành vài ngày cuối cùng rattling đầu của tôi với làm thế nào để vượt qua một vài tham số để hộp thoại bootstrap phương thức. Sau nhiều lần bashing đầu, tôi đã nghĩ ra một cách khá đơn giản để làm điều này.

Đây là mã phương thức của tôi:

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

Và đây là javascript đơn giản để thay đổi gid, và gname giá trị đầu vào:

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

tôi chỉ sử dụng các sự kiện onclick trong một liên kết:

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

Bật onclick trước, thay đổi thuộc tính giá trị của hộp nhập, vì vậy khi quay số og hiện lên, các giá trị được đặt cho biểu mẫu để gửi.

Tôi hy vọng điều này sẽ giúp ai đó vào một ngày nào đó. Chúc mừng.