Question: How would I go about figuring out what a Rails controller gets loaded twice

Question

How would I go about figuring out what a Rails controller gets loaded twice

Answers 0
Added at 2016-12-26 20:12
Tags
Question

I am well into the development of my website and have come across a rather strange issue I can't seem to wrap my head around.

The logs for Page_1 show that the page gets loaded, then the AJAX I request gets loaded. Everything on the page looks as expected.

The logs for Page_2 (which has MUCH of the same code, though expanded functionally in various places so I can't really reuse code) show that the page loads normally, then reloads. Everything displays as expected. However if I pass a parameter to the page with a URL the parameter gets noticed on the first load, but not the second load. Data from the second load is displayed (I want data from the first load).

If it matters both pages query a Postgis database, parse some data and pass it to my coffeescript with an AJAX call.

I'm at a loss as to what areas to start investigating, as page_2 is much more complex code. Any help would be wonderful. I can post code, but suspect it's a logic issue more than just a simple coding issue.

BTW a simple query here led me to try disabling jquery, jquery-ujs, and turbolinks (which should already be disabled for these pages).

Update

This is the html output from what I've called page_2. The url I used was http://localhost:3000/map?id=12 Streissguth Gardens | Plants

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js" type="text/javascript"></script>
    <![endif]-->

    <link rel="stylesheet" media="all" href="/assets/application.self-11f9f7a32e4331868fdf90f98aee02cb97e07dd7772401c37692439c9bafad2f.css?body=1" />
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet" type="text/css">  

    <!-- For third-generation iPad with high-resolution Retina display: -->
    <!-- Size should be 144 x 144 pixels -->
    <link rel="apple-touch-icon-precomposed" type="image/png" href="/images/apple-touch-icon-144x144-precomposed.png" sizes="144x144" />

    <!-- For iPhone with high-resolution Retina display: -->
    <!-- Size should be 114 x 114 pixels -->
    <link rel="apple-touch-icon-precomposed" type="image/png" href="/images/apple-touch-icon-114x114-precomposed.png" sizes="114x114" />

    <!-- For first- and second-generation iPad: -->
    <!-- Size should be 72 x 72 pixels -->
    <link rel="apple-touch-icon-precomposed" type="image/png" href="/images/apple-touch-icon-72x72-precomposed.png" sizes="72x72" />

    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <!-- Size should be 57 x 57 pixels -->
    <link rel="apple-touch-icon-precomposed" type="image/png" href="/images/apple-touch-icon-precomposed.png" />

    <!-- For all other devices -->
    <!-- Size should be 32 x 32 pixels -->
    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-4f241b3fd3f72405ee0ec20d7ad9591288f5a3de1d71ec9df95330d9fd702070.ico" />
    <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1"></script>
<script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1"></script>

      <script src="/assets/leaflet/leaflet-src.self-357ee0d50ed2a85182521a58430e383b89c2af8102919af7686cbc7e8af82b9b.js?body=1"></script>
<script src="/assets/leaflet.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
  <script src="/assets/leaflet.markercluster/leaflet.markercluster-src.self-25776efa5512484fb238e65201dad38941babc8405ed3e77c61f0d6e92213130.js?body=1"></script>
<script src="/assets/leaflet.markercluster.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
  <script src="/assets/leaflet.GoogleMutant.self-e56e5f7b3a8bb83b69caeacdb557a67a3f77c2b44d76a2d825fe0184e35668a2.js?body=1"></script>

  </head>
  <body>
    <header>
    </header>
    <div class="container-fluid">
      <div class="row hidden-print">
        <nav class="navbar navbar-default navbar-fixed-top print-hidden">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <img alt="SG logo" src="/assets/Leaf_logo-7d499113a70a7fdd41e8dd9b30627c600f115e8cb227156e8d0c00b5deda6d5f.png" />
</a>    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class=""><a href="/">Home</a></li>
        <li class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">History<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header bg-success"><u>Garden</u></li>
            <li><a href="/garden">About us</a></li>
            <li><a href="/naming">Paths and Beds</a></li>
            <li class="dropdown-header bg-success"><u>Neighborhood</u></li>
            <li><a href="/broadway">Broadway</a></li>
            <li><a href="/stairs">Stairs</a></li>
            <li><a href="/capitol_hill">Capitol Hill</a></li>
          </ul>
        </li>
        <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Plants<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header bg-success"><u>Search by</u></li>
            <li><a href="/genus">Genus</a></li>
            <li><a href="/common">Common name</a></li>
            <li><a href="/advanced">Advanced</a></li>
            <li role="separator" class="divider"></li>
            <li><a data-turbolinks="false" href="/map">Map</a></li>
          </ul>
        </li>
        <li class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Maps<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/plan">Plan and sections</a></li>
            <li><a data-turbolinks="false" href="/bed">By beds</a></li>
            <li><a data-turbolinks="false" href="/grid">By grid</a></li>
            <li><a data-turbolinks="false" href="/location">Current location</a></li>
          </ul>
        </li>
        <li class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/anniversary">20<sup>th</sup> anniversary</a></li>
            <li><a href="/vip2012">VIP day</a></li>
          </ul>
        </li>
        <li class=""><a href="/irrigation">Irrigation</a></li>
        <li class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Photos<span class="caret"></span></a>
          <ul class="dropdown-menu">
              <li><a href="/photos?tab=winter">Winter</a></li>
              <li><a href="/photos?tab=spring">Spring</a></li>
              <li><a href="/photos?tab=summer">Summer</a></li>
              <li><a href="/photos?tab=fall">Fall</a></li>
              <li><a href="/photos?tab=snow">Snow</a></li>
              <li><a href="/photos?tab=andrea+2012">Andrea 2012</a></li>
          </ul>
        </li>
        <li class=""><a href="/links">Links</a></li>
        <li class=""><a data-turbolinks="false" href="/directions">Directions</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
      </div>
      <div class="row">

        <article>
  <div class="col-xs-12" style="min-height: 100%;">
    <div class="col-xs-12 well well-sm master_well">
      <div class="page-header text-center">
        <h1>Plants in the garden</h1>
      </div>
      <div class="col-xs-12 well well-sm ">
        <div class="col-xs-12">
          <p>Gears represent cluters of plants (click on them to see individual plants, or zoom in)</p>
          <div id="loading">
            <img src="/assets/ajax-loader-7cde6ebfd3bb8a1999f032e414003d4675bf3d42f94fd8dfa60a0573511c31e5.gif" alt="Ajax loader 7cde6ebfd3bb8a1999f032e414003d4675bf3d42f94fd8dfa60a0573511c31e5" />Loading ...
          </div>
          <div id="map1">
          </div>
        </div>
      </div>
    </div>
  </div>
</article>


      </div>
      <div class="row hidden-print">
        <footer class="footer">
  <div class="container-fluid">
    <div class="col-xs-4">
      <p>&copy; Streissguth Gardens, 2012-17</p>
    </div>
    <div class="col-xs-4 text-center print_hidden">
        <p>Find us on 
          <a target="_blank" href="http://www.facebook.com/streissguthgardens">
            <img alt="Facebook" height="25" src="/assets/Facebook-e2e2e1fe15151b9f4ce9290d9c6fd1cec71bc053a07f41682290ce803eaf41dd.png" />
          </a> or
          <a target="_blank" href="http://www.instagram.com/streissguthgardens">
            <img alt="Instagram" height="25" src="/assets/Instagram-aaf78e32dbc9dd2514d65b00cbd36ab5ed5277bd1442756ebdce2edd2b79aeae.png" />
          </a> at streissguthgardens</p>
    </div>
    <div class="col-xs-4 text-right print_hidden">
      <a class="btn btn-xs btn-info" href="mailto:ben@streissguthgardens.com"><span class="glyphicon glyphicon-envelope"></span> Email us</a>
    </div>
  </div>
</footer>
       </div>
    </div>
      <script src="/assets/leaflet-maps/plants.self-d66c7f3c22c956adb3ed775248bff2a6e5b020d1a3ae4c15b1122424b5e3d221.js?body=1"></script>

    </body>
</html>

Here's the code from my Rails controller

def map
  @pId = params[:id]
  puts params.inspect
  if @pId.present?
    puts "-- Id present --"
    @points = Point
      .select('points.genus, points.species, points.cultivar, points.common_name, types.type_name')
      .where(id: @pId)
      .eager_load(:type)
  else
    puts "** Id not present **"
    @points = Point
      .select('points.genus, points.species, points.cultivar, points.common_name, types.type_name')
      .where("types.type_name like 'Tree-%' or types.type_name like 'Shrub-%' or types.type_name like 'Perennial' or types.type_name like 'Fern' or types.type_name like 'Vine-%'")
      .order(:id)
      .eager_load(:type)
  end
  feature_collection = Point.to_feature_collection @points
  @geojson = RGeo::GeoJSON.encode(feature_collection)

    respond_to do |format|
      format.json { render json: @geojson }
      format.html
    end
  end

And lastly my coffeescript

$ ->
#--------------------------------------------------
# Reset div height to 60% so map will fill screen
#--------------------------------------------------
  stuffToRezie = ->
    h_window = $(window).height()
    h_map = h_window * 0.6
    $('#map1').css 'height', h_map
    return

  $(window).on('resize', stuffToRezie).trigger 'resize'

#--------------------------------------------------
# Build plant markers
#--------------------------------------------------
  plantToMarker = (feat, latlng) ->
    botName = "<i>"+feat.properties.genus
    if feat.properties.species?
      botName += " "+feat.properties.species+"</i>"
    else
      botName += "</i>"
    if feat.properties.cultivar?
      botName += " "+feat.properties.cultivar
    botName += "<br />(#{feat.properties.common_name})<br /><a href='show?id=#{feat.id}', class='btn btn-success btn-sm btn-block active' ><span class='glyphicon glyphicon-list'></span> More info</a>"
    switch feat.properties.type_id
      when 12
        myIcon = L.divIcon(
          className: 'fIcon'
          html: 'F' )
        fernMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 7
        myIcon = L.divIcon(
          className: 'pIcon'
          html: 'P' )
        perennialMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 1
        myIcon = L.divIcon(
          className: 'sIcon'
          html: 'B' )
        shrubMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 4
        myIcon = L.divIcon(
          className: 'sIcon'
          html: 'C' )
        return shrubMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 2
        myIcon = L.divIcon(
          className: 'sIcon'
          html: 'D' )
        return shrubMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 5
        myIcon = L.divIcon(
          className: 'tIcon'
          html: 'B' )
        return treeMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 6
        myIcon = L.divIcon(
          className: 'tIcon'
          html: 'C' )
        return treeMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 3
        myIcon = L.divIcon(
          className: 'tIcon'
          html: 'D' )
        return treeMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 8
        myIcon = L.divIcon(
          className: 'vIcon'
          html: 'B' )
        return vineMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)
      when 9
        myIcon = L.divIcon(
          className: 'vIcon'
          html: 'D' )
        return vineMarkers.addLayer L.marker(latlng, icon: myIcon).bindPopup(botName)

#--------------------------------------------------
# Build cluster sizing
#--------------------------------------------------
  onEachMarker = (marker_type) ->
    return iconCreateFunction: (cluster) ->
      clusterCounter = cluster.getChildCount()
      clusterSize = 'small'
      clusterArea = 20
      if clusterCounter >= 10
        clusterSize = 'medium'
        clusterArea = 30
      if clusterCounter >= 100
        clusterSize = 'large'
        clusterArea = 40
      L.divIcon
        className: marker_type + '-cluster ' + marker_type + '-cluster-' + clusterSize
        html: '<div><strong>' + clusterCounter + '</strong></div>'
        iconSize: new L.point(clusterArea,clusterArea)

#--------------------------------------------------
# Variables
#--------------------------------------------------
  L.Icon.Default.imagePath = '/assets'
  pointStyle = {
    "color": "#ff7800",
  }
  neCorner = L.latLng([47.635103, -122.320525])
  swCorner = L.latLng([47.634083, -122.321129])
  treeMarkers = L.markerClusterGroup(onEachMarker('t'))
  shrubMarkers = L.markerClusterGroup(onEachMarker('s'))
  perennialMarkers = L.markerClusterGroup(onEachMarker('p'))
  fernMarkers = L.markerClusterGroup(onEachMarker('f'))
  vineMarkers = L.markerClusterGroup(onEachMarker('v'))

#--------------------------------------------------
# Set view and load Google Maps
#--------------------------------------------------
  map = L.map("map1", zoomSnap: .25)
  map.fitBounds([swCorner, neCorner])
  map.invalidateSize(false)
  map.options.maxZoom = 22
  map.options.bounceAtZoomLimits = true
  googleLayer = L.gridLayer.googleMutant(type: 'roadmap').addTo(map)
  map.addLayer googleLayer

#--------------------------------------------------
# Get Ajax data
#--------------------------------------------------
  $.ajax
    dataType: 'text'
    url: window.location.pathname
    send: () ->
      $('#loading').show()
    complete: () ->
      $('#loading').hide()
    success: (data) ->
      L.geoJSON(JSON.parse(data),
        pointToLayer: plantToMarker)
      if data.length > 500
#--------------------------------------------------
# Add map control layers
#--------------------------------------------------
        baseLayer = 'Base': googleLayer
        overlays =
          '<span class="tMarker"> - Trees</span><ul class="leaflet-list"><li>Broadleaf</li><li>Conifer</li><li>Deciduous</li><ul>': treeMarkers
          '<span class="sMarker"> - Shrubs</span><ul class="leaflet-list"><li>Broadleaf</li><li>Conifer</li><li>Deciduous</li><ul>': shrubMarkers
          '<span class="pMarker"> - Perennials</span>': perennialMarkers
          '<span class="fMarker"> - Ferns</span>': fernMarkers
          '<span class="vMarker"> - Vines</span><ul class="leaflet-list"><li>Broadleaf</li><li>Deciduous</li><ul>': vineMarkers
        L.control.layers(null, overlays, {collapsed:false}).addTo map

      map.addLayer treeMarkers
      map.addLayer shrubMarkers
      map.addLayer perennialMarkers
      map.addLayer fernMarkers
      map.addLayer vineMarkers

    error: ->
      alert "Failed to load AJAX data"

Update 2

Here's my html.erb

<% provide(:title, "Plants") %>
<% provide(:plants, "active") %>
<article>
  <div class="col-xs-12" style="min-height: 100%;">
    <div class="col-xs-12 well well-sm master_well">
      <div class="page-header text-center">
        <h1>Plants in the garden</h1>
      </div>
      <div class="col-xs-12 well well-sm ">
        <div class="col-xs-12">
          <p>Gears represent cluters of plants (click on them to see individual plants, or zoom in)</p>
          <div id="loading">
            <%= image_tag "ajax-loader.gif" %>Loading ...
          </div>
          <div id="map1">
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

<% content_for :header do %>
  <%= javascript_include_tag "leaflet" %>
  <%= javascript_include_tag "leaflet.markercluster" %>
  <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyDajktKwrSpMhwXVCXZZhC1yCMYqBQCOe4" %>
  <%= javascript_include_tag "leaflet.GoogleMutant" %>
<% end %>
<% content_for :javascript do %>
  <%= javascript_include_tag "leaflet-maps/plants" %>
<% end %>

Here's a copy of my log also (for one load cycle)

Started GET "/map?id=12" for ::1 at 2016-12-26 12:27:19 -0800
Processing by PlantsController#map as HTML
  Parameters: {"id"=>"12"}
{"id"=>"12", "controller"=>"plants", "action"=>"map"}
-- Id present --
  SQL (1.0ms)  SELECT points.genus, points.species, points.cultivar, points.common_name, types.type_name, "points"."id" AS t0_r0, "points"."genus" AS t0_r1, "points"."species" AS t0_r2, "points"."cultivar" AS t0_r3, "points"."common_name" AS t0_r4, "points"."type_id" AS t0_r5, "points"."created_at" AS t0_r6, "points"."updated_at" AS t0_r7, "points"."geom" AS t0_r8, "types"."id" AS t1_r0, "types"."type_name" AS t1_r1, "types"."created_at" AS t1_r2, "types"."updated_at" AS t1_r3 FROM "points" LEFT OUTER JOIN "types" ON "types"."id" = "points"."type_id" WHERE "points"."id" = $1  [["id", 12]]
  Rendered plants/map.html.erb within layouts/application (50.5ms)
  Category Load (0.5ms)  SELECT "categories".* FROM "categories" WHERE ("categories"."id" BETWEEN 3 AND 8)
  Rendered shared/_navbar.html.erb (8.5ms)
  Rendered shared/_footer.html.erb (5.5ms)
Completed 200 OK in 502ms (Views: 494.2ms | ActiveRecord: 1.5ms)


Started GET "/map" for ::1 at 2016-12-26 12:27:20 -0800
Processing by PlantsController#map as TEXT
{"controller"=>"plants", "action"=>"map"}
** Id not present **
  SQL (16.5ms)  SELECT points.genus, points.species, points.cultivar, points.common_name, types.type_name, "points"."id" AS t0_r0, "points"."genus" AS t0_r1, "points"."species" AS t0_r2, "points"."cultivar" AS t0_r3, "points"."common_name" AS t0_r4, "points"."type_id" AS t0_r5, "points"."created_at" AS t0_r6, "points"."updated_at" AS t0_r7, "points"."geom" AS t0_r8, "types"."id" AS t1_r0, "types"."type_name" AS t1_r1, "types"."created_at" AS t1_r2, "types"."updated_at" AS t1_r3 FROM "points" LEFT OUTER JOIN "types" ON "types"."id" = "points"."type_id" WHERE (types.type_name like 'Tree-%' or types.type_name like 'Shrub-%' or types.type_name like 'Perennial' or types.type_name like 'Fern' or types.type_name like 'Vine-%')  ORDER BY "points"."id" ASC
Completed 200 OK in 921ms (Views: 191.6ms | ActiveRecord: 16.5ms)

As a side note, I'm loading my JS and COFFEESCRIPT files outside of the asset pipeline because I only need them on less that 1/4 of the pages, plus I need page specific coffeescript.

Answers
Source Show
◀ Wstecz