Chèn hình thức dữ liệu từ xa thông qua JavaScript trong một ứng dụng Rails, ujs không bắt xa

Tôi có một hình thức đơn giản nhưng được nối vào một container:Chèn hình thức dữ liệu từ xa thông qua JavaScript trong một ứng dụng Rails, ujs không bắt xa

<form action="/something" data-remote="true" method="post"> 
    <input type="submit" /> 
</form>

sự hiểu biết của tôi là rails_ujs.js chụp tất cả các sự kiện nộp, vì vậy Tôi sẽ không cần phải gắn lại bất kỳ sự kiện nào khi chèn các biểu mẫu mới. Tuy nhiên, biểu mẫu này không được chọn dưới dạng một hình thức từ xa. Ngay cả khi tôi đặt trình gỡ lỗi trong rails_ujs.js vào sự kiện gửi chung, biểu mẫu này không kích hoạt sự kiện đó. Tất cả các biểu mẫu đều hiển thị kích hoạt phía máy chủ, không có vấn đề gì.

Tôi có bỏ lỡ điều gì đó về việc phải đính kèm sự kiện vào biểu mẫu được chèn động không?

Nguồn

2013-05-17 bcardarella

Tôi không chắc chắn cách thức hoạt động của rails_ujs.js, nhưng tôi nghĩ rằng sự cố của bạn nằm ở thực tế là nội dung html mà bạn thêm ở phía máy khách không phản hồi các sự kiện đã được liên kết. Giải pháp là, bất cứ khi nào bạn thêm một phần tử HTML mới ở phía máy khách, bạn cũng phải ràng buộc bất kỳ sự kiện nào với nó.

Hãy xem xét ví dụ sau:

<html> 
<head> 
    <title>My Page</title> 
    <script src="jquery.js"></script> 
</head> 
<body> 
    <div id="content"> 
     <a href="#" class="link">Click me</a> 
    </div> 
    <a href="#" class="add_link">Add link</a> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.link').click(function(){ 
      alert('Click me'); 
     }); 

     $('.add_link').click(function(){ 
      $("#content").append("<a href='#' class='link'>Click me no alert...</a>"); 
     }); 
    }); 
    </script> 
</body> 
</html>

Khi bạn bấm vào 'Thêm liên kết' liên kết nó sẽ thêm một liên kết mà nói bấm tôi và rằng có 'liên kết' lớp. Tuy nhiên nếu bạn nhấp vào liên kết này, nó sẽ không hiển thị cảnh báo, đó là sự kiện nhấp chuột sự kiện không kích hoạt, nó chỉ kích hoạt cho nội dung được tạo phía máy chủ.

Các giải pháp được mô tả chi tiết hơn trong câu hỏi này: In jQuery, how to attach events to dynamic html elements?

Tuy nhiên tôi không chắc chắn làm thế nào để áp dụng nó vào rails_ujs, bạn có thể phải làm một số sửa đổi đó.

Nguồn

2013-05-17 16:30:56

rails_ujs sử dụng tính năng ủy quyền tài liệu, chứ không phải ràng buộc với các phần tử tải lên cụ thể, do đó, nó sẽ nhận biểu mẫu của bạn.

Có thể là không có trường auth_token ẩn nào trong biểu mẫu của bạn và do đó việc chèn mã thông báo csrf không thành công? Hoặc nó sẽ đến máy chủ và sau đó không kiểm tra tính xác thực?

Và sau đó, câu hỏi ngớ ngẩn: bạn có chắc chắn rằng phiên bản rails_ujs đã sửa lỗi của bạn có trên trang không? Rails_ujs có được tải không? console.log($.rails) để kiểm tra.

Nguồn

2013-05-17 16:52:23

Đó là những gì tôi nghĩ, điều này làm cho điều này thực sự bực bội để tìm ra. Mã thực sự của tôi đang tiêm mã thông báo csrf và đặt biểu mẫu cho utf-8. – bcardarella

sau khi tiêm cho, bạn cần phải đính kèm sự kiện để các dom sử dụng jQuery live & handleRemote() sự kiện của rails_ujs mẫu nộp

$(function(){ 
    $("body") 
     .live('ajax:complete', function(){ 
      $("form[data-remote]").live('submit', function(e){ 
        $.rails.handleRemote($("form[data-remote]")); 
        e.preventDefault(); 
      }); 
     }); 
});

Hiện nay, điều này có vẻ cho tất cả các hình thức trong trang, bạn có thể muốn làm cho nó cụ thể hơn để cải thiện hiệu suất.

PS: nếu bạn đang sử dụng jQuery mới nhất (jQuery 1.7 hoặc mới hơn), bạn có thể muốn biết rằng trong các phiên bản gần đây của jQuery, live() đã bị phản đối vì lợi ích của on(). đây là một lời giải thích tốt đẹp của on() vs live()

Nguồn

2013-05-17 17:13:16 CuriousMind

Đó có phải là cần thiết không? https: // github.com/rails/jquery-ujs/blob/master/src/rails.js # L326 cho thấy rằng rails_ujs đang sử dụng sự kiện ủy nhiệm trên tài liệu mà nên nắm bắt tất cả các sự kiện gửi – bcardarella

^^^ Không cần thiết nhưng hey, hiện tại nó không hoạt động . vì vậy hãy thử nó, nó có thể hoặc có thể không hoạt động. Nhưng không có hại trong cố gắng. Trong trường hợp này, nó không hoạt động để đăng lại với ứng dụng mẫu trên github tái tạo vấn đề này, vì vậy chúng ta có thể giúp thêm :) – CuriousMind

Điểm tốt :) Tôi sẽ cố gắng tạo lại – bcardarella

Hóa ra tôi đã hiển thị biểu mẫu trong biểu mẫu và điều đó đã gây ra sự cố. Tôi là một thằng ngốc: p

Nguồn

2013-05-17 18:47:06 bcardarella

Tuyệt vời, tôi cũng là một thằng ngốc :) – Nycen

Tuyệt vời, tôi cũng thế. :) – Bang

Chèn hình thức dữ liệu từ xa thông qua JavaScript trong một ứng dụng Rails, ujs không bắt xa

Trả lời

Các vấn đề liên quan