2013-06-04 34 views
13

Tôi có trang đăng ký kích hoạt cửa sổ phương thức (sử dụng Bootstrap) chứa thông tin đăng nhập Facebook và tôi muốn phương thức này trả lại dữ liệu (lỗi hoặc nếu thành công dữ liệu người dùng/mã thông báo) đến cửa sổ chính để tôi có thể điền vào các trường biểu mẫu có liên quan và cho phép người dùng hoàn thành quá trình đăng ký (đánh dấu vào ô "Tôi chấp thuận điều khoản và điều kiện", v.v.).Lấy lại dữ liệu từ phương thức Bootstrap

Tôi biết cách thực hiện tất cả ngoại trừ bit về gửi dữ liệu khi phương thức đóng. Có cách nào để truyền dữ liệu từ phương thức sang cửa sổ chính trên sự kiện gần đúng không?

EDIT: đây là một hình ảnh của những gì tôi muốn đạt được: flow

+0

Bạn có ý gì khi "gửi lại"? Bạn đang ở "cửa sổ chính" (phương thức chỉ là một phần tử bên trong) Tại sao không gán các giá trị, lỗi ... cho các đầu vào hoặc các phần tử ẩn trên chính trang đó? – davidkonrad

+0

Phương thức thực sự đang gọi một URL khác nơi bộ điều khiển auth của tôi. Vì vậy, cuối cùng tôi có một mảng php ở đó và tôi muốn điều này được sử dụng bởi kịch bản jquery mà sau đó sẽ gán các giá trị có liên quan cho trang. Đó là những gì tôi có nghĩa là "gửi lại": về cơ bản giống như một cuộc gọi ajax ngoại trừ người dùng phải giao tiếp với cửa sổ phương thức. – Davor

+0

Giống như http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/ nhưng với phương thức Bootstrap nếu có thể. – Davor

Trả lời

15

Vâng. Bạn có quyền truy cập vào cả cửa sổ chính và nội dung phương thức, vì vậy về cơ bản bạn chỉ cần sao chép nội dung từ các phần tử phương thức trước khi đóng. Ví dụ làm việc (sao chép hai codeblocks thành hai tệp):

auth.php (không biết auth hoạt động như thế nào, nhưng có thể bạn gọi đăng nhập từ xa và nhận một số kết quả, bạn có thể lưu trữ trong một mảng JSON)

<label for="modal-username">Username</label><input type="text" name="modal-username" id="modal-username"> 
<? 
$result = array(); 
$result['error']='error'; 
$result['auth']='auth'; 
$javascript_array = json_encode($result); 
?> 
<input type="hidden" id="modal-result" value='<? echo $javascript_array;?>'> 

modal.html, cửa sổ chính

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 

<!-- button to trigger modal --> 
<a href="auth.php" data-target="#myModal" data-toggle="modal">remote modal</a> 

<!-- hidden fields to store modal result in --> 
<input type="hidden" id="main-username"> 
<input type="hidden" id="main-result"> 

<!-- modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal test</h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <button class="btn btn-primary" onclick="login();">Login</button> 
    </div> 
</div>​ 

<script type="text/javascript"> 
//called when user clicks login 
function login() { 
    $("#main-username").val($("#modal-username").val()); 
    $("#main-result").val($("#modal-result").val()); 
    $("#myModal").modal("hide"); 
} 

//called when the modal is closed, logs values grabbed from the modal in login() 
$('#myModal').on('hidden', function() { 
    console.log('username : '+$("#main-username").val()); 
    console.log('result : '+$("#main-result").val()); 
}) 
</script> 

</body> 
</html> 
+4

Cảm ơn bạn đã dành thời gian viết câu trả lời chi tiết như vậy! Nó đã giúp rất nhiều. – Davor

+0

Cảm ơn, nó rất hữu ích! – Willz

+0

không hoạt động nữa với lớp ẩn mà nó không bao giờ hiển thị, được thay thế bằng kiểu = "display: none"; – Sergey

4

Bootstrap cung cấp các sự kiện sẵn có sau xử lý để đạt được điều này:

show.bs.modal - Xảy ra khi các phương thức sắp được hiển thị
shown.bs.modal - Xảy ra khi các phương thức hoàn toàn thể hiện (sau khi chuyển CSS đã hoàn thành)
hide.bs .modal - Xảy ra khi các phương thức sắp được ẩn
hidden.bs.modal - Xảy ra khi các phương thức hoàn toàn ẩn (sau khi chuyển CSS đã hoàn thành)

Đối với trường hợp của bạn, bạn có thể sử dụng ẩn. sự kiện bs.modal để nhận các giá trị của các thuộc tính phương thức sau khi nút được nhấp và trước khi phương thức bị ẩn. Bằng cách này, ví dụ được đưa ra bởi davidkonrad có thể đạt được trong một hàm duy nhất loại bỏ sự cần thiết cho các thuộc tính ẩn trung gian.

$('#myModal').on('hide.bs.modal', function() {  
    console.log('username : '+$("#modal-username").val());  
    console.log('result : '+$("#modal-result").val());  
}) 
Các vấn đề liên quan