前端问题总结

前端传到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;

}

前端问题总结

推荐阅读更多精彩内容