Question

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

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

<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

原因是代码不起作用，因为脚本中没有定义变量“area”。我可以通过在循环中移动脚本来使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>

Rails - 使用ajax在div中显示show

2 个答案: