※スマホ対応はしてません。

タグ: jQuery

DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。(DOMおれおれAdvent Calendar 2015 – 24日目)

カテゴリー: JavaScript

DOMおれおれAdvent Calendar 2015 – 24日目

最終日です。

2015-12-24

jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。

$(selector) → document.querySelectorAll(selector)

これが一番基本ですね。

(さらに…)

意識の低いモジュールっぽい設計の話。(JavaScriptおれおれAdvent Calendar 2014 – 23日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 23日目

Model-Viewなライブラリーとか一切なし、サーバー側出力HTMLにjQueryから操作してあれこれする話です。だいたい同じものが繰り返し出力されてる想定。

モジュールという呼び方で良いんだろうか。

モジュールの構成

例えばこんな感じ。商品一覧みたいな。

  • div.js-list
    • article.js-item[data-id=”1″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”2″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”3″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • (以下繰り返し)

機能

  • 各モジュールの.js-toggleクリックで、その領域を開閉する
  • 各モジュールの.js-form送信で、その購入画面へ遷移する

モジュールとして実装

.js-toggleクリックなんで、まずはこう。

$('.js-toggle').on('click', function(event) {
    // …
});

で、ここから「モジュール」を認識する。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // …
});

あとはモジュール単位に処理。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // 開閉
    // (このモジュール内の詳細要素を対象にする。)
    var $detail = $item.find('.js-detail');
    $detail.toggleClass('is-hidden');
});

フォームの方はvar id = $item.attr('data-id');でID取得して、次の遷移先URLを構築する。(今回の例だと普通にフォームで移動したら終わりっぽいけど。)

とまあそんな場面もあります

サーバー側からクライアント側への過渡期っぽい実装。

jQueryの要素移動(Traversing)関係の機能はあんまり使わないんだけど、こういう実装するときはclosest()とfind()だけ使ってます。

jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。(JavaScriptおれおれAdvent Calendar 2013 – 02日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2013 – 02日目

チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。

検証

(さらに…)

jQuery(document).height()がIEでうまく動かない場合があるそうで。ちょっとだけ大きい値になるんだと。

カテゴリー: JavaScript

そんな噂を聞きつけ高さ取得処理のコードを覗いてみると、コメントが。

// Get document width or height
if ( elem.nodeType === 9 ) {
    doc = elem.documentElement;

    // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
    // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
    return Math.max(
        elem.body[ "scroll" + name ], doc[ "scroll" + name ],
        elem.body[ "offset" + name ], doc[ "offset" + name ],
        doc[ "client" + name ]
    );
}

「scroll[Width/Height]やoffset[Width/Height]、client[Width/Height]はいずれも実に実に残念な事に、IE 6/8において不具合 #3838 の原因となるが、適切で簡潔な修正方法は今のところない。」

どんな不具合かというと

When the document is smaller than the window, $(document).height() returns a value that is slightly larger than the window.

「文書がウィンドウより小さい場合、$(document).height()がウィンドウよりちょっとだけ大きい値を返す。」

ここでいう文書はbody、ウィンドウはdocumentの事と思われ。

で、修正がちょいと入ったりもしたけれど

Resolution: set to wontfix See #11724. Firefox 12 > IE 6

This reopens #3838 for IE6 which is a regression on a fix in 1.7.2, but we’d rather break a really old IE than a really recent Firefox.

「1.7.2の修正で戻されたIE 6向けの不具合 #3838 がreopenされたけど(?)、最新版のFirefoxで駄目になるくらいなら古いIEで駄目な方が良いでしょ。」

という事で

Fine. Whatever. PUNK!

「いいね。どっちでも。\ちゅどーん/」

ちゃんちゃん。

英語はあまり自身ないし、実際の環境でずれる事は確認してません。

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。

カテゴリー: JavaScript

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。

フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。

基本的な流れ

  1. フォームのsubmitを拾う
  2. 通常の送信はキャンセル
  3. 送信ボタンを無効化
  4. 送信先URLやフォームの入力値を取得
  5. 送信
  6. 受信後、送信ボタンを戻す

入力値をどう得るか、というのがポイントかと思います。

送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。

デモ

なんかお問い合わせフォーム的なものを用意しました。

まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

(さらに…)