我很好地开发了我的网站，并且遇到了一个我似乎无法解决的奇怪问题。
Page_1的日志显示页面已加载，然后加载了AJAX I请求。页面上的所有内容都与预期一致。
Page_2的日志（其中包含大量相同的代码，虽然在各个地方进行了功能扩展，因此我无法重复使用代码）显示页面正常加载，然后重新加载。一切都按预期显示。但是，如果我将参数传递给带有URL的页面，则参数会在第一次加载时被注意到，而不是第二次加载。显示来自第二次加载的数据（我想要第一次加载的数据）。
如果两个页面都查询Postgis数据库，解析一些数据并通过AJAX调用将其传递给我的coffeescript。
我不知道要开始调查哪些方面，因为第2页代码要复杂得多。任何帮助都会很精彩。我可以发布代码，但怀疑它不仅仅是一个简单的编码问题，而是一个逻辑问题。
BTW这里的一个简单查询让我尝试禁用jquery，jquery-ujs和turbolinks（这些页面已经被禁用）。
这是我所谓的 page_2 的html输出。我使用的网址是http://localhost:3000/map?id=12
Streissguth花园|植物
<!-- 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>© 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>
这是我的Rails控制器中的代码
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
最后是我的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"
这是我的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 %>
此处还有我的日志副本（一个加载周期）
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)
作为旁注，我将我的JS和COFFEESCRIPT文件加载到资产管道之外，因为我只需要少于1/4的页面，而且我需要特定于页面的coffeescript。