Как отправить значение JavaScript в Rails Controller с помощью AJAX?

Question

На моей странице dashboard в моем приложении я хочу отобразить легенду карты, которая динамически заполняется в зависимости от значений, заданных для HTML, который отображает эту легенду.

Вот как должна выглядеть легенда как:

Я заполняю эту легенду, используя JavaScript; Моя JavaSCript функция возвращает массив вложенных хэшей, который будет выглядеть примерно так:

[
   {title: 'Downtown Loft', color:'#ade8ad'},
   {title: 'Midtown Mansion', color:'#bd95ff'}
]

Проблема

Чтобы выполнить sh, мне нужно иметь возможность отправьте приведенный выше массив из моего файла pages.js.erb в мой файл pages_controller.rb, в частности, в действие dashboard. В этом методе контроллера я назначу данные из моего JavaScript переменной экземпляра с именем @calendar_legend

. Чтобы убедиться, что это работает, я вызову <%= @calendar_legend %> в моем представлении dashboard.html.erb и ожидаю его получения. чтобы показать массив ... к сожалению, это не работает.

Я пробовал render json: @calendar_legend в моем контроллере, и я всегда получаю значение null при просмотре этой страницы.

Вот как я пытался отправить данные на мой контроллер:

function calendarLegend(){
  const legendarray = [
    {title: 'Downtown Loft', color:'#ade8ad'}, 
    {title: 'Midtown Mansion', color:'#bd95ff'}
  ]

  $.ajax({
      type:'POST',
      url: 'pages/dashboard',
      data: JSON.stringify(legendarray),
      contentType: 'application/json'
  });
};

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

и вот как я пытался назначить их в моем контроллере

def dashboard
   @calendar_legend = params[:legendarray]
   render json: @calendar_legend
end 

и на мой взгляд

<%= @calendar_legend %>

Это не сработало, как и любое другое решение, которое я нашел в Stackoverflow и на других сайтах.

Answer 1

Проблема в том, что вы отображаете переменную @calendar_legend, которая еще не была установлена. Также функция Ajax ничего не делает для отображения результата на странице после его вызова.

Я не совсем уверен, что вы пытаетесь выполнить sh здесь, но вот некоторые предложения.

Во-первых, вы можете просто установить переменную @calendar_legend в действии контроллера, которое загружает панель мониторинга. html .erb page (вместо вызова другого действия после загрузки страницы с использованием Ajax). Если вы сделаете это, вы можете просто полностью удалить функцию Ajax.

Во-вторых, если вы пытаетесь загрузить данные для изменения легенды после загрузки страницы, вам нужно обработать ответ от сервер. Есть два способа легко сделать это:

1. Добавить обработчик ответа в метод AJAX (пример из jQuery Ajax документов - https://api.jquery.com/jquery.ajax/) - в этом примере переменная 'data' в функции .done будет содержать значение @calendar_legend, которое вы отображаете как json из действия контроллера, поэтому вам нужно добавить его в страница:

   $.ajax({
     type: 'POST',
     url: "pages/dashboard",
     data: JSON.stringify(legendarray),
     contentType: 'application/json'
   }).done(function(data) {
     $('.div-with-calendar-legend-data-inside').html( data );
   });
   

2. Вы также можете сделать это с Rails, используя шаблон js .erb с тем же именем, что и действие вашего контроллера (вместо добавления обработчика ответа к вашему Ajax функция). Сначала вы должны изменить действие вашего контроллера, чтобы просто установить переменную и ничего не отображать (и вместо этого позволить Rails отображать шаблон js .erb):

   def dashboard
     @calendar_legend = params[:legendarray]
   end
   

Затем создайте шаблон app / views / pages / dashboard. js .erb и добавьте в него что-то вроде этого:

$('.div-with-calendar-legend-data-inside').html( <%= @calendar_legend %> );

Для обеих этих опций потребуется добавить div (с классом или идентификатором) в ваш взгляд на добавление данных @calendar_legend в:

    <div class="div-with-calendar-legend-data-inside">
      <%= @calendar_legend %>
    </div>

Как правило, я бы попытался загрузить данные только с Ajax, если вы пытаетесь перезагрузить легенду, когда пользователь вносит изменения на странице ( ie. Они выбирают что-то из выпадающего списка или другого ввода формы) - тогда вы можете отправить данные с Ajax на контроллер и позволить ему обновить легенду без обновления страницы. Однако, делая это, я просто использовал бы form_tag и установил для него значение remote: true, затем использовал бы jquery для отправки формы при изменении входных данных и обработки ответа с помощью шаблона js .erb - я думаю, что это чище чем использование функции Ajax.

Надеюсь, это поможет