Question

我的主页上有一个按钮，我想触发一些ajax，以便在按下按钮时可以在主页上看到一个表单。这适用于我的两个按钮但不是第三个，我无法弄清楚为什么？当我按下按钮时，它会重定向到root，大概是因为我正在使用'＃'。然而，这确实触发了正确的ajax（见下文） - 我知道这一点，因为我从ajax成功获得了一个控制台响应。如果我将ajax中的url更改为controller / new，那么我会在主页中正确显示新表单。所以看起来控制器动作由于某种原因而被定向到root，我不明白

这是按钮

<div class="col-md-4">
            <%= link_to image_tag("arrow.jpg"),'#', id: 'ChallengeListButton'%>
            <div id="challengeListCentre"></div>
        </div>

这是它触发的ajax（在application.js）

$(document).ready(function(){
       $('#ChallengeListButton').click(function(e){
        $.ajax({
          type: 'GET',
          url: "challenges/index",
          success: function(response){
            console.log(response)
              $('#challengeListCentre').html(response);
          }
        })
      });
});

这是控制器challenges_controller.rb

class ChallengesController < ApplicationController
  before_action :set_challenge, only: [:show, :edit, :update, :destroy]

  # GET /challenges
  # GET /challenges.json
  def index
    @challenges = Challenge.all
    render :layout => false
  end
end

这是views / challenge / index.html.erb

<%= render 'index' %>
<%= link_to 'Back', challenges_path %>

和部分：

<p id="notice"><%= notice %></p>

<h1>Listing Challenges</h1>

<table>
  <thead>
    <tr>
      <th>Pointsspend</th>
      <th>Rules</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @challenges.each do |challenge| %>
      <tr>
        <td><%= challenge.pointsSpend %></td>
        <td><%= challenge.rules %></td>
        <td><%= link_to 'Show', challenge %></td>
        <td><%= link_to 'Edit', edit_challenge_path(challenge) %></td>
        <td><%= link_to 'Destroy', challenge, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Challenge', new_challenge_path %>

和路线：

Rails.application.routes.draw do

  resources :challenges, only: [:new, :create, :show, :index, :edit, :destroy]
  resources :entries

resources :conversations, only: [:index, :show, :destroy] do
    member do
      post :reply
      post :restore
      post :mark_as_read
    end
    collection do
      delete :empty_trash
    end
  end

resources :messages, only: [:new, :create]

get '/messages/new/:id', to: 'messages#new'


root to: 'users#index'
  devise_for :users

  get '/users/relations', to: 'users#relations'
  post '/users/create', to: 'users#create'
  resources :users

end

Answer 1

您需要使用preventDefault()，试试这个

$(document).ready(function(){
  $('#ChallengeListButton').click(function(e){
    e.preventDefault(); // add this line

    $.ajax({
      type: 'GET',
      url: "challenges/index",
      success: function(response){
        console.log(response)
        $('#challengeListCentre').html(response);
      }
    })
  });
});

希望这有帮助！

Answer 2

行。事实证明我是愚蠢的。默认情况下它进入root的原因是因为ajax url是challenge / index，实际上它本身应该是挑战，因为默认情况下根据rake路由进行索引。最重要的是，我之前已经被它抓住了..我永远不会学习

从link_to rails 4触发ajax

2 个答案: