Ajaxでチェックボックスの値を保存

よくあるチェックボックスにチェックをon/offするだけで保存される仕組みをAjaxで作成しました。

@advertisements.each do |ad|
 = form_for ad, url: update_display_path(id: ad.id), remote: true do |f|
  = f.label :display, "on/off"
  = f.radio_button :display, true, { checked: ad.display }

的なフォームを作って

$(function(){
  $('#advertisement_display_true').click(function(){
    var val = $(this).val();
    var target = $(this.form).attr("action");
    $.ajax({
      type: "PUT",
      url: target,
      data: val,
      success: function(){
        alert("OK")
      }
    });
  });
});

とすればOK
流れは・・・
radio_buttonをクリックしたら、
↓
そのvalueと
↓
そのフォームのアクションを取ってきて
↓
ajax内のtypeをput,
↓
urlをアクション、
↓
送るdataをvalueで、
↓
成功時にOKっというメッセージを出す
という流れです。
Ajaxは利用者ががんがんスムーズに作れるので嬉しいですよね〜

jQuery:全てにチェックを付ける！

今回はよくある全てにチェックを付けるという内容です

参考までに


assets/javascript内に新しいファイルを作成します。

$(function() {
  $("#全てにチェックのcheck_boxのID名").click(function() {
    if(this.checked) {
     $(".チェックボックスのクラス名").attr('checked', $(this).attr('checked'));
    }else{
     $(".チェックボックスのクラス名").removeAttr('checked')
    }
  });
});

ここで重要なのはチェックボックスのクラス名で、クラスにすること。基本IDは１つなので当たり前か・・・ これだけでできあがり！

Jquery-UIのdraggableを使ってみた

これから仕事で使いそうなプラグインを使ってみた。

Ruby on Rails 3.2
Ruby 1.9.3
ほぼ見た目はbloggerのマネです。
Jquery UIを使用するときはapplication.jsに

//= require jquery-ui

を追加しあとは流れで
まずtop/index.html.erbに

<h1>Jqueryを遊ぶ</h1>
<table width="50%">
<tr>
 <td align="left" style="vertical-align: top;">
      <div class="a">ブログ全体</div>
    </td>
  </tr>
  <tr>
    <td align="left" style="vertical-align: top;">
      <table width="100%">
        <tr>
          <td align="left" style="vertical-align: top;">
            <div class="b">
              <div class="c" id="">
                <input type="text" tabindex="-1" style="opacity:0; height: 1px; width: 1px; z-index: -1; overflow-x: hidden; overflow-y: hidden; position: absolute;">
                <div class="d">
                  <div class="e"></div>
                  <span class="f"></span>
                  <div class="g">最大</div>
                  <div class="h">最小</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

としてassets/stylesheets/top.css.scss

body {
  background-color:#ccc;
}
.a{
  color:#fff;
  font-size:13px;
  font-weight:bold;
  margin-left:5px;
}
.b{
  width:500px;
}
.c{
  height:20px;
  margin: 0 6px 10px;
}
.d{
  position:relative;
}
.e{
  width: 488px;
  background-color: #999;
  barder: none;
  height:9px;
  overflow:hidden;
  position: absolute;
  top:6px;
}
span.f{
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 1px;
  height:21px;
  width:11px;
  background:#fff;
}
.g {
  position:absolute;
  font-size:85%;
  top:24px;
}
.h{
  position: absolute;
  font-size:85%;
  top:24px;
  right:0;
}

最後にassets/javascripts/change.jsを作成し

jQuery (function() {
  jQuery('span.f').draggable({
    containment: 'div.d' ,
    scroll: false,
     axis: "x"
  });
});

遊んでみました。