2013-08-30 15 views
5

Vì vậy, tôi gặp vấn đề với ứng dụng rails4 đầu tiên của tôi nơi javascript trang của tôi không kích hoạt trừ khi tôi tải lại trang.Rails 4 ứng dụng ... trong môi trường phát triển javascript không kích hoạt trừ khi trang được làm mới

Điều này đúng cho cả JS nội dung đường ống nội dung của tôi và cũng có nội tuyến với content_for JS.

trong tập tin /assets/javascripts/cars.js tôi:

$(function(){ 
    $("#car_car_make_id").on("change", function(){ 
     //SET MODELS 
     $.ajax({ 
      url: "/car_makes/" + $(this).val() + "/car_models", 
      type: "GET", 
      dataType: "json", 
      cache: false 
     }) 
     .done(function(data) { model_list(data) }) 
     .fail(function() { alert("error"); }) 
    }); 
}); 

function model_list(data) { 
    $("#car_car_model_id").empty(); 
    $.each(data, function(i,v){ 
     $("<option />").val(v.id).text(v.name).appendTo("#car_car_model_id"); 
    }); 
    //ON COMPLETE SHOW 
    $("#car_model_div").show(); 
} 

inline trong trang với content_for:

<% content_for :head do %> 
<script type="text/javascript"> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('yt_vid', { 
      height: '390', 
      width: '640', 
      videoId: '<%= @timeslip.youtube_id %>' 
     }); 
    } 
</script> 
<% end %> 

Cả hai lửa chỉ khi tôi làm mới trang.

Ví dụ: nếu tôi nhấp vào liên kết tới trang có video trên youtube, video sẽ không tải. nhưng nếu tôi làm mới nó sẽ. Cùng với kịch bản đường dẫn nội dung, nó chỉ thực hiện cuộc gọi ajax của tôi nếu tôi tải lại trang đầu tiên.

Trả lời

7

trông giống như tác dụng phụ của tính năng Turbolinks mới. Khi bạn nhấp vào một liên kết, trang không được tải lại - chỉ cần có <body> được tải bởi một yêu cầu AJAX. Vì vậy:

Trong trường hợp đầu tiên, $(function{ ... }) không được chạy vì document.ready chỉ được kích hoạt khi tải trang đầu tiên, không tải lại nội dung.

Trong trường hợp thứ hai, <head> không được tải lại bằng turbolinks, chỉ là phần thân. Vì vậy, bạn còn lại với cũ <script> và nó không chạy lại!

Kiểm tra một số tùy chọn cho turbolinks, như jquery.tubrolinks.

+2

Tôi đã vô hiệu hóa turbolinks và điều đó đã gây ra sự cố. Tuy nhiên, tôi nghĩ rằng đó có thể không phải là giải pháp tốt nhất cho vấn đề. Tôi sẽ nghiên cứu sâu hơn và xem liệu có cách nào để làm cho mã của tôi hoạt động với turbolinks hay không. cảm ơn bạn –

+0

Tôi đã kết thúc việc thử thêm đá quý jquery.turbolinks rồi thêm nó vào tệp kê khai JS. Điều này đã sửa lỗi tập lệnh sẵn sàng cho tài liệu. Tuy nhiên, điều này vẫn không làm cho content_for javascript hoạt động. Vì vậy, sau đó tôi di chuyển content_for của tôi để viết bên trong thẻ body, tuy nhiên, điều này vẫn không giải quyết được vấn đề content_for. Tôi đã kết thúc trở lại để vô hiệu hóa turbolinks –

+0

Tại sao bạn cần đưa javascript vào content_for? Tại sao không sử dụng đường dẫn nội dung và cho phép bộ nhớ cache của trình duyệt tất cả javascript cùng một lúc? – Almaron

1

Giải pháp đơn giản nhất hiện nay là sử dụng đá quý jquery-turbolinks. Chỉ cần thêm nó vào Gemfile của bạn, chạy bundle install và sau đó thêm //= require jquery.turbolinks vào tệp application.js của bạn ngay sau yêu cầu jquery.

Btw, tốt nhất là di chuyển yêu cầu turbolinks đến cuối ngăn xếp đó.

+0

Như đã đề cập trong bình luận của tôi ở trên (một trong 2 phản ứng với rmosolgo) jquery-turbolinks cố định một nửa vấn đề. nhưng không sửa content_for javascipt, ngay cả khi tôi đã di chuyển sản lượng bên trong thẻ body –

+0

Cảm ơn bạn đã đề cập đến đơn đặt hàng tại đây, @almaron. Tôi đã có vấn đề và một khi tôi đã chắc chắn 'yêu cầu turbolinks' trước khi 'yêu cầu jquery.turbolinks' tôi đã trong kinh doanh –

0

Giải pháp thay thế, không phải là giải pháp thực: sử dụng target = '_ blank' cho url được hướng đến trang đó, js sẽ được tải và kích hoạt chính xác mà không cần thêm đá quý.

Đây là cùng một vấn đề của tôi:

tôi đã sử dụng một cách tiếp cận khác nhau để thêm js trang cụ thể trong đầu, như thế này
<%= javascript_include_tag "js_for_a" if
controller_name == "c" && action_name == "a" %>

Trong js_for_a.js, tôi có một cái gì đó như thế này:

Khi trang được yêu cầu từ trang không chứa "js_for_a", tệp js này sẽ không được tải.

Sau khi tôi cài đặt đá quý 'jquery-turbolinks' và thêm //= require jquery.turbolinks vào đúng vị trí, js sẽ không tải. Nhưng nếu được lưu trong bộ nhớ cache bởi trình duyệt trước đó, nó sẽ được kích hoạt.

Bất kỳ ai có giải pháp?

+0

Xin vui lòng không bao gồm các câu hỏi trong một câu trả lời. –

3

Cùng một vấn đề với tôi trong Rails 4 và giải quyết nó giải pháp của rmosolgo.

Đầu tiên add jquery-turbolinks đá quý

gem 'jquery-turbolinks' 

sau đó

bundle install 

Thêm vào application.js (như tôi đã thấy ở https://github.com/kossnocorp/jquery.turbolinks)

//= require jquery 
//= require jquery.turbolinks 
. 
. 
. 
//= require turbolinks 

Và hoạt động hoàn hảo !! Cảm ơn!