ajax 페이지에서 내비게이션을 업데이트하는 방법 load

Question

그래서 두 개의 다른 탐색 헤더가있는 레일 애플리케이션이 있습니다. 한 페이지는 대다수 페이지에 사용되고 다른 탐색 헤더는 몇 페이지에만 사용됩니다. 또한 탐색이 application.html.erb 페이지 (응용 프로그램의 모든 페이지간에 공유 됨)에로드되기 때문에 탐색 HTML은 사용자가 페이지를 새로 고치지 않으면 서버에서 새로 고쳐지지 않습니다. 그리고 각 페이지가 ajax (pjax 사용)를 통해로드되기 때문에 다른 탐색 헤더가 필요한 두 페이지 사이를 이동할 때 탐색 헤더가 업데이트되지 않습니다.

나는 가능한 몇 가지 해결책이 있지만 나는 모든보기에 코드를 추가하고 싶지 않기 때문에 나는 그것을 좋아하지 않는다. 주요 솔루션은 탐색 헤더를보기 (global application.html.erb 대신)로 이동하거나 모든 페이지에 탐색을 올바른지 확인하고 대체하지 않을지 확인하는 javascript를 추가하는 것입니다. 하지만 그것을 대체하기 위해 부분적인 HTML을로드하는 방법을 모르며 모델의 데이터가 들어 있습니다.

참고 : 각 URL을 직접 방문하면 문제가 없습니다.

꽤 쉬운 문제인 것처럼 느껴지기 때문에 쉽게 접근 할 수 없지만 검색하는 동안 아무것도 찾을 수 없습니다.

편집 : 내가 적절한 부분으로 네비게이션을 교체 강행하려는 경우, 당신은 당신의 AJAX 응답에서 다음을 배치 할 수 있습니다 JQuery와

Answer 1

네비게이션이 2 개 뿐이므로 레이아웃에서 생성하고 숨 깁니다.

<div id="nav"> 
    <div id="nav1" class="nav" style="display: none"><a href="#">Nav1</a></div> 
    <div id="nav2" class="nav" style="display: none"><a href="#">Nav2</a></div> 
</div> 

페이지의 JS에 원하는 것을 표시하는 함수를 만듭니다. pjax를 통해 페이지를 업데이트 할 때 원하는 JS를 전달하여 chooseNav를 호출하여 실행할 수 있습니다.

<script type="text/javascript"> 
    function chooseNav(sel) { 
    $('#nav .nav').hide(); 
    $('#nav' + sel).show(); 
    } 

    $(function() { 
    chooseNav(1); // Default nav to load when page loads 
    }); 
</script> 

Answer 2

를 사용하고 (가정 사용중인 JQuery와)

$('#navigation').html('<%= escape_javascript(render 'partial') %>'); 

Answer 3

Jason, 활성 탭의 색상을 변경하는 방법을 찾고 있다고 가정합니다. 아약스 페이지가 렌더링되는 경우

는 쇼보기가 show.js.erb에 다음을 추가 할 수 있습니다 : 당신이 코드를 포함하지 않은

때문에, 나는이 가정을 만드는 중이라서.

가정 1 : 나는 그것을 가정하고이 두 번째 페이지가 활성화 된 경우 다음과 같은 :

<div class="top_menu_bar"> 
<a class="menu_link controller_1" href="/controller_1">The First Controller</a> 
<a class="menu_link controller_2 highlighted" href="/controller_2">The Second Controller</a> 
<a class="menu_link controller_3" href="/controller_3">The Third Controller</a> 
</div> 

유의하시기 바랍니다 당신이 당신의 앵커 태그의 클래스의 컨트롤러 이름이없는 경우 즉, 당신은 그것들을 쉽게 추가 할 수 있습니다. JQuery를 단순화합니다. 그러나 솔루션의 핵심 부분은 곧 개략적으로 설명 할 두 단계를 따르고 있습니다. 코드에 따라 언제든지 JQuery 선택기를 수정할 수 있습니다.

가정 2 : 나는 하이라이트 된 클래스가있는 앵커가 나머지 부분에서 눈에 띄는 a.highlighted에 대한 CSS 규칙이 있다고 가정합니다.

이제, Ajax 요청을 사용하는 페이지에서 링크 또는 버튼을 클릭하면 다음과 같은 내용을 나타내는 두 단계 솔루션에 대해 이야기 해 보겠습니다. controller_3. 당신의 show.js.에 다음을 추가하여

Step 1: Remove the "highlighted" class from the anchor of 
     controller_2 
Step 2: Add the "highlighted" class to the anchor of controller 3. 

당신은이 작업을 수행 할 수 있습니다

는 다음과 같은 두 가지 작업을 수행해야erb 파일 :

$('.highlighted').removeClass("highlighted"); 
$('.<%= controller_name %>').addClass("highlighted); 

show.js.erb가 제공되면 controller_name이 동적으로 삽입됩니다. 기간 프리픽스가 필요합니다.

나는 그 트릭을해야한다고 생각합니다. 위 코드에 구문 오류가있을 수 있으므로 전반적인 개념을 적용하여 상황에 적용하십시오. 귀하의 편의를 위해 jsfiddle에 작은 샘플을 모아서 코드의 자바 스크립트 부분을 보여줍니다. http://jsfiddle.net/593ce/4/에서 확인하십시오.

이 답변이 도움이 되었기를 바랍니다.