Rails - Javascript不会通过link_to呈现,但通过正常的创建操作

时间:2015-11-26 19:44:18

标签: javascript ruby-on-rails

遇到一个非常奇怪的错误,并希望有人可以解决一些问题。

我希望Rails从数据库中返回一个随机的Tweet记录,因此在我的new Tweet Controller方法中,我有以下内容。

def new
  @tweet = Tweet.new
  @random_tweet = Tweet.order("RANDOM()").first
end

在我的 view.html.erb 中,我想将link_to定向到展示页@random_tweet所拥有的内容,所以我有

view.html.erb

<%= form_for @tweet do |f|%>
  <%= f.text_field :handle%>
  <%= f.submit "Let's Go!", class: "btn btn-lg btn-danger"%>
<% end%>

# returns a random Tweet record
<%=link_to @random_tweet.handle, @random_tweet %>

链接工作正常,它会将我重定向到@random_tweet碰巧的显示页面。问题是,在每个节目页面上,都有一个javascript图表,我使用d3和来自推文的数据构建。

如果我搜索推文,图表会显示没有任何问题。但是,如果我通过@random_tweet链接进入展示页面,则会显示除图表之外的所有内容。

知道可能会发生什么吗?感谢。

如果您需要我的整个控制器,请在下面进行操作。 gon只是我用来在javascript和控制器之间传递变量的gem。

推文控制器

class TweetsController < ApplicationController
    require 'indico'

    def new
        @tweet = Tweet.new

        #following only works with Postgres
        @random_tweet = Tweet.order("RANDOM()").first

    end

    def create
        @tweet = Tweet.new(tweets_params)

        if Tweet.exists?(:handle => @tweet.handle)
            @original_tweet = Tweet.find_by_handle(@tweet.handle)
            redirect_to @original_tweet
        elsif @tweet.save
            redirect_to @tweet
        else
            render 'new'
        end

    end

    def show

        Indico.api_key = ENV["indico_key"]
        @tweet = Tweet.friendly.find(params[:id])
        current_tweets = $client.search("#{@tweet.handle} -rt", result_type: "recent", lang: "en")

        @tweets_array = Tweet.get_tweets_array(current_tweets)

        tweets_array_val_json = Tweet.get_tweets_json(@tweets_array)
        gon.senti_array = tweets_array_val_json

    end

    private

    def tweets_params
        params.require(:tweet).permit(:handle)
    end
end

graph.js

$(document).ready(function() {
    var data = gon.senti_array;


    var x = d3.scale.linear()
        .domain([0, d3.max(data)])
        .range([0, 800]);



    d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div").attr("class", "bar")
      .style("width", function(d) { return x(d) + "px"; })
      .text(function(d) { return d; });

    var divs = document.getElementsByClassName('bar') // this needs to change based on how you want to select the generated elements

    for(var i=0; i< divs.length; i++) {
      var text = divs[i].innerText;

      divs[i].innerHTML = '<a href=#tweet_'+i+' >'+text+'</a>'
    }
});

1 个答案:

答案 0 :(得分:1)

您的问题是由turbolinks引起的,它有助于在您访问链接时通过保持页面处于活动状态并仅替换正文来提高应用程序的速度。

这有时会导致javascript事件无法正常工作的问题。

您可以完全关闭turbolinks,或者如果您想要提高速度,请尝试使用其事件,而不是:

$(document).ready(function() {});

尝试使用:

$(document).on("page:change", function() {});

您可以看到事件列表here