source

레일, link_to helper 클릭 후 자바스크립트가 로딩되지 않음

manycodes 2023. 11. 2. 21:55
반응형

레일, link_to helper 클릭 후 자바스크립트가 로딩되지 않음

레일에서 link_to helper를 사용할 때 javascript를 로드하는 데 문제가 있습니다.수동으로 'localhost:3000/products/new'로 url을 입력하거나 페이지를 다시 로드하면 javascript가 로드되지만 아래와 같이 링크를 거치면 jQuery가 실행됩니다.$(document).ready새 페이지에 로드되지 않습니다.

Link_to, 다음 링크를 클릭하면 javascript가 로드되지 않습니다.

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

products.js 파일

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

어떤 도움이라도 주시면 감사하겠습니다.미리 감사드립니다!

레일 4를 사용하고 있습니까? (해봄으로써 알아봅니다.rails -v콘솔에서)

이 문제는 아마도 새로 추가된 터보링크스 보석 때문일 것입니다.이것은 당신의 응용프로그램이 한 페이지의 자바스크립트 응용프로그램처럼 동작하게 만듭니다.몇 가지 이점(더 빠름)있지만 안타깝게도 다음과 같은 기존 이벤트를 중단합니다.$(document).ready()페이지가 다시 로드되지 않기 때문입니다.그것은 당신이 직접 URL을 로드할 때 자바스크립트가 작동하는 이유를 설명해 줄 것이고, 당신이 a를 통해 그것을 탐색할 때는 그렇지 않습니다.link_to.

여기 터보링크에 대한 레일캐스트가 있습니다.

몇 가지 해결책이 있습니다.jquery.turbolinks를 drop-in fix로 사용할 수도 있고, 당신은 당신의$(document).ready()대신 Turbolinks를 사용하겠다는 성명서.'page:change'이벤트:

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

또는 Turbolinks뿐만 아니라 일반 페이지 로드와의 호환성을 위해 다음과 같은 작업을 수행할 수도 있습니다.

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

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

Ruby on Rails >5를 사용하는 경우 (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

또한 데이터 무터볼 링크를 지정하는 div로 링크를 래핑할 수도 있습니다.

예:

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

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

줄이 없는지 확인합니다.<script>tags. (인라인 스크립트 태그는 터보링크의 경우 좋지 않습니다.

FWIW, Turbolinks 문서에서 캡처 대신 캡처하기에 더 적합한 이벤트입니다.$(document).readypage:change.

page:load캐시 재장전 시 불이 붙지 않는다는 주의사항이 있습니다...

새로운 신체 요소가 DOM에 로드되었습니다.부분 교체 시 또는 페이지가 캐시에서 복원될 때 동일한 본문에서 두 번 발생하지 않도록 불을 붙이지 않습니다.

터벌링크스가 시선을 돌리니까요page:change더 적합합니다.

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

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

이렇게 하면 특정 페이지에 대한 방문이 항상 전체 다시 로드를 트리거합니다.

이것은 제가 이 문제를 해결하기 위한 해결책을 마련하는 데 매우 유용했습니다. https://github.com/turbolinks/turbolinks#reloading-when-assets-change .

reload 후 link_tojs가 작동 중이므로 turbolink 문제일 경우 turbolink를 사용할 수 있습니다.false그 링크에서_ex에 대한 좋아요:

<%= link_to "Home", home_path, data: { turbolinks: false } %>

언급URL : https://stackoverflow.com/questions/17600093/rails-javascript-not-loading-after-clicking-through-link-to-helper

반응형