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

79

레일에서 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");
});

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

javascript jquery ruby-on-rails

— StickMaNX
소스

140

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);

— 라이언 엔 다콧
소스

예, Rails 4입니다. 게시 한 내용은 link_to 클릭을 통해 수정됩니다. 또한 정기적 인 수동 URL 페이지로드에서 작동하지 않게합니다. 내 js 코드를 복제하지 않고 두 가지 방법을 모두 통해 작동하도록하는 방법이 있습니까? 감사!

— StickMaNX 2013

1

흠, 이상합니다. 두 가지 모두에 효과가 있다고 생각합니다. 가장 좋은 해결책은 아마도 링크 된 jquery.turbolinks gem을 사용하는 것입니다. 참고 : 사용하지 않았기 때문에 확실하지 않습니다. 그래도 'page:load'호출하기 위해 리 바인드 되는 것처럼 보이 $(document).ready()므로 모든 것을 정상적으로 수행합니다.

— Ryan Endacott 2013

나는 :) jquery.turbolinks없이 작동하는 솔루션 만들기 위해 내 대답을 편집

— 라이언 Endacott

1

대박 ! 그것은 나를 많이 도왔다!

— Ajay

document.ready가 항상 그렇듯이 작동 할 것으로 예상하는 모든 js 파일의 모든 코드를 편집하는 것은 크기와 복잡성에 관계없이 앱에 대한 옵션이 아닙니다. 왜 누군가 document.ready가 항상 그렇듯이 작동하지 않게 만드는 무언가를 디자인하고 그것을 기능이라고 부를까요? document.ready를 중단하지 않도록 터보 링크에 지시하는 방법이 있습니까? 아니면 제거 할 수있는 유일한 옵션입니까?

— JosephK

65

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

내 샘플이 있습니다.

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

— 아이스 블레이즈
소스

2

이것은 구현하는 데 가장 빠른 솔루션이었습니다.

— Jose Torres

1

이로 인해 문제가 해결 link_to되었지만 실제 문제는 <script>페이지 바닥 글의 인라인 태그 였습니다 . (인라인 스크립트 태그는 터보 링크에 적합하지 않습니다.)

— poorman

1

가장 좋은 해결책은 터보 링크를 제거하는 것입니다. "해결책"으로 "그냥 작동"해야하는 문제를 해결하는 것은 엄청난 시간을 낭비하는 일입니다. 작년에 혼자서 터보 링크 수정에서 일주일을 쉬었을 수도 있습니다.

— JosephK

1

이것은 내 하루를 만들었다!

좋은 빠른 수정에 대한 대답하지만, 최적의 솔루션을 @RyanEndacott의 답변을 참조

— dimpiax

25

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

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

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

— user000001
소스

이 솔루션과 Ice-Blaze의 솔루션은 모두 저에게 효과적이었습니다. 그러나 모든 링크를 변경할 필요가 없기 때문에 이것이 가장 좋습니다. (저는 Rails 5를 사용하고 있습니다)

— Sean

5

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

예:

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

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

— 이쿤
소스

3

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

— 가난한 사람
소스

3

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

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

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

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

— pyepye
소스

우승자! page:load새로 고침에 대해 나를 위해 일하지 않았습니다. 이 솔루션을 권장합니다.

— TJ Biddle

0

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

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

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

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

— 록웰 라이스
소스