如何使用Javascript和AJAX在Ruby on Rails 5上呈现索引页面上的弹出窗口

我有一个简单的库存系统应用程序，我一直在为一个班级项目开发。其中一个要求是让某种形式的Javascript和AJAX在应用程序中执行某些操作。它不必是任何大的或超级复杂的东西，但它必须在那里。我的小组决定做的是，当你点击“显示”链接时，呈现一个显示项目信息的弹出窗口，因为它类似于教授在课堂上所做的一个示例，对我们的应用程序也有一定的帮助。但是，我无法让它工作，它只是绕过ajax和javascript内容，直接进入show.html.haml页面。这是我的密码：

index.html.haml _item.html.haml 这是弹出窗口应该显示的信息

%h1 Items
%h2
  = item.name
  , #{item.category}
%br/
- item.images.each do |image|
  = image_tag(image.small.url)
%br
Price: $#{item.price}
%br/
Description: #{item.description}
%br/
Quality: #{item.quality},
\#{item.quality_desc}
%br/
Location: #{item.location}
%br/
%br/
%br/
= link_to 'Edit', edit_item_path(@item)
= link_to 'Close', '', id: 'closeLink'

项目\u controller.rb application.html.haml 如果您需要更多的代码，请询问。这是在RubyonRails5中实现的

编辑：所以我通过更改事件处理函数中的选择器来修复它，使其读取“items”，并用该id抓取页面上的元素。然而，我最初尝试使用的代码来自一本教科书，这意味着那里的代码应该是有效的。有人能给我解释一下为什么它一开始不起作用吗

---

EDIT2：没关系，我想出来了。

所以我的问题就在这里：

$(document).on('click', '#items a', ItemPopup.getItemInfo);

我从我班的课本上得到了这段代码，并对它进行了轻微的修改以适应我的应用程序。由于对选择器的工作原理缺乏了解，我认为这是在选择id为“items”的锚定标记。事实证明，它实际上是在一个id为“items”的元素中获取所有锚定标记，在本书中，这个特定元素是一个表，该表中唯一的链接指向applications show.html.haml页面。这对我的应用程序不太有效，因为索引表上有3种不同类型的链接，所以我将行改为

$(document).on('click', '.items', ItemPopup.getItemInfo);

并将my index.html.haml上的“show”链接更改为“items”类。这解决了我的问题，现在它工作得很好

也就是说，如果有一种解决这类问题的方法被认为是一种更好的实践，那么请随意分享它作为这个问题的答案，我也完全支持学习新的东西

var ItemPopup = {
    setup: function() {
        // add hidden 'div' to end of page to display popup:
        var popupDiv = $('<div id="itemInfo"></div>');
        popupDiv.hide().appendTo($('body'));
        $(document).on('click', '#items a', ItemPopup.getItemInfo);
    },
    getItemInfo: function() {
        $.ajax({type: 'GET',
            url: $(this).attr('href'),
            timeout: 5000,
            success: ItemPopup.showItemInfo,
            error: function(xhrObj, textStatus, exception) {alert('Error!'); }
            //'success' and 'error' functions will be passed 3 args
        });
        return(false);
    },
    showItemInfo: function(data, requestStatus, xhrObject) {
        //center a floater 1/2 as wide and 1/4 as tall as screen
        var oneFourth = Math.ceil($(window).width() / 4);
        $('#itemInfo').css({'left': oneFourth, 'width': 2*oneFourth, 'top': 250}).html(data).show();
        //make the Close link in the hidden element work
        $('#closeLink').click(ItemPopup.hideItemInfo);
        return(false); //prevent default link action
    },
    hideItemInfo: function() {
        $('#itemInfo').hide();
        return(false);
    }
};
$(ItemPopup.setup);

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
// require turbolinks
// require_tree .
//= require items

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title InventoryManager
    = csrf_meta_tags
    // = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    // = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = stylesheet_link_tag 'application'
    = javascript_include_tag "application"
  %body
    %nav.navbar.navbar-default
      .container-fluid
        / Brand and toggle get grouped for better mobile display
        .navbar-header
          %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
            %span.sr-only Toggle navigation
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
          %a.navbar-brand{:href => "/default/index"} InventoryManager
        / Collect the nav links, forms, and other content for toggling
        #bs-example-navbar-collapse-1.collapse.navbar-collapse
          %ul.nav.navbar-nav
            %li.active
              %a{:href => "#"}
                Items
                %span.sr-only (current)
          %ul.nav.navbar-nav.navbar-right
            - if admin_signed_in?
              %li= link_to "Logout", destroy_admin_session_path, :method => :delete
            - elsif employee_signed_in?
              %li= link_to "Logout", destroy_employee_session_path, :method => :delete
            - else
              %li
                %a{:href => "/admins/sign_in"} Admin
              %li
                %a{:href => "/employees/sign_in"} Staff
        / /.navbar-collapse
      / /.container-fluid
    = yield

$(document).on('click', '#items a', ItemPopup.getItemInfo);

$(document).on('click', '.items', ItemPopup.getItemInfo);