新手问题 [SOLVED] 如何用 rails 和 js 写 checkbox 功能?

stardiviner · 2015年09月26日 · 最后由 stardiviner 回复于 2015年09月27日 · 2888 次阅读
<tbody>
  <% @todos.each do |todo| %>
    <tr>
      <!-- TODO: add checkbox -->
      <td>
        <input type="checkbox" id="todoCheckbox" value="not-done" onclick="todoCheck(this.value)" />
        <script type="text/javascript">
         var checkboxInput = document.getElementsByTagName('input');
         var checkboxState = document.getElementById("todoCheckbox");
         function todoCheckClick(state) {
           if (checkboxState.checked) {
             this.elements['input'].value = 'done';
           } else {
             this.elements['input'].value = 'not-done';
           }
         }
        </script>
      </td>

      <td>
        <%= todo.title %>
      </td>
      <td>
        <%= todo.state %>
      </td>
   </tr>
</tbody>

上面是一点 js 的伪代码,我想要实现当点击 checkbox 的时候,js 能改变 todo 的状态 value="not-done" -> done. 然后发送 PUT 请求给 action toggle 改变 state 的值。然后返回显示。

我想知道具体应该怎么写这个代码?能具体写一个示例么?不知道怎么在 js 中发送 REST 请求。

这个问题真是让人难过。

你需要的只是看看 JS 教程,或者 Google 关键字rails send put request via ajax

视图中的 AJAX 交互

@zoker 我搜索过 w3school.com 上看过 AJAX 的简单教程,但是没有看懂怎么应用。

#2 楼 @stardiviner 那你肯定是只是看,没有用,动手做一下,一切都通了

唉……

@zoker 你给的链接里对我来说有点难了,上面的例子都是 ujs 和 jQuery 的,我还没学过 jquery。只想看看单纯用 js 是怎么写的代码。google 了你给的关键字搜索,前面的好几个结果都是使用 jquery 的。难道不先学 jquery 就无法理解么。。。

You Might Not Need jQuery http://youmightnotneedjquery.com/

jQuery

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

IE9+

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

#4 楼 @stardiviner

$('#checkbox1').click(function(){
      uri = "your_put_path";
      $.ajax({
        url:uri,
        data: {"key":"value"},
        type: "PUT",
        beforeSend: function() {
          //发送请求前干什么
        },
        success: function(data) {
          //请求成功后干什么
        }
      });
});

@rei 这个我看懂了,谢了。简单明了,之前看 w3school.com AJAX 的例子没明白它请求的 asp 页面。这里 /my/url 没有 base_url 是默认的么?

@zoker 还是 jQuery 的,虽然能明白大概,但是毕竟不懂。看了 @rei 的简单例子我就明白了。还是谢谢你。

#8 楼 @stardiviner Either way, as long as you find something that works for you.

@rei 这个文档很棒。全面。

楼主有点搞笑,估计现在还没做出来。

#12 楼 @coderq 想必先生定是有大智慧的人了。

#13 楼 @stardiviner 刚入行,只是感觉我刚开始学就能搞定,楼主都两三年的老会员了,还在问着这样的问题有点诧异而已,如有冒犯,还请见谅。

确实,我学的速度慢的。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号