Rails JavaScript 仅在您刷新页面时加载,而不是在原始页面加载时加载,这是怎么回事?
Rails JavaScript only loads when you Refresh Page, not on the original page load, what's wrong?
代码在您刷新页面时有效,但在原始加载时无效。
我正在构建 Pinterest 克隆。
Rails 应用程序 4.1.4.
.
应该发生什么
当您点击索引页面中的 Pin 图时,它会进入显示页面。
SHOW 页面有一些 JavaScript 可以 调整图片 / DIV.
.
问题:
几乎每次我从索引页面单击 Pin 图时,javascript 都不会运行(不会调整图像/div 的大小)。
但是 如果我在网络浏览器中单击“刷新”,脚本似乎总是运行得很好(图像/Div 得到的大小调整得很好)。
.
github上的js链接:
https://github.com/growthcode/pinterest/blob/master/app/assets/javascripts/pins.js.coffee
在 Heroku 上试用一下:
https://growthcode-pinterest.herokuapp.com/
.
SHOW pin 的 html:
<div class="container">
<div class="row">
<div id="showPinContainer" class="col-xs-12">
<div id="showPin" class="well">
<%= image_tag @pin.image, class: "show-image" %>
<p class="description"><%= @pin.description %></p>
<p><%= @pin.user.name %></p>
<% if current_user == @pin.user %>
<%= link_to 'Edit', edit_pin_path(@pin) %> |
<% end %>
<%= link_to 'Back', pins_path %>
</div>
</div>
</div>
</div>
.
我是用 coffee script on rails 写的,我会列出 coffee script 和它的 'Js2coffee' 转换。
咖啡脚本:
# Pin Show page
$ ->
# set jQuery object variables
$windowObj = $(window)
$showPinContainer = $("#showPinContainer")
$showPin = $("#showPin")
$showPinImg = $("#showPin img")
$showPinHeight = $("#showPin").outerHeight()
$showPinImgWidth = $showPinImg.outerWidth()
setShowPinContainerHeight = ->
if $showPinHeight > 450
$showPinContainer.outerHeight( $showPinHeight )
else
$showPinContainer.outerHeight( 450 )
setShowPinContainerWidth = ->
if $showPinImgWidth < 200
$showPinImg.outerWidth( 200 )
else if $showPinImgWidth > 300
$showPinImg.outerWidth( 300 )
setShowPinContainerSize = ->
setShowPinContainerHeight()
setShowPinContainerWidth()
setShowPinContainerSize()
.
上述coffee脚本的Js2coffee.com转换:
$(function() {
var $showPin, $showPinContainer, $showPinHeight, $showPinImg, $showPinImgWidth, $windowObj, setShowPinContainerHeight, setShowPinContainerSize, setShowPinContainerWidth;
$windowObj = $(window);
$showPinContainer = $("#showPinContainer");
$showPin = $("#showPin");
$showPinImg = $("#showPin img");
$showPinHeight = $("#showPin").outerHeight();
$showPinImgWidth = $showPinImg.outerWidth();
setShowPinContainerHeight = function() {
if ($showPinHeight > 450) {
return $showPinContainer.outerHeight($showPinHeight);
} else {
return $showPinContainer.outerHeight(450);
}
};
setShowPinContainerWidth = function() {
if ($showPinImgWidth < 200) {
return $showPinImg.outerWidth(200);
} else if ($showPinImgWidth > 300) {
return $showPinImg.outerWidth(300);
}
};
setShowPinContainerSize = function() {
setShowPinContainerHeight();
return setShowPinContainerWidth();
};
return setShowPinContainerSize();
});
这是我关于 Stack Overflow 的第一个问题,所以如果我可以提供任何其他帮助,请告诉我。谢谢!
尝试禁用 Turbolinks。有关详细信息,请参阅 Rails Guides documentation on Turbolinks。
代码在您刷新页面时有效,但在原始加载时无效。
我正在构建 Pinterest 克隆。 Rails 应用程序 4.1.4.
.
应该发生什么
当您点击索引页面中的 Pin 图时,它会进入显示页面。
SHOW 页面有一些 JavaScript 可以 调整图片 / DIV.
.
问题:
几乎每次我从索引页面单击 Pin 图时,javascript 都不会运行(不会调整图像/div 的大小)。
但是 如果我在网络浏览器中单击“刷新”,脚本似乎总是运行得很好(图像/Div 得到的大小调整得很好)。
.
github上的js链接: https://github.com/growthcode/pinterest/blob/master/app/assets/javascripts/pins.js.coffee
在 Heroku 上试用一下: https://growthcode-pinterest.herokuapp.com/
.
SHOW pin 的 html:
<div class="container">
<div class="row">
<div id="showPinContainer" class="col-xs-12">
<div id="showPin" class="well">
<%= image_tag @pin.image, class: "show-image" %>
<p class="description"><%= @pin.description %></p>
<p><%= @pin.user.name %></p>
<% if current_user == @pin.user %>
<%= link_to 'Edit', edit_pin_path(@pin) %> |
<% end %>
<%= link_to 'Back', pins_path %>
</div>
</div>
</div>
</div>
.
我是用 coffee script on rails 写的,我会列出 coffee script 和它的 'Js2coffee' 转换。
咖啡脚本:
# Pin Show page
$ ->
# set jQuery object variables
$windowObj = $(window)
$showPinContainer = $("#showPinContainer")
$showPin = $("#showPin")
$showPinImg = $("#showPin img")
$showPinHeight = $("#showPin").outerHeight()
$showPinImgWidth = $showPinImg.outerWidth()
setShowPinContainerHeight = ->
if $showPinHeight > 450
$showPinContainer.outerHeight( $showPinHeight )
else
$showPinContainer.outerHeight( 450 )
setShowPinContainerWidth = ->
if $showPinImgWidth < 200
$showPinImg.outerWidth( 200 )
else if $showPinImgWidth > 300
$showPinImg.outerWidth( 300 )
setShowPinContainerSize = ->
setShowPinContainerHeight()
setShowPinContainerWidth()
setShowPinContainerSize()
.
上述coffee脚本的Js2coffee.com转换:
$(function() {
var $showPin, $showPinContainer, $showPinHeight, $showPinImg, $showPinImgWidth, $windowObj, setShowPinContainerHeight, setShowPinContainerSize, setShowPinContainerWidth;
$windowObj = $(window);
$showPinContainer = $("#showPinContainer");
$showPin = $("#showPin");
$showPinImg = $("#showPin img");
$showPinHeight = $("#showPin").outerHeight();
$showPinImgWidth = $showPinImg.outerWidth();
setShowPinContainerHeight = function() {
if ($showPinHeight > 450) {
return $showPinContainer.outerHeight($showPinHeight);
} else {
return $showPinContainer.outerHeight(450);
}
};
setShowPinContainerWidth = function() {
if ($showPinImgWidth < 200) {
return $showPinImg.outerWidth(200);
} else if ($showPinImgWidth > 300) {
return $showPinImg.outerWidth(300);
}
};
setShowPinContainerSize = function() {
setShowPinContainerHeight();
return setShowPinContainerWidth();
};
return setShowPinContainerSize();
});
这是我关于 Stack Overflow 的第一个问题,所以如果我可以提供任何其他帮助,请告诉我。谢谢!
尝试禁用 Turbolinks。有关详细信息,请参阅 Rails Guides documentation on Turbolinks。