Rails - Use ajax to display show in a div
<p>I have a model name Area and in the index I would like to load the area_path(area) inside a div instead of sending people to a different page.</p>

<p>This are the codes I have so far:</p>

<pre><code>&lt;h3&gt;World Map&lt;/h3&gt;

&lt;script&gt;
  $(document).ready(function(){
      $("area").click(function(){
          $("#div1").load("&lt;%= area_path(area) %&gt;");
      });
  });
&lt;/script&gt;

&lt;div class="map"&gt;
  &lt;%= image_tag("strangemap.png", :usemap =&gt; "#worldmap", :class =&gt; "mapper") %&gt;
    &lt;map name="worldmap"&gt;
      &lt;% @areas.each do |area| %&gt;   
        &lt;area shape="poly" coords="&lt;%= area.coords %&gt;"
            class="target noborder" 
            data-textbox&lt;%= area.box_location %&gt;="&lt;%= area.name %&gt;"&gt;
        &lt;% end %&gt;
    &lt;/map&gt;
&lt;/div&gt;

&lt;div class="map_help" id="div1"&gt;&lt;/div&gt;
</code></pre>

<p>areas_controller.rb</p>

<pre><code>class AreasController &lt; 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
</code></pre>

<p>Of cause the codes don't work because the variable "area" is not define inside the script.  I can make it SORTA work by moving the script inside the loop, but the result is kind of wacky.  For example it will try to load every area inside the model then settle to the first one :)</p>

<p>Any help will be appropriated!</p>