[javascript] Rails, javascript가 link_to helper를 클릭 한 후로드되지 않음

Program / 글쓴이

레일에서 link_to 도우미를 사용할 때 자바 스크립트를로드하는 데 문제가 있습니다. ‘localhost : 3000 / products / new’를 사용하여 URL을 수동으로 입력하거나 페이지를 다시로드하면 자바 스크립트가로드되지만 아래와 같이 링크를 통해 이동하면 jQuery $(document).ready가 새 페이지에로드되지 않습니다.

Link_to, javascript가이 링크를 클릭 할 때로드되지 않습니다.

<%= link_to "New Product", new_product_path %>

products.js 파일

$(document).ready(function() {
    alert("test");
});

어떤 도움이라도 대단히 감사하겠습니다. 미리 감사드립니다!

답변

Rails 4를 사용하고 있습니까? ( rails -v콘솔에서 확인)

이 문제는 새로 추가 된 Turbolinks gem 때문일 수 있습니다. 응용 프로그램이 단일 페이지 JavaScript 응용 프로그램처럼 작동하도록합니다. 몇 가지 이점이 있지만 ( 더 빠름 ) 불행히도 $(document).ready()페이지가 다시로드되지 않기 때문에 일부 기존 이벤트가 중단 됩니다. 이는 URL을 직접로드 할 때 JavaScript가 작동하는 이유를 설명하지만 link_to.

여기 Turbolinks에 대한 RailsCast 가 있습니다.

몇 가지 해결책이 있습니다. 당신은 사용할 수 있습니다 jquery.turbolinks을 드롭 인 수정으로, 또는 당신은 당신의 전환 할 수 있습니다 $(document).ready()대신 Turbolinks를 사용하는 문 'page:change'이벤트를 :

$(document).on('page:change', function() {
    // your stuff here
});

또는 일반 페이지로드 및 Turbolink와의 호환성을 위해 다음과 같이 할 수 있습니다.

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

Ruby on Rails> 5 ( rails -v콘솔에서 실행 하여 확인할 수 있음 )를 사용 'turbolinks:load'하는 경우'page:change'

$(document).on('turbolinks:load', ready);

답변

나는 같은 문제가 있지만 jquery.turbolinks 는 도움이되지 않습니다. GET 메서드를 재정의해야한다는 것을 알았습니다.

내 샘플이 있습니다. 

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>

답변

대신 레일 5에있는 경우 다음 과 같이 'page:change'사용해야 'turbolinks:load'합니다.

$(document).on('turbolinks:load', function() {
  // Should be called at each visit
})

출처 : https://stackoverflow.com/a/36110790

답변

data-no-turbolink를 지정하는 div로 링크를 래핑 할 수도 있습니다.

예:

<div id="some-div" data-no-turbolink>
    <a href="/">Home (without Turbolinks)</a>
</div>

출처 : https://github.com/rails/turbolinks

답변

인라인 <script>태그 가 없는지 확인하십시오 . (인라인 스크립트 태그는 터보 링크에 적합하지 않습니다.)

답변

FWIW, Turbolinks 문서 에서 대신 캡처 할 더 적절한 이벤트 $(document).ready는 page:change.

page:load 캐시 재로드시 실행되지 않는다는 경고가 있습니다 …

새 본문 요소가 DOM에로드되었습니다. 부분 교체시 또는 페이지가 캐시에서 복원 될 때 실행되지 않으므로 동일한 본문에서 두 번 실행되지 않습니다.

그리고 Turbolinks는 단지보기를 전환하기 때문에 page:change더 적합합니다.

답변

내 문제를 해결 한 해결책은이 메타 속성을 추가하는 것이 었습니다.

<meta name="turbolinks-visit-control" content="reload">

이렇게하면 특정 페이지를 방문하면 항상 전체 새로 고침이 트리거됩니다.

이것은 https://github.com/turbolinks/turbolinks#reloading-when-assets-change 와 관련된 문제를 해결하기위한 솔루션을 작업하는 데 매우 유용했습니다 .