CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-4
Sebastian Zeki
Sebastian Zeki

Reputation: 6874

trigger ajax from link_to rails 4

I have a button on my home page which I would like to trigger some ajax so that I can see a form on my home page when the button is pressed. This works for two of my buttons but not the third and I can't figure out why? When I press the button it redirects to root, presumably because I am using '#'. However this does trigger the correct ajax (see below) - I know this as I get a console response from the ajax success. If I change the url in the ajax to controller/new then I get the new form correctly shown in the home page. So it looks as though the controller action is being directed to root for some reason I don't understand

Here's the button

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

Here's the ajax it triggers (in application.js)

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

Here's the controller 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

Here's the views/challenges/index.html.erb

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

and the partial:

<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 %>

and the routes:

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

Upvotes: 0

Views: 184

Answers (2)

Sebastian Zeki
Sebastian Zeki

Reputation: 6874

OK. Turns out i was being dumb. The reason it goes to root by default is because the ajax url is challenge/index when in fact it should be challenge on its own because that defaults to index as per the rake routes. On top of it I've been caught out by that before..I'll never learn

Upvotes: 0

Rajdeep Singh
Rajdeep Singh

Reputation: 17834

You need to use preventDefault(), try this

$(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);
      }
    })
  });
});

Hope this helps!

Upvotes: 1

Related Questions