Rails - 使用 ajax 在 div 中显示 show

Question

我有一个模型名称Area，在索引中我想在div中加载area_path（area），而不是将人们发送到不同的页面。

这是我到目前为止的代码：

<h3>World Map</h3>
<script>
  $(document).ready(function(){
      $("area").click(function(){
          $("#div1").load("<%= area_path(area) %>");
      });
  });
</script>
<div class="map">
  <%= image_tag("strangemap.png", :usemap => "#worldmap", :class => "mapper") %>
    <map name="worldmap">
      <% @areas.each do |area| %>   
        <area shape="poly" coords="<%= area.coords %>"
            class="target noborder" 
            data-textbox<%= area.box_location %>="<%= area.name %>">
        <% end %>
    </map>
</div>
<div class="map_help" id="div1"></div>

areas_controller.rb

class AreasController < ApplicationController
  def show
    @area = Area.find(params[:id])
  end
  def new
    @area = Area.new
  end
  def create
    @area = Area.new(area_params)
    if @area.save
      flash[:success] = "Area successfully saved!"
      redirect_to @area
    else
      render 'new'
    end
  end
  def index
    @areas = Area.all
  end
  private
    def area_params
      params.require(:area).permit(:name, :coords, :box_location, :description,
                                   :creator, :diff_from, :diff_to)
    end
end

原因代码不起作用，因为变量"区域"未在脚本中定义。 我可以通过在循环内移动脚本来使其 SORTA 工作，但结果有点古怪。 例如，它将尝试加载模型中的每个区域，然后固定到第一个区域:)

任何帮助都将被挪用！

Answer 1

您可以使用

自定义data-*前缀属性来存储area_path(area)

<map name="worldmap">
  <% @areas.each do |area| %>   
    <area shape="poly" coords="<%= area.coords %>"
        class="target noborder" 
        data-textbox<%= area.box_location %>="<%= area.name %>"
        data-path="<%= area_path(area) %>"
        >
    <% end %>
</map>

然后在脚本中使用 HTMLElement.dataset 属性或.data()读取自定义data-*前缀属性值。

$("area").click(function(){
    $("#div1").load(this.dataset.path); //or, $(this).data('path')
});

Answer 2

Hi you can use closest element value. like below.
<script>
  $(document).ready(function(){
      $("area").click(function(){
          $("#div1").load($(this).closest("map").find('.area-path').text());
      });
  });
</script>
<div class="map">
  <%= image_tag("strangemap.png", :usemap => "#worldmap", :class => "mapper") %>
    <map name="worldmap">
      <% @areas.each do |area| %>   
        <area shape="poly" coords="<%= area.coords %>"
            class="target noborder" 
            data-textbox<%= area.box_location %>="<%= area.name %>">
        <% end %>
        <span class = "area-path"><%= area_path(area) %></span>
    </map>
</div>