Question

我正在创建一个ajax投票链接，点击它后会更改其html类属性。

目前，它可以工作，但我必须重新加载页面才能看到更改。如何在点击后立即进行直观更改？

我有一个远程链接，以下jquery，以及render @votable

结束时的vote_socionics

我怀疑问题是我的jquery没有设置为不断检测更改（作为＆＃34; live＆＃34;），或者它在控制器中使用我的渲染调用

提前致谢。

资产文件夹中的

coffeescript文件 http://js2coffee.org/

windowReady = ->
  jQuery -> 
    $voteLinks = $('.vote-button a')

    $voteLinks.each (i, current) ->
      if $(current).data('voted') == true
        $(current).addClass('voted')

    $voteLinks.on "ajax:success", (evt, data, status, xhr) ->
      alert('a')   #...this doesn't execute
      $voteLinks.removeClass('voted')
      $voteLinks.each (i, current)->
        if $(current).data('voted') == false
          $(current).addClass('voted')

$(window).load(windowReady);
$(window).on('page:load', windowReady);

html http://www.haml-converter.com/

.vote-button
  = link_to send("vote_socionics_#{votable_name}_path", votable, vote_type: "#{s.type_two_im_raw}"), 
    method: :post, remote: true, 
    data: { voted: @voted_statuses[i] }, 
    id: "vote-#{s.type_two _im_raw}" do end


#...Ignore most of the details here, just the `dat-*` attribute is important. 
#...The desired visual changes successfully happen when I refresh the page, so there is no issues here.
#...The above indented for visual clarity. (My actual code has no issues with haml indentation

控制器中包含的问题

module SocionicsVotesConcern
  extend ActiveSupport::Concern

  inclued do

    def vote_socionics
      #...some voting logic code.

      render @votable   #... <--is this the issue?
    end   

  end    
end

private
  def set_votable
    votable_constant = controller_name.singularize.camelize.constantize
    @votable = votable_constant.find(params[:id])
  end

控制器

class CharactersController < ApplicationController
  include SocionicsVotesConcern

  before_action :set_character

  def show

  end
end

private
  def character_params
    #...stuff
  end

  def set_character
    @character = Character.find(params[:id])
  end

Answer 1

但我必须重新加载页面以查看更改

-

<强>的Ajax

您要问的是如何让Ajax工作

答案相对简单如果您了解Ajax的工作原理。我想你这样做了，但为了清楚起见，让我给你一个更明确的定义：

enter image description here

Ajax本质上是一种启动＆＃34;伪＆＃34;浏览器请求。通常，当您向服务器发送请求时，它将通过HTTP协议（使用我现在不确定的某些标头）。虽然Ajax仍然使用HTTP协议，但它会发送XHR request (XML Http Request)

XHR（或"ajax" - Asynrhconous Javascript and XML - 因为它已知）是一个关于发送请求的#javascript实现＆＃34;超出范围＆＃34;到你的服务器。我提到＆＃34;超出范围＆＃34;，因为典型的HTTP请求范围是request -> server -> response; Ajax的流程是在的上构建的 - 允许您在呈现初始响应后将请求发送到服务器

简单，Ajax是一个＆＃34;伪浏览器＆＃34;，它可以向您的服务器发送额外的请求。当它用JS处理时，您可以处理响应，从而改变视图的主体

-

<强>响应

Ajax总是＆＃34;听到＆＃34;来自服务器的响应，即使它只是一个标题集合。

不同之处在于，如果您想使用响应来以某种方式操纵DOM（您的视图），那么您将能够使用进行操作>您可以使用JS
从服务器捕获响应
有两种方法可以做到这一点：



＆＃34;标准＆＃34; JQuery（使用$.ajax）

＆＃34; Rails UJS＆＃34; （使用Rails响应挂钩）


看起来你知道发生了什么，所以我现在详细说明如何为你解决这个问题：

<强>修正

你的代码对我来说很好!!

我认为问题在于您未正确委派ajax:success电话：

windowReady = -> $voteLinks = $('.vote-button a') $voteLinks.each (i, current) -> if $(current).data('voted') == true $(current).addClass('voted') $(document).on "ajax:success", ".vote-button a", (evt, data, status, xhr) -> alert('a') #...this doesn't execute $voteLinks.removeClass('voted') $voteLinks.each (i, current)-> if $(current).data('voted') == false $(current).addClass('voted') $(document).on('page:load ready', windowReady)

我将$voteLinks.on的{{1}}更改为$(document)。

如果alert没有被解雇，通常意味着JS不是＆＃34;绑定＆＃34;正确的元素。如果是这种情况，通常可以通过委派$(document)对象来获得最佳服务，该对象始终存在于您的视图中（Turbolinks问题）

请试试这个＆amp;让我知道会发生什么！

如何在单击Rails中的远程链接时立即调用jquery？

1 个答案: