jQuery ajax запросы к серверу Rails удваивается каждый раз

Question

Я установил простое демонстрационное приложение (с пользователями и сообщениями) для тестирования с использованием jQuery, Ajax и Rails вместе. Идея состоит в том, что при наведении указателя мыши на строку пользователя на странице индекса пользователя страница будет использовать Ajax для загрузки первого сообщения этого пользователя. Это функционально «работает», но число серверных GET-запросов на выборку данных удваивается при каждом наведении мыши, пока страница не замедлится до сканирования. Может кто-нибудь помочь мне понять, почему это происходит?

Пользователь index.html.erb, который отображает вывод, выглядит так:

  ...
<% @users.each do |user| %>
    <tr class="user_name" id="<%=user.id %>">
       <td><%= user.name %></td>
       <td><%= user.email %></td>
       <td><%= link_to 'Show', user %></td>
       <td><%= link_to 'Edit', edit_user_path(user) %></td>
       <td><%= link_to 'Destroy', user, confirm: 'Are you sure?', method: :delete %></td>
    </tr>
   <% end %>
</table>

<div id="first_message"></div>
...

Мой код Ajax на основе jQuery (в assets / ajax.js) выглядит следующим образом:

$(document).ready(function () {
  $('.user_name').mouseover(function() {
    var userId = $(this).attr('id');
    $('#first_message').load(window.location + userId + "/first_message");
  });
});

Я добавил следующий маршрут для обработки загрузки сообщения:

match 'users/:id/first_message' => 'users#first_message'

Контроллер для обработки запроса выглядит так:

class UsersController < ApplicationController
   def first_message
     @user = User.find(params[:id])

     respond_to do |format|
        format.html # first_message.html.erb
     end
   end

Наконец, страница ответа html (first_message.html.erb) для запроса Ajax выглядит следующим образом:

<h3> <%= @user.name %>'s first message: </h3>
<% if @user.messages.length > 0  %>
    <%= @user.messages[0].content %>
<% else  %>
      ...
<% end %>

Есть мысли?

Answer 1

Я бы предположил, что эта строка ниже загружается в ваш файл first_message.html.erb полностью, , включая макет, который требует ваш ajax.js файл . Из-за этого ваш ajax.js файл включается снова и снова.

$('#first_message').load(window.location + userId + "/first_message");

Вы можете либо превратить ваше first_message представление в частичное, либо вы можете запретить ему отображать макет со всеми файлами JS и т. Д .:

format.html { render :layout => false } # first_message.html.erb

Answer 2

Не совсем уверен, но похоже, что после размещения HTML-кода внутри div#first_message макет также отображается снова, что снова приводит к привязке события mouseover.Это приведет к умножению вызова запроса get.

Answer 3

В дополнение к тому, что Дилан Марков упомянул о вашей компоновке, у вас есть некоторые особенности производительности в вашем JS:

Событие mouseover возникает, когда курсор также входит в дочерние элементы, поэтому в этом случаевремя, когда вы зависаете над td.Вы должны использовать mouseenter вместо этого, чтобы избежать этого.

http://api.jquery.com/mouseover/

После того, как вы извлекли данные, вы должны отменить привязку события, чтобы вы никогда больше не получали ту же информацию:

$(function () {
  $('.user_name').mouseenter(function() {
    var userId = $(this).attr('id');
    $('#first_message').load(window.location + userId + "/first_message");
    $(this).unbind('mouseenter');
  });
});

Конечно, вы 'вы теряете эти данные, потому что вы их не храните (вместо этого просто используйте load).Вероятно, вам следует использовать $.get и хранить данные (вы можете сохранить их с помощью элемента tr через $(this).data('first-message', httpResponseData);).