- 前端传到
controller
中的参数都是string
类型的需要自己进行转换想要的类型,例:
#恒为false,因为params[:depth]为string类型与值类型比较永远为false,所以一定要写params[:depth].to_i
if params[:depth] == 3
do_something
end
- 在js代码中也可以直接使用
<%= @data %>
来取到后端的值 - 在
<table>
中的任何一个层次<th><tr><td>
之间都无法嵌套<form>
标签,也就是form
不能包含多个单元格,<form>
和<table>
只能有两种嵌套方式
<form>
包含整个<table>
<td>
包含整个<form>
- 使用
ajax
提交表单时就不能用onsubmit=“return check_input()”
返回false
来阻止表单提交了,因为是异步的,所以不会在表单提交之前进行判断 - 在modal中点击按钮是不能再弹出alert的,并且似乎看不到源码,所以不能加断点调试,解决方式是使用
console.log()
将想要的值打印出来 -
在设计导航栏时有时需要点击导航栏就使用ajax提交表单刷新表格显示区域,如点击下图的“全部”按钮刷新下面的表格
实现方式是
image
<!-- 导航栏的html代码 -->
<li role="presentation" class='<%="active" if params[:warning_tab] == "all" %>' >
<a href="#" id="all">全部</a>
</li>
// 1.为该tab绑定事件,点击后自动提交表单(由于表单有date-remote属性,所以自动是异步提交)
// 2.onclick事件返回false阻止默认的点击链接后跳转的动作
<script>
//点击导航提交表单
$("#all").click(function(){
$("<input type='hidden' name='warning_tab' value='all'/>").appendTo("#condition_form")
$("#condition_form").submit()
return false
})
</script>
- 如果想在提交表单前修改表单内容,则提交按钮的
type
不能为submit
,要为button
,然后在手动绑定事件处理函数修改表单内容然后提交表单
<form date-remote="true">
<!-- some input -->
<button type="button" id="submit_btn">提交</button>
</form>
<script>
$("#submit_btn").click(function(){
//do something in form
$("form").submit()
})
</script>
- 在js中嵌入ruby即便不会被调用也会报异常,为了抑制异常加入异常捕获或在整个函数外嵌入ruby改变函数的可见状态
<% begin %>
var data = JSON.parse('<%= raw @single_case.related_orderids %>')
<% rescue %>
<% end %>
<% if !@case.nil? %>
function get_data()
{
var data = JSON.parse('<%= raw @case.related_orderids %>')
}
<% end %>
- 如何将一个已定义的函数作为事件处理程序绑定到某个dom上
//函数无参数情况
//直接将函数名(函数引用)写到事件绑定函数中
$(xxx).on('click', funRef)
//函数有参数情况
//使用匿名函数调用该函数
$(xxx).on('click', function(){
callFunc();
})
当上下文环境改变时如何保持this指针不变?
使用func.bind(this)
将外层的this指针传入函数内部:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind如果
<table>
中<tb>
不能改变宽度是因为<tb>
中的内容不能换行所致,要在<table>
中加入style="word-break:break-all"
如果想实现某个模块脱离滚动条,永远固定在视口内,可以使用Fixed 定位,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}