보기에서 자바 스크립트 (JQuery)로 RoR 값 전달하기

나는 다음 코드에 의문을 가지고 있습니다. 누군가가 자바 스크립트가 값 p에 액세스하지 못한다고 내가 잘못하고 있다고 말할 수 있습니까? 감사 !보기에서 자바 스크립트 (JQuery)로 RoR 값 전달하기

<% p=progress_for(contest_score) %> # p is non-zero 

<script type="text/javascript"> 
    $(function(){ 
     $('#contest_progressbar').progressbar({value: <%=p%>}); 
     <!--value p becomes 0 when rendered by jquery--> 

     $("#contest_progressbar").css({ 'background': 'LightYellow' }); 
     $("#contest_progressbar > div").css({ 'background': 'Orange' }); 
     $('#contest_progressbar span.text').text(<%=p%>+'%') 
     <!--value p becomes 0 when rendered by jquery--> 

    }); 
</script> 
progress: <%=p%> progress bar should be below: # p is the correct value here 

<div id='contest_progressbar' style="margin-left:20px; height: 20px;"> 
    <span class="text"></span> 
</div>

편집 : 대신 직선 스크립트 태그를 사용하십시오. 그래도 같은 문제가 발생합니다. EDIT2 : JQuery 문제인 것 같습니다. Bryan의 답변에 대한 설명에서 html을 참조하십시오.

출처

2011-08-13 tm65

이론적으로 볼 때 나는 정상적으로 작동해야합니다. 브라우저에서 "소스보기"를 할 때 실제로 HTML 출력에서 프로세스 막대 ({value : 0})로 인쇄되고 있습니까? – ghayes

자바 스크립트 줄 끝의 루비 주석이 여기에 추가 된 내용이라고 가정합니다. 그렇습니까? – jaydel

또한 고정 값 (가장 좋은 '<%= text %>')과 스타일 정보 (CSS 파일에서 가장 좋음)에 JavaScript를 사용하는 특별한 이유가 있습니까? – brymck

jQuery가로드되지 않을 수 있습니까? 디버거를 체크인하면 $ is not defined과 같은 힌트를 얻을 수 있습니다. Prototype/jQuery 충돌이있는 경우 (v3.1 이전의 레일스를 사용하는 경우 가능), 자동으로 실패 할 수 있습니다.

jQuery를로드 한 후 JS 코드 블록을 으로 표시해야 할 수도 있습니다. 이것이 문제라고 생각하는 이유는 정확하게 jQuery가로드되고 ID가인 다른 요소가 없다면 $('#contest_progressbar span.text').text(5+'%');과 같은 정보가 이어야하며 항상이되어야한다는 것입니다.

예 : 또한 http://jsfiddle.net/6JQNe/1/

, 몇 가지 사소한 점 :

당신은 <%= javascript_tag do %> 그것을 렌더링 확인 (등호주의)가 필요합니다.

"#contest_progressbar > div"는

출처

2011-08-14 02:20:31 brymck

32%

– tm65

확실히 JQuery가 있습니다. 우리는 Prototype/JQuery 문제를 잠시 뒤로 돌 봤습니다. (그것은 우리가 btw를 사용하는 레일 3입니다.) Jquery에 의해 생성 된 div를 참조하십시오. 문제는 outter div의 aria-valuenow와 내부 div의 너비가 모두 0입니다. 진행률 막대를 값을 하드 코딩하여 만들면 언급 된 두 값에 표시됩니다. – tm65

두 번째 사소한 점에 관해서는 여기 progressbar coloring code를 빌 렸습니다 : [link] (http://stackoverflow.com/questions/1476573/jquery-ui-how-to-change-the-color-of-a-progressbar) – tm65

문제가 해결 아무것도 일치하지 않습니다. JQuery와는 아무런 관련이 없습니다. 루프에서 뷰 메서드에 의해 호출되는 코드가 부분적으로 있기 때문에 진행률 표시 줄의 div ID가 손상되었습니다. 모든 통화가 동일한 div를 덮어 씁니다. 아래 코드는 내가 원하는 결과를 생성합니다.

<% pbar_id="pbar_#{contest_score.user_id}" %> 

<script type="text/javascript"> 
    $$(function(){ 
     $$('#'+"<%=pbar_id%>").progressbar({'value':<%=p%>}) 
     $$('#'+"<%=pbar_id%>").css({ 'background':'LightYellow' }); 
     $$('#'+"<%=pbar_id%>"+' > div').css({ 'background':'Orange' }); 
    }); 
</script> 
progress: <%=p%>% 
<div id=<%=pbar_id%> style="margin-left:20px; width:256px; height:20px;"> 
</div>

출처

2011-08-14 19:15:50 tm65

보기에서 자바 스크립트 (JQuery)로 RoR 값 전달하기

답변

관련 문제