カテゴリー別アーカイブ: jQuery

jQueryで非同期処理の完了を待つ(jQuery.Deferred())

 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()) 的な呼び出しでも良いっぽい。

(3359)


カテゴリー: jQuery | コメントをどうぞ

jQueryでページから離脱する際に確認メッセージを表示する

 Wordpressなんかそうだけど、投稿画面で入力中にページ移動しようとすると確認メッセージが出る。
 愛用しているThinkPadも、カーソルキーの上キーの左右がページ前後移動キーになっているので誤って押したり、マウスのスイッチで入力中にページ移動してしまって入力したフォームが消えてしまうアクシデントがあるので、この角にメッセージが出るのはなかなか便利。

 これを自分のページに実装するのは簡単で、

$(window).bind("beforeunload", function(e) {
    return "入力内容はまだ保存されていません、ページ移動しますか?";
});

のようにして、メッセージをreturnすると、その内容を表示したポップアップが出てくれる。 AlertとかConfirmとか書いてもChromeには無視された。

 このままだと常時出てしまうので、登録ボタンを押した場合にはメッセージを表示しないようにするために、

<input type=’submit’ onclick=’javascript:$("body").append("<input type=\"hidden\" name=\"no_unload_confirm\" value=\"1\">");’>

みたいにsubmitボタンのonclickで正常動作フラグを立てて

$(window).bind(‘beforeunload’, function(evnt){
    if(!$(‘input[name=no_unload_confirm]’).val()) return ‘入力内容はまだ保存されていません、ページ移動しますか?’;
});

みたいにフラグが立っているかチェックするようにすれば良い。

(107)


カテゴリー: jQuery | タグ: , | コメントをどうぞ

jQuery uploadがFirefoxで構文エラーをはいて転ける

 jQuery.upload(http://lagoscript.org/jquery/upload) 1.0.2のminified版を入れたら転けた。 Firefoxだけこけた(V.14.0.1)

h=”jquery_upload”+ ++p;

っていう記述があって、IEとChromeは正常に処理するんだけど、Firefoxは

h=”jquery_upload”+++p;

って解析していた。 +みっつ。

そんなわけで、

h=”jquery_upload”+(++p);

に書き換え。

ほんとにちょいメモだけどこれ大事。
ChromeやIEで普通にロードして普通に動いていたけど、ふとした機会にFirefoxで表示したら見事に構文エラーになって転けてページ全体死んでいた。

(60)


カテゴリー: jQuery | タグ: , | コメントをどうぞ

jQueryパーツ、ページを内部で自動リロードさせる

 jQueryでページの一部をリロードさせる。
 一発表示するだけのページを定期監視する為のスクリプト。

<html>
    <head>
        <meta http-equiv=’Content-Type’ content=’text/html; charset=UTF-8′>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="utf-8"></script>
        <script type="text/javascript">
        <!–
        $(document).ready(function(){
            var loading = setInterval(reload, <?php echo("$_GET[‘interval’]"); ?>*1000);
            function reload(){
                $("#loading").html("now loading…");
                $.get("<?php echo("$_GET[‘url’]"); ?>", {}, function(page){
                    $(‘#page’).html(page);
                    $("#loading").html("&nbsp;");
                });
            }
            
            reload();
        });
        // –>
        </script>
    </head>
    <body>
        <span id="loading">&nbsp;</span>
        <hr>
        <div id="page"></div>
    </body>
</html>

PHPファイルとして保存して、http://hoge.tld/file.php?url=/log.txt&interval=30 みたいにリクエストすれば、/log.txtを30秒ごとに更新表示できる。

(525)


カテゴリー: jQuery | タグ: , | コメントをどうぞ

jQueryでテーブル組を変換する[2カラムのテーブルをばらして、スマホ向けにしてみる]

 PC版のサイトでよく使う基本的なテーブルスタイルとして

<table>
<tr><th>件名</th><td>お知らせ</td></tr>
<tr><th>送信者名</th><td>hoge@piyo.tld</td></tr>
<tr><th>メッセージ本文</th><td>こんにちわ、これはテスト用のメッセージです。<br>ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。</td></tr>

</table>

件名 お知らせ
送信者名 hoge@piyo.tld
メッセージ本文 こんにちわ、これはテスト用のメッセージです。
ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。

 みたいなテーブルがあると思うけど、スマホとかで表示すると(Width600px)

 みたいな感じになって、TDが狭くなっちゃって見にくくなるんで、THをHタグにして、その下にTDを入れるようにJavaScriptで変換してみる(テーブルをはき出すスクリプトを変えれば良いんだけど、PCとスマホでテンプレを変えないと言う変わったケースに対応)

jQueryを使って

$(document).ready(function(){
    if($(window).width()<=720){
        $(‘table’).each(function(){
            var breaked = "";
            $(‘tr’, this).each(function(){
                breaked += "<h3>"+$("th", this).html()+"</h3><p>"+$("td", this).html()+"</p>";
            });
            $(this).before(breaked);
            $(this).remove();
        });
    }
});
</script>

みたいなJSを書いてみた。 UserAgentで識別せずに、開いたときのウィンドウのサイズが720ピクセル以下の場合にH3/Pタグに書き換えるようにしてみた。
 すると・・・

 こんな感じに仕上がって、縦長、横短のスマホ画面向けな感じにイフェクトできた。 セレクタにtableタグを使っているけど、thとtdが1個ずつの2カラムテーブル専用に書いてあるから、2カラムテーブルを明示するクラスなどをつけた方がいいかな。

テストページ (ウィンドウサイズを変えてリロードしてみると、720ピクセル以下とそれより大きい場合で見え方が変わる。 $(window).resizeを使えば、ウィンドウをリサイズしたときにうにょうにょ変わるということもできるだろう)

(69)


カテゴリー: jQuery | タグ: , | コメントをどうぞ

JavaScript/jQueryでファイルアップロードフォーム(インプットタグ)の拡張子を確認する

<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を利用している。

(893)


カテゴリー: jQuery | コメントをどうぞ

jQueryで開発、テキストフィールドから数字以外を削除する

 数値だけしか入力できない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’>

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

(867)


カテゴリー: jQuery | コメントをどうぞ