カテゴリー : jQuery

[jQuery] jQuery.ajax(options)、$.ajax のメモ

jQuery の $.ajax メソッドの引数や、success, error, complete などに指定する引数をよく忘れてしまうのでメモ。

jQuery 1.7 までの $.ajax

$.ajax({
  url: 'http://api.example.com/v1/posts',
  type: 'POST',
  dataType: 'HTML',
  data: {
    id: '123'
  },
  success: function(data, statusText, xhr){
    if (xhr.status === 200) {
      // 成功時の処理
    } else if (xhr.status === 302) {
      // HTTPステータスコードによって、処理を分岐
 
      // 302 でリダイレクトさせたり
      location.href = 'http://example.com/redirect';
    }
  },
  error: function(xhr, statusText, error) {
    // エラー処理
  },
  complete: function(xhr, statusText){
    // 共通処理
  }
});

jQuery 1.8 以降の $.ajax

success, error, complete が .done, .fail, .always に変更されているようです。

これについては、いつか更新します。


参考情報

jQuery.ajax()のまとめ: 小粋空間

jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!

jQuery.ajax(options) – jQuery 日本語リファレンス

jQuery.ajax() | jQuery API Documentation

[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法

jQuery で、チェック済みの checkbox の値を取得して配列へ格納する方法をメモ。

<input type="checkbox" name="seasons" value="spring"> 春
<input type="checkbox" name="seasons" value="summer"> 夏
<input type="checkbox" name="seasons" value="autumn"> 秋
<input type="checkbox" name="seasons" value="winter"> 冬

チェックされた checkbox の値を取得して、配列に格納するコードは下記の通りです。

var checkedSeasons = [];
$('[name="seasons"]:checked').each(function(){
  checkedSeasons.push($(this).val());
});

参考情報

jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 – knt45の日記

[jQuery] フォームの値をクリア、リセット、空にする方法

jQuery でフォームの値をクリアする方法をご紹介します。

jQuery

続きを読む

[jQuery] 日時の入力フォームは2つに分けて Datepicker と Timepicker を使う

タイトルでほぼ終わってますが。

入力補助に jQuery のライブラリを使う場合、下記のようにするのが手っ取り早そう。

・日時の入力フォームは2つに分ける
・年月日のフォームには Datepicker を使う
・時刻のフォームには Timepicker を使う

年月日と時刻をひとまとめにする場合、良さそうな jQuery ライブラリが無かった。

[jQuery] フォームやリンクの二度押し・連続クリック防止

jQuery で、フォームやリンクの二度押し・連続クリックを防止する方法をメモ。

[JavaScript][jQuery] 要素 DOM の存在確認・チェック

JavaScriptで、要素 DOM の存在確認をする方法がたくさんあるので迷うけど、結論としては、

document.getElementById("id") != null

でチェックのが速くて良いみたい。

コード 速度
document.getElementById("id") != null 0.019ms
$("selector")[0] 0.033ms
$("selector").get(0) 0.040ms
$("selector").size() 0.041ms
$("selector").length 0.069ms
$("selector").is("*") 0.169ms

・引用元:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき はてなブックマーク - [JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき

jQueryによる要素の存在チェックまとめ: 小粋空間 はてなブックマーク - jQueryによる要素の存在チェックまとめ: 小粋空間

[JavaScript]スクロールしたときにサイドバーのパーツをjQueryで止める方法

JavaScript や jQuery を使って、スクロールしたときにサイドバーのパーツを止める方法が紹介されている記事をメモ。

スクロールしたときにサイドバーのパーツをjQueryで止める方法: 小粋空間 はてなブックマーク - スクロールしたときにサイドバーのパーツをjQueryで止める方法: 小粋空間

ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん!(Hatena) はてなブックマーク - ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん!(Hatena)

[jQuery] Proxy Pattern を使ってメソッドをオーバーライド

jQuery にて、Proxy Pattern というデザインパターンを使って alert メソッドをオーバーライドする方法を調べたのでメモ。

(function() {
  var proxied = window.alert;
  window.alert = function() {
    // ここに処理を追加する
    return proxied.apply(this, arguments);
  };
})();

以上です。

参考情報

Types – jQuery JavaScript Library はてなブックマーク - Types - jQuery JavaScript Library

override – JavaScript: Overriding alert() – Stack Overflow はてなブックマーク - override - JavaScript: Overriding alert() - Stack Overflow

必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目) | Ginpen.com はてなブックマーク - 必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目) | Ginpen.com

[jQuery] カンタンにDialogを表示できる「ThickBox」の使い方・参考記事まとめ

jQuery の ThickBox を使うときの参考記事をまとめてみました。

基本的には公式サイトを読めばOKです。

・公式(英語):ThickBox 3.1 はてなブックマーク - ThickBox 3.1

英語が苦手な方は日本語の参考サイトを読んで、ざっくり使い方を理解してから公式サイトを読むといいかもしれません。

jQuery版のLightBox「ThickBox」[to-R] はてなブックマーク - jQuery版のLightBox「ThickBox」[to-R]

今更ながらjQueryのプラグインThickBox3.1 – Webtech Walker はてなブックマーク - 今更ながらjQueryのプラグインThickBox3.1 - Webtech Walker

以上です。

[jQuery] 時刻をカンタンに入力できるライブラリ「ClockPick」が便利!

時刻をカンタンに入力できる jQuery ライブラリ「ClockPick」が便利だったので、使い方をメモ。

jNathanson.com | the interwebs home of josh nathanson はてなブックマーク - jNathanson.com | the interwebs home of josh nathanson

■ js/css ファイルの設置

上記、サイトから「jquery.clockpick.1.2.9.min.js」と「clockpick.1.2.9.css」をダウンロードして、設置します。
 

■ CSS ファイルの書き換え

デフォルトだとフォントサイズが 9px と小さくて見にくいので、18pxに変更します。

.CP_hour と .CP_minute でフォントサイズを指定してる箇所をそれぞれ変更。
 

■ JavaScript

よく使う 24時間表記、5分刻みで選択できるような設定にしました。

<script type="text/javascript">
  $(function(){
    $("#start_time").clockpick({
      starthour: 0,
      endhour: 23,
      showminutes: true,
      minutedivisions: 12,
      military: true
    });
  });
</script>

 

■ HTMLソース

<input type="text" name="start_time" id="start_time" />

 

■ オプション

 ・starthour:開始時間(デフォ8)
 ・endhour:終了時間(デフォ18)
 ・showminutes:分の表示(デフォTrue、False)
 ・minutedivisions:分の刻み(デフォ4)
 ・military:AM/PMの表記(デフォFalse、True)
 ・event:時間の出し方(デフォClick、Mouseover)
 ・layout:時間の表示方法(デフォvertical、Horizontal)

以上です。

【参考】

時間の入力支援javascript「ClockPick」|skuare.net はてなブックマーク - 時間の入力支援javascript「ClockPick」|skuare.net