ПОЛУЧИТЬ данные из ресурса индекса через AJAX

Question

Я, вероятно, делаю это более сложным, чем нужно, но я просто пытаюсь получить все данные из ресурса индекса и заставить их загрузить VIA-кнопку и запрос ajax. Я использую сериализатор для очистки JSON.

И "/ category" (индекс), и "/ total_user_donations" находятся в CategoriesController. В настоящее время шаблон "/ total_user_donations" показывает индивидуальные пожертвования текущего пользователя. Я хочу добавить кнопку, которая показывает ВСЕ индивидуальные пожертвования через ресурс индекса (Category.all данные - это то, что я хочу) через запрос AJAX.

Соответствующий код ниже:

Вот индексный маршрут, из которого я ищу маршрут:

class CategoriesController < ApplicationController
  before_action :redirect_if_not_logged_in

  def index
    @categories = Category.all
    respond_to do |format|
      format.html { render :index }
      format.json { render json: @categories }
    end
  end 

  def total_user_donation
    @total_user_donation = Category.total_user_donation(current_user)
  end
end

Здесь я хочу, чтобы мои данные ответа отправлялись. Смотрите таблицу ниже:

<button class="js-more">To see EVERY donation on the website, click here</button><br><br>

<table style="width:100%">
  <tr>
    <th>Donation Count</th>
    <th>Toilet Paper</th>
    <th>Diapers</th>
    <th>Dental Hygiene</th>
    <th>First Aid</th>
    <th>General Hygiene</th>
    <th>Underwear and Socks</th>
    <th>Blankets</th>
    <th>School Supplies</th>
  </tr>
  <tr>
    <td id="id"></td>
    <td id="toiletPaper"></td>
    <td id="diapers"></td>
    <td id="dentalHygiene"></td>
    <td id="firstAid"></td>
    <td id="generalHygiene"></td>
    <td id="underwearSocks"></td>
    <td id="blankets"></td>
    <td id="schoolSupplies"></td>
  </tr>
</table>

Таблица выше расположена на маршруте "/total_user_donations".

Вот мой JavaScript:

$(document).ready(function () {
  $(".js-more").click(function() {
    $.get("/categories.json"), function(category) {
      $("#id").text(category["id"]);
      $("#toiletPaper").text(category["toilet_paper"]);
      $("#diapers").text(category["diapers"]);
      $("#firstAid").text(category["first_aid"]);
      $("#generalHygiene").text(category["general_hygiene"]);
      $("#underwearSocks").text(category["underwear_socks"]);
      $("#dentalHygiene").text(category["dental_hygiene"]);
      $("#blankets").text(category["blankets"]);
      $("#schoolSupplies").text(category["school_supplies"]);
    }
  });
});

Обновление: Я пытаюсь сделать это без remote: true.

Комментарий ниже заставил меня понять, что мои вопросы не были так очевидны, так что вот они.

1. Почему данные не отображаются в таблице? Что мне не хватает?

2. Почему при нажатии кнопки .js-more в консоли не отображаются запросы любого типа? Единственный способ, которым работает запрос, - это если я вручную скопирую / вставлю функцию в консоль. И даже тогда он возвращает документ length = 1 .. не те данные, которые мне нужны.

Answer 1

Это работает? у вас есть демонстрационный фрагмент для запуска?

Лучший, Будет

Answer 2

Попробуйте удалить ")" после "/categories.json" и поместите его после функции success:

$(document).ready(function () {
  $(".js-more").click(function() {
    $.get("/categories.json", function(category) {
      $("#id").text(category["id"]);
      $("#toiletPaper").text(category["toilet_paper"]);
      $("#diapers").text(category["diapers"]);
      $("#firstAid").text(category["first_aid"]);
      $("#generalHygiene").text(category["general_hygiene"]);
      $("#underwearSocks").text(category["underwear_socks"]);
      $("#dentalHygiene").text(category["dental_hygiene"]);
      $("#blankets").text(category["blankets"]);
      $("#schoolSupplies").text(category["school_supplies"]);
    });
  });
});