如何在haml视图中运行特定的脚本

Question

所以我试图在haml视图中调用pollServer();脚本，但它没有运行。方法如下:

    %div{:id => 'ajaxurl', :class => @poll.id}
  :javascript
    $(document).ready(function(){
      pollServer();
    });

pollServer函数:

$(document).ready(function(){ 
  console.log('here i am');
  function pollServer(){
    console.log('enter pollServer');
    setInterval(function(){
      console.log('enter setInterval');
      var id = $('div#ajaxurl').attr('class');
      $.ajax({
        // Div class dynamically set to poll.id
        type: 'GET',  
        dataType: 'json',
        url: '/polls/' + id, 
        complete: function(data){
          console.log('pollServer complete');
          updateSurvey(data);
        },
        success: function(data){
          console.log('pollServer success');
          updateSurvey(data);
        },  
        error: function(){
          console.log('pollServer error');
        }

      });
    }, 4000);
  };
}); 

下面是PollsController处理请求的show动作:

  def show
    @poll = Poll.find(params[:id])

    # using for showTotalVotes
    gon.votes = @poll.questions[0].answers.map{|answer| answer.votes}
    # gon.poll_ids = @poll.questions[0].answers.map{|answer| answer.id}
    gon.titles = @poll.questions[0].answers.map{|answer| answer.title}
    # gon.poll_data = [gon.poll_ids, gon.titles , gon.votes ]
    # =>  gon.answer = @poll.questions[0].answers

    # gon.poll_hash = @poll.questions[0].answers.map{|answer| answer = {:id=> answer.id, :title => answer.title, :votes => answer.votes} }  
    @question = @poll.questions[0]
    @answers = @question.answers
    gon.answers = @poll.questions[0].answers
    respond_to do |format|
      format.html { @poll}
      format.js {
        render json: gon.answers 
      }
    end

奇怪的是，我的服务器日志实际上轮询我的rails服务器，并显示sql数据库查询正确检索数据在指定的ajax路径，但它不会console.log('hi')，也不会调用ajax成功的updatessurvey方法。知道为什么会这样吗?

这是pollServer函数应该调用的updatessurvey函数

  function updateSurvey(all_data){
    console.log('balls');
    var svg = d3.select('svg')
    var bars = svg.selectAll('rect')
        .data(all_data)
        .transition()
        .duration(500)
        .attr("y", function(d){
          return h + (yOffset - yScale(d.votes))
            // return h-(d.votes*10); 
        })
        .attr("height", function(d){
          barHeight = yScale(d.votes);
          return barHeight;
        })  
  }

Answer 1

我认为您的服务器返回的json内容类型不正确。我运行这段代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function pollServer(){
  setInterval(function(){
    console.log('hi');
    $.ajax({
      type: 'GET', 
      dataType: 'json',
      url: 'http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true', 
      success: function(data){
        console.log('hi');
        updateSurvey(data);
      }
    });
  }, 4000);
};
$(document).ready(function()
  pollServer();
});
</script>

和

hi
ReferenceError: Can't find variable: updateSurve

这就解释了为什么js代码不运行，而SQL在服务器端运行。