シェアする

  • このエントリーをはてなブックマークに追加

ajaxなボタンでDOMな仕組みをjQueryした

terminalアイキャッチ画像

こんにちは かねしろ@pinkrootです。

今日はボタンをクリックするとリロード(再読み込み)無しで画面内の数値を書き換える処理を書きました。 ajaxな動きです。 DOMとか言うらしいですが、よく分からないです。 唯一分かるのはjQueryを使っていることくらい。 なので、このようなエントリタイトルになってます(笑)

ぐぐってみるとDOMとはこんな感じらしいです。 wikipedia – Document Object Model 読んだけど曖昧な理解。。。 ここ読みこめば理解できるそうなので、後ほど取り組みます。

とりあえず使い方だけ備忘録。

HowTo

自分で作成するファイルは以下の2つ。

  • ユーザが閲覧してボタンを押す画面(index.html)
  • ボタンが押されたら呼び出されるjavascriptファイル(myFunc.js)

上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となります。 ここから1.7.2のMinifiedをダウンロードして使いました。 ダウンロードしてきたjquery-1.7.2.min.jsと自作のpost.jsはjsディレクトリを作成し、その中にまとめて置きました。

.ProjectDirectory
  index.html
  .js
    jquery-1.7.2.min.js
    myFunc.js
というようなディレクトリ構成。

index.html

index.htmlのコードは以下の通り。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./js/myFunc.js"></script>
</head>

<body>
  <table id="myTable">
    <tr id="button1">
      <td><input type="submit" name="submit" value="右の値を増やす" onclick="addFunc(1);"></td>
      <td class="num">0</td>
    </tr>
    <tr id="button2">
      <td><input type="submit" name="submit" value="右の値を増やす" onclick="addFunc(2);"></td>
      <td class="num">0</td>
    </tr>
  </table>
</body>
</html>

ボタンがクリックされると、ajaxな仕組みのための関数(addFunc)が呼び出されます。 今回は引数としてボタンのナンバーを渡してあります。 この引数の意味や使い方についてはmyFunc.jsの説明時にしっかりと行いますね。

なお、このajaxな仕組みについてはPHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみたの方で詳しく説明してあります。 上記の記事を読むことで、以下のjsの動作についても理解が深まるはずです。

myFunc.js

myFunc.jsのコードは以下の通り。

function addFunc(id){
  $.post("", {}, function(json){
    var elm = $("#button" + id + ">.num");
    var count = elm.text();
    elm.fadeOut("normal", function(){
      elm.text(++count);
      elm.fadeIn("normal");
    });
  });
}

まず、ajaxな動作なのでaddFuncの$.post()が動き出します。 第一引数の部分は値をPOSTする先のファイルなのですが、今回は特に値を何かに格納する必要はないので、空にしてみました。第二引数は渡す値なのですが、こっちも空で。 # 何かに渡すケースについては、こちらの記事を読むと参考になるはずです。

さて、$.postが動き出すと、その中にあるfunction(json)が働き始めます。 この中では、まず変更する値を特定するため、elmという変数を定義します。 受け取ったidを#buttonという文字列にくっつけるため、#button1か#button2かが判定できます。 そのあとにあるのが、numというクラスです。 これはHTMLを見てもらえば分かりやすいと思いますが、idがbutton1(もしくはbutton2)のtrに対して、子要素であるtdの中にあるnumクラスを指定している、という形になっています。 ここまでで、書き換えを行う値の場所を特定したことになります。

次の行

var count = elm.text();
では、先ほど指定した箇所(elmに格納したnumの場所)に、「現状で書かれている文字列(数字)」を取得するという処理が行われます。 初期状態では0が入っているので0がcountに代入されますし、加算後であればその数値が格納されることとなります。

elm.fadeOutでは、elmで指定した箇所をフェードアウト(徐々に消える)して、その中のfunctionを呼び出します。 中のfunctionでは、countを+1したものをelmの場所に表示し、それをフェードイン(徐々に現れる)で表示して、処理終了です。 先程はelm.text()で現状の文字列を取得しましたが、textのカッコの中に表示したい文字列を突っ込むと、それがサイト上で閲覧できる状態になるわけです。

なお、各ソースはgithubにアップしてあります。 git@github.com:pinkroot/ajax-dom-sample.git

挙動

ページにアクセスすると以下の様なボタンと、数値が見えます。

DOM初期状態

このボタンのうち、どちらかをクリックすると、ページのリロード無しでボタン横の数値が加算されて再表示されます。 このとき、一度フェードアウトで数値が消え、その後にフェードインで加算された数値が表示されるような挙動となります。

ボタンを1度押した状態

ボタンを押すたび数値が増えるよ!

ボタンを複数回押した状態

この仕組みさえ使えておけば、いろいろな状態で役立てそうですね(`・ω・)

スポンサードリンク

AdSense

AdSense

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] 。 ajaxなボタンでDOMな仕組みをjQueryした(謎) PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です