Twitter Bootstrap 2 phương thức dưới dạng các hộp thoại

Question

Tôi có dạng hộp thoại sau:

<div class='modal' id='myModal'> 
    <div class='modal-header'> 
    <a class='close' data-dismiss='modal'>×</a> 
    <h3>Add Tags</h3> 
    </div> 

    <div class='modal-body'> 
    <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div> 
     <input id="tags_string" name="tags_string" type="text" value="luca" /> 
     <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" /> 
    </form> 
    </div> 

    <div class='modal-footer'> 
    <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> 
    </div> 
</div> 

và JS của mình:

<script> 
    //<![CDATA[ 
    $(function() { 
     // wire up the buttons to dismiss the modal when shown 
     $("#myModal").bind("show", function() { 
     $("#myModal a.btn").click(function(e) { 
      // do something based on which button was clicked 
      // we just log the contents of the link element for demo purposes 
      console.log("button pressed: "+$(this).html()); 
      // hide the dialog box 
      $("#myModal").modal('hide'); 
     }); 
     }); 
     // remove the event listeners when the dialog is hidden 
     $("#myModal").bind("hide", function() { 
      // remove event listeners on the buttons 
      $("#myModal a.btn").unbind(); 
     }); 
     // finally, wire up the actual modal functionality and show the dialog 
     $("#myModal").modal({ 
     "backdrop" : "static", 
     "keyboard" : true, 
     "show" : true // this parameter ensures the modal is shown immediately 
     }); 
    }); 
    //]]> 
</script> 

Khi tôi bấm x, đó là <a class='close' data-dismiss='modal'>×</a>, hình thức đóng cửa để lại cho tôi trên trang hiện tại, trong khi tôi muốn đi trên hamepage.

Ngoài ra "Thêm thẻ" botton, là <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> không làm gì cả, trong khi nhấp vào jaust ENTER trên bàn phím thực hiện công việc và tôi muốn nhấp vào "Thêm thẻ" đã thực hiện tương tự.

Tôi không quá giỏi về JS và prog front-end, vì vậy mọi trợ giúp đều được chào đón.

Answer 1

Nút gửi của bạn nằm ngoài thẻ biểu mẫu.
Nó sẽ không biết gửi biểu mẫu nào.

Sử dụng javascript để kết nối nó với biểu mẫu.

<div class='modal-body'> 
    <form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"> 
     <input name="something" value="Some value" /> 
    </form> 
    </div> 

<div class='modal-footer'> 
    <a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a> 
</div> 

<script> 
    $('#modal-form-submit').on('click', function(e){ 
    // We don't want this to act as a link so cancel the link action 
    e.preventDefault(); 

    // Find form and submit it 
    $('#modal-form').submit(); 
    }); 
</script> 

Đối với <a class='close' data-dismiss='modal'>×</a> đó là nghĩa vụ liên kết đến trang chủ, tại sao không chỉ loại bỏ các data-dismiss='modal' và làm cho nó hoạt động như một liên kết bình thường sử dụng một tiêu chuẩn href='home.html'.

Dưới đây là một số mã khác để chỉ cho bạn đi đúng hướng cho việc sử dụng AJAX để gửi biểu mẫu:

// Since we want both pressing 'Enter' and clicking the button to work 
// We'll subscribe to the submit event, which is triggered by both 

$('#modal-form').on('submit', function(){ 

    //Serialize the form and post it to the server 
    $.post("/yourReceivingPage", $(this).serialize(), function(){ 

    // When this executes, we know the form was submitted 

    // To give some time for the animation, 
    // let's add a delay of 200 ms before the redirect 
    var delay = 200; 
    setTimeout(function(){ 
     window.location.href = 'successUrl.html'; 
    }, delay); 

    // Hide the modal 
    $("#my-modal").modal('hide'); 

    }); 

    // Stop the normal form submission 
    return false; 
}); 

Answer 2

Các vấn đề đối với điền vào mẫu nằm trong bootstrap riêng thư viện phương thức JS (bootstrap-modal.js) - sự kiện gửi cơ bản đang được ngăn chặn do dòng # 204: ev.preventDefault (tại sao?).

Giải pháp của tôi là để thêm:

if(!$(e.target).parents('form')) 
    e.preventDefault(); 

Tuy nhiên tôi không biết những vấn đề nó sẽ đẻ trứng.

Answer 3

Với HTML5 bạn có thể có một cái gì đó như thế này:

<div class="modal" id="myModal"> 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <h3>Add Tags</h3> 
    </div> 

    <div class="modal-body"> 
    <form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"> 
     <div style="margin:0;padding:0;display:inline"> 
      <input name="utf8" type="hidden" value="&#x2713;" /> 
      <input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /> 
     </div> 
     <input id="tags_string" name="tags_string" type="text" value="luca" /> 
     <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" /> 
    </form> 
    </div> 

    <div class="modal-footer"> 
    <div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div> 
    </div> 
</div> 

này gọi là trong HTML5 form-associated element of-Tất nhiên nếu bạn cần hỗ trợ tất cả các trình duyệt + cái cũ thì bạn cần phải đi với JavaScript, nhưng bạn có thể sử dụng JavaScript dưới dạng dự phòng :)

Answer 4

Để nhận được nút gửi công việc, hãy đặt nó bên trong biểu mẫu.

<div class="modal"> 
    <form id="modal-form" action="/tagging" data-remote="true" method="post"> 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal">×</a> 
      <h3>A Modal Form</h3> 
     </div> 
     <div class="modal-body"> 
      <input name="something" value="Some value" /> 
     </div> 
     <div class="modal-footer"> 
      <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
      <input type="submit" value="Save" class="btn btn-primary" /> 
     </div> 
    </form> 
</div> 

Tuy nhiên, điều này làm tăng thêm lợi nhuận bất ngờ ở cuối phương thức.Bootstrap 2.0.2 introduced the modal-form class để sửa lỗi này hoặc bạn có thể sửa chữa nó bản thân với một định nghĩa kiểu như:

.modal > form { 
    margin-bottom: 0; 
} 

Đối liên kết đến một trang khác khi đóng modal tôi đi cùng với TheShellfishMeme

Đối với các × rằng được cho là liên kết đến trang chủ, tại sao không chỉ xóa dữ liệu bỏ qua = 'phương thức' và làm cho nó hoạt động giống như một liên kết bình thường bằng cách sử dụng tiêu chuẩn href = 'home.html'.

Answer 5

FYI Bạn có thể làm như sau (viết bằng ngọc bích):

.modal.hide.fadel 
    form.modal-form 
    .modal-header 
     button.close type='button' data-dismiss="modal" x 
     h3= t 'translation' 
    .modal-body 
     p hello 
    .modal-footer 
     button.btn data-dismiss="modal" href="#" = t 'close' 
     a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'