我创建了一个Rails 4应用程序,并为图像弹出效果添加了fancybox库.它工作正常,但只有在页面刷新时.如果用户不刷新页面,则jquery根本不起作用.我尝试用小jquery方法测试它,但所有工作只在页面刷新后才能工作.我也在使用twitter bootstrap.
我的assets/application.js文件:
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
$(document).ready(function() {
$(".fancybox").fancybox();
$("#hand").click(function(){
if($("#check6").is(':visible'))
{
$("#check6").hide();
}
else
{
$("#check6").show();
}
});
});
我正在构建一个Rails 4应用程序,我有一些分散的js文件,我试图包括"rails方式".我将jquery插件移动到/ vendor/assets/javascripts中,并更新了清单(application.js)以要求它们.当我在本地加载页面时,我看到它们正确显示.
但是,我从其中一个已编译的脚本中获得了不一致的行为.我有一个名为projects.js的特定于控制器的js文件,它通过以下方式在application.js中引用require_tree .:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .
我看到文件被正确包含,并且它的工作时间有一半.另一半时间,projects.js中的东西似乎没有做任何事情(它主要是jquery动画和一些ajax请求).当它不起作用时,我会点击按钮几次,什么都不会发生,然后我会抛出这个错误:
Uncaught TypeError: Cannot read property 'position' of null
turbolinks.js?body=1:75
当脚本处于各个视图(错误的方式)时,这种情况从未发生过,所以我很确定问题不在于我的javascript代码.另一个可能相关的细节是projects.js中的东西被包装在一个$(document).ready(function(){.此外,我正在开发模式下进行测试,因此javascripts和css不会被资产管道组合.
知道这里发生了什么吗？我是Rails的新手,但我已尽力遵守所有惯例.
更新!
当我的项目脚本不起作用时,它是可预测的.第一页加载每次都有效.然后我点击一个链接到一个使用我的project.js行为的新页面,第二个页面永远不会工作.我点击几次,最终抛出上面的错误.我仍然不确定为什么,但我怀疑这与涡轮连接有关.
很长一段时间以来,我一直在修补这个问题.
我想用我自己推出的东西劫持默认的JS确认对话框.我想使用完全自定义的布局(bootstrap(来自twitter)对话框面板).
我所拥有的不起作用.它显示得很好,我可以点击按钮,它会消失.文档说明,如果是Ok,你应该返回true,如果是Cancel,你应该返回false.这很可爱,但它不起作用.看起来我需要一个回调或对最初调用该函数的对象的引用.即使后者也是不可能的,因为$ .rails.confirm只传递消息.
(这个问题的第一个答案非常有趣.我需要一种方法使其成为模态,以便等待返回自定义对话框.)
有人可以指出我正确的方向吗？我觉得我要打一些东西.硬!!jQuery UI只是一个选项,我可以使我的对话框看起来与我现在的对话框完全一样.
这是我有的:
这是放在我的application.erb中
<div id="modal-confirm" class="modal">
<div class="modal-header">
<h3>Are you sure?</h3>
<a href="#" class="close">×</a>
</div>
<div class="modal-body">
<p>{{VALUE}}</p>
</div>
<div class="modal-footer">
<a id="modal-accept" href="#" class="btn primary">OK</a>
<a id="modal-cancel" href="#" class="btn secondary">Cancel</a>
</div>
</div>
javascript.js:
function bootStrapConfirmDialog(message) {
// get a handle on the modal div (that's already present in the layout).
d = $("#modal-confirm");
// replace the message in the dialog with the current message variable.
$("#modal-confirm div.modal-body p").html(message);
// offset the …对此有类似的问题,但它们似乎都是由身体中的javascript标签引起的,在我的情况下我的是在头脑中.我也无法将我的js移动到页面更改块之外(我认为至少我不能)
我遵循rails约定,根据资源在每个文件中包含所有j,并将它们包含在application.js中.
我的js位于头部的布局文件中:
<!DOCTYPE html>
<html>
<head>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
我的文件都遵循rails文档中的建议来使用页面更改事件:http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
这是一个示例js文件(report.js - 我使用咖啡脚本)
load_reports = ->
table = $('#reports').DataTable()
company_input_field = $('#rc-cn-st-input')
company_input_field.on 'keyup change', ->
table.column(2).search(@value).draw()
return
$(document).on('page:change', load_reports)
这一切都很好,直到我使用浏览器后退按钮.一旦我这样做,我每次点击都会触发2次事件.我如何解决这个问题以及遵循的惯例是什么？
在其他情况下,我将我的js移动到页面更改块之外并执行:
$(document).on 'click', 'td.details-control', ->
# do something
但是在上面的情况下这似乎不实用,我引用的jquery数据表只在一个页面上,只需要在我在该页面上时进行设置.
我确实看过.off()函数,但在这种情况下无法弄清楚如何使用它,我尝试过的所有东西似乎要么删除活动的监听器,要么失败.
我有一个自定义js文件app/assets/javascripts.这是js文件:
//app/assets/javascripts/contacts.js
//$(document).ready(function() { //I've already tried with this method
$(window).load(function() {
alert("foo bar")
});
我需要contacts.js文件中的application.js文件.
如果我检查html页面,我看到正确加载了js文件,但是没有显示该消息.如果我重新加载页面(通过按f5),则正确显示该消息.
当页面加载时,加载了javascript(我可以在浏览器的源代码中看到它)但是没有执行.
你能帮助我吗？
javascript ruby ruby-on-rails asset-pipeline ruby-on-rails-4
Senario:所以基本上我正在使用DataTables并在其第一列上有复选框.我的DataTables有多个页面(分页).
问题:当我检查页面上的几个框(可能是任何页面)时,还要检查其他页面上的一些框.
如果我在当前页面上,结果只会被保存
我对datatables/javascript很新,并且无法弄清楚如何解决这个问题.
$('#formDataTable').DataTable({
responsive: true,
autoWidth: true,
"bFilter": true,
"bRetrieve": true,
"bInfo": true,
"sPageFirst": false,
"sPageLast": false,
});
我看过这些SO页面.复选框仅适用于jQuery数据表中的当前分页页面 链接目前已死于此问题 - > 选中复选框的分页.复选框仅适用于当前分页页面.jQuery数据表
我有一个 rails 应用程序，它按行显示步骤和子步骤。我希望创建一个操作，其中单击步骤行会将其类从“step_container”更改为“step_container active”，然后显示该步骤的相应子步骤行。我很难弄清楚如何使用 AJAX（或了解这是否是最好的工具）来完成此任务。
<% @steps.each do |step| %>
<div class="step_container"> <!-- add 'active' if clicked-->
<div class="medium-8 columns"><!-- add 'active_container' if clicked-->
<div class="medium-5 columns step_info">
<div class="step_number">
<span><%= step.order %></span>
</div>
<div class="custom_step">
<span class="step_title"><%= step.title %> (custom step)</span>
<span class="step_desc"><%= step.description %></span>
</div>
</div>
</div>
<!-- Only show this div if top div is clicked -->
<div class="medium-4 columns sub_steps_container">
<% @substeps.where(step_id: step.id).each do |substep| %>
<div class="sub_steps">
<div class="step_number">
<span><%= substep.order %></span>
</div>
<div class=""> …我正在尝试设置一个表单，以便当我点击 时它可以通过 ajax 提交enter。为此，我想在输入字段上按下回车键时触发表单提交。然而，如果按住该键超过一瞬间，回车键的 keyup 事件会持续触发多次，进而发送大量 ajax 请求，导致浏览器崩溃。
我不明白为什么该事件不断触发多次。这是页面的视图：
<div class="page-content">
<div class="l-edit-header">
<h1>Edit</h1>
<div class="piece-header">
<%= image_tag @piece.user.avatar_url(:small), class: "avatar-small" %>
<div class="piece-header-info">
<h1><a href="<%= piece_path @piece %>"><%= @piece.title %></a></h1>
<em>
By <%= link_to @piece.user.username, user_path(@piece.user) %>
<%= @piece.created_at.strftime("%B %d, %Y") %>
</em>
</div>
</div>
</div>
<div class="l-edit-main">
<div class="piece-main">
<%= image_tag @piece.image_url %>
<p id="piece-description" class="piece-main-description"><%= @piece.description %></p>
<div class="piece-main-links">
<%= link_to "Delete", piece_path(@piece), method: :delete if current_user == @piece.user %>
</div>
</div>
</div>
<div class="l-edit-side"> …