레일 : 부분 클릭 새로 고침

방금 최근에 사용자가 게시물에 대한 투표 버튼을 클릭 할 때마다 투표를 더 많이하는 투표 시스템을 만들었으며 동시에 사용자 투표 수를 추적하는 카운터 만든. 투표 버튼은 전체 페이지가 새로 고쳐지지 않고 투표 집계 번호가 변경되지만 HTML의 해당 부분 만 새로 고치지 만 전체 페이지가 새로 고쳐지지 않으면 투표 금액 카운터가 변경되지 않습니다. 투표 버튼을 클릭 할 때 둘 다 부품을 새로 고칠 수 있도록하려면 어떻게해야합니까? 어디서부터 시작해야할지 모르겠습니다. 고맙습니다! 투표 금액레일 : 부분 클릭 새로 고침

<li class='fst'><a class='ProfileLikes' href="/"><%[email protected]_count(:up) %><span class='ProfileStatText'>Likes</span></a></li>

Vote_up.Js에 대한 투표

<div class='Counter'> 
<span class='CounterNum'><span id='<%= micropost.id%>'><%=micropost.votes_for %></span></span> 
<div class='<%=micropost.id %>'> 
<a href="/microposts/<%=micropost.id %>/vote_up" data-remote='true' class='CounterButton b2'> 
<span id="CounterIcon" class="<%=micropost.id%>"></span> 
</a> 
</div> 
</div>

HTML에 대한

HTML

$("#<%[email protected]%>").html('<%="#{@micropost.votes_for}"%>'); $(".<%[email protected]%>").html('<a href="/microposts/<%[email protected]%>/unvote" data-remote="true" class="SquekCounterButton b3 <%[email protected]%>"><span id="SquekCounterIcon" class="<%[email protected]%>"></span></a>');

출처

2012-02-25 Kellogs

그래서 당신이이 일을 위해 일하고 말했다 이미? 지금까지 자바 스크립트를 보여주십시오. –

@BenLee 위에 추가했습니다. – Kellogs

AJAX 요청을 작성하고 필요한 데이터 요소에 대한 데이터 요소가 포함 된 JSON 데이터를 가져 오지 않는 이유는 무엇입니까? 두 개의 서로 다른 지점의 텍스트 만 업데이트하려는 경우 페이지의 전체 섹션을 다시 그릴 필요가 없습니다. –

JQuery와 AP I Ajax 요청에 대한 안내는 여기에서 볼 수있다 : http://api.jquery.com/jQuery.ajax/ 많은 정보가 나는 당신이 얻을 수있는 몇 가지 코드를주지 있도록 시작이있다

$(document).ready(function(){ 
     $('a.CounterButton').click(function(event){ 
      event.preventDefault(); //This will prevent the link from navigating 

      $.ajax({ 
       url: $(this).attr('href'), //This pulls the URL from the HREF of the link 
       dataType: 'json', //This tells the AJAX request we're expecting JSON 
       success: function(response){ 
        console.log(response); //Output the response to console 
        //Maybe something like: 
        $('#' + response.ID).text(response.Likes); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert('An error occured!'); 
       } 
      )}; 
     }); 
});

출처

2012-02-25 04:21:36

레일 : 부분 클릭 새로 고침

답변

관련 문제