カテゴリー別アーカイブ: ｊQuery

　jQueryのAJAX実装をすると、通常、通信が戻ってくるのを待たずに次の処理に進んで、通信の結果はコールバックで処理するよね。

function getResponse(url, parameters, target){
  jQuery.post(url, parameters, function(response){
    for(i in response){
      $(target).html(response[i]);
    }
  });
}

みたいな感じね。

　でも、この処理をまたどこからか呼び出していて、呼び出し元で、この通信が終了している必要がある場合（たとえばappendした結果に対して何か処理したいとか）、普通に

getResponse(‘http://hoge.tld/piyo.php’, {‘request’:’getMessage’}, ‘#targetArea’);
alert($(‘#targetArea’).html());

とかすると、getResponseは要求を作っただけで戻ってきてしまうので、alertの中身は空っぽ、みたいな事になる。
で、これに対応するためにどうするかというと、jQueryのDeferredを使うと良いようだ。

ファンクションの方は

function getResponse(url, parameters, target){
  var def = jQuery.Deferred();
  jQuery.post(url, parameters, function(response){
    for(i in response){
      jQuery(target).html(response[i]);
    }
    def.resolve();
  });
  return def.promise();
}

みたいな感じで、Deferred.promise()を戻すようにする。
AJAXの戻り値を待つ必要がない既存のコードは、特に何も変えなければそのまま動く。　そして、先のように待機する必要がある場合のコードでは、

jQuery.when(
  getResponse(‘http://hoge.tld/piyo.php’, {‘request’:’getMessage’}, ‘#targetArea’)
).done(
  function(){
    alert($(‘#targetArea’).html());
  }
);

みたいな感じにすると、getResponseが返したDeferredがresolveを実行次第doneの中身が呼び出される。
done()は、Deferredにバインドしている形なので、

jQuery.when(
  getResponse(‘http://hoge.tld/piyo.php’, {‘request’:’getMessage’}, ‘#targetArea’)
).done(
  function(){
    alert($(‘#targetArea’).html());
  }
);
window.close();

みたいにすると、表示してから閉じると言う動きにはならず、すぐ閉じてしまう。

なお、失敗時のために、resolve doneの組み合わせに対して、reject failがある。。

jQuery.when( asyncFunc() ).done( trueFunc() ).fail( failFunc() );

みたいにすれば、asyncFunc()の返したDeferredでresolve()が実行されればtrueFunc()を、reject()が実行されればfailFunc()が実行されるようになる。

　ファンクションが何かの値を戻していた場合、普通に書き換えるとDeferredを戻さなくてはならなくなると言う問題があるが、resolve/rejectに引数として与えると、done/failの引数として引き継がれる。

function getResponse(url, parameters, target){
  var def = jQuery.Deferred();
  jQuery.post(url, parameters, function(response){
    for(i in response){
      jQuery(target).html(response[i]);
    }
    def.resolve(response.length);
  });
  return def.promise();
}

jQuery.when(
  getResponse(‘http://hoge.tld/piyo.php’, {‘request’:’getMessage’}, ‘#targetArea’)
).done(
  function(len){
    alert(len + ‘:’ + $(‘#targetArea’).html());
  }
);

みたいな感じ。

whenはDeferredを複数くっつけるための物なので、1個の実行を待つだけならDeferredを戻すファンクションに対して、 asyncFunc().done(trueFunc()) 的な呼び出しでも良いっぽい。

(10587)

Tweet

<form name=’test’>
<input name="picture_file" type="file" >
</form>

　こんな感じのファイルアップロードフォーム（インプットタグ）を用意して、ファイルをアップロードさせる時に、タグの属性（accept）でファイル形式（拡張子）を設定できるけど、ブラウザ依存なんで、JavaScriptでアップロードファイル名の拡張子をチェックしたい時の開発パーツ（jQuery利用）

<form name=’test’>
<span id=’picture_file_span’><input name="picture_file" type="file" id="picture_file" onchange="extchk(‘picture_file_span’, $(this).val());"></span>
</form>

<script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’></script>
<script type="text/javascript">
    function extchk(id, fn){
        var fnsplt = fn.split(".");
        var ext = fnsplt[fnsplt.length – 1];
        switch(ext.toLowerCase()){
            case "jpg":
            case "jpeg":
            case "gif":
            case "png":
                return true;
                break; //未到達コード
            default:
                alert(‘未対応のファイル形式です’);
                jQuery(‘#’+id).html(jQuery(‘#’+id).html());
                return false;
                break; //未到達コード
        }
    }
</script>

　ファイルインプットタグの変更イベントで、設定したファイル名の拡張子がcaseに列挙されていればtrue,それ以外はアラートメッセージを出してファイルインプットをクリアした上でfalseを返している（IEではfile inputタグのvalをクリアすることは出来ないので、inputタグをspanで括って、中身を書き直すことでクリアしている）
　最初、jQueryでバインドしたが、htmlの差し替えでファイルインプットをクリアするとバインドが解除されるので、タグのonChangeに載せている。
　ファイルの中身を確認しているわけではないけど、簡単なチェックにはなるからWeb開発時に使い回せるだろう。

テストページ

ソースの整形にはHTML特殊文字をエンコードする on さくらVPSを利用している。

(2323)

Tweet

　数値だけしか入力できないINPUT type=textタグを用意したいことがある。
　簡単に実装する場合は、該当のINPUTタグからフォーカスが外れる時に数字以外を削除してしまうのが良いだろう。

　そんなわけで、そのようにしたjQueryコード

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’></script>
<script>
    $(document).ready(function(){
        $(".numberonly").blur(function(){
            var str = $(this).val();
            $(this).val(str.replace(/[^0-9]/g, ""));
        });
    });
</script>

　blurイベントはfocusが外れた時。
　で、正規表現で[0-9]以外を消している。
　class=numberonlyにバインドしているので、

<input type=’text’ name=’zip1′ class=’numberonly’>-<input type=’text’ name=’zip2′ class=’numberonly’>

みたいに、郵便番号欄を半角数字に限定するみたいな動きをさせたり？

(2632)

Tweet