TopJavaScriptjQuery > 2012年12月
2012年12月21日

jQueryでセレクトボックス(プルダウンメニュー)のテキストを取得する

December 21,2012 7:55 AM
Tag:[]
Permalink

jQueryでセレクトボックス(プルダウンメニュー)のテキストを取得する方法を紹介します。

1.問題点

次のようなセレクトボックス(プルダウンメニュー)を用意します。

HTML

<select id="foo" name="foo">
  <option value="aaa">xxx</option>
  <option value="bbb">yyy</option>
  <option value="ccc">zzz</option>
</select>

jQueryを使ってセレクトボックスを変更したときに値「aaa」「bbb」「ccc」を取得するには、次のように記述します。

jQuery(function() {
    jQuery('#foo').change(function(){
        var data = jQuery(this).val();
        alert('セレクトボックスの値は「' + data + '」です');
    });
});

ただし、セレクトボックスを変更したときに、テキスト「xxx」「yyy」「zzz」を取得する場合、上記のサンプルにある「val()」を「text()」に変更しただけでは取得することはできません。

…前略…
        var data = jQuery(this).text();
…後略…

2.セレクトボックスのテキストを取得する

セレクトボックスのテキストを取得するには、text()の前に「:selected」を加えます。

jQuery(function() {
    jQuery('#foo').change(function(){
        var data = jQuery(this + ':selected').text();
        alert('セレクトボックスのテキストは「' + data + '」です');
    });
});

find()を使った方法でも取得できます。

…前略…
        var data = jQuery(this).find(':selected').text();
…後略…
Comments [0] | Trackbacks [0]
2012年12月11日

jQueryのgetJSON()でエラーをハンドリングする

December 11,2012 12:55 AM
Tag:[, ]
Permalink

jQuery.getJSON()でエラーをハンドリングする方法を紹介します。

1.はじめに

JSONの取得でエラーをハンドリングにはjQuery.ajax()を利用するか、googleで公開されているjquery-jsonpプラグインを利用するといった先入観がありましたが、公式サイトのドキュメントを読むと1.5からサポートされているようで、まったく気がついてませんでした。

jQuery.getJSON()

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.getJSON() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), it provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback.

jQuery関連の書籍を購入すればこういう情報は既知の内容かもしれませんが、ネットでは日本語リファレンス系サイトのコンテンツが古かったりなど、今回紹介するような情報がうまくみつけられません。

2.エラーをハンドリングする

ということで、getJSON()でエラーをハンドリングするサンプルを掲載しておきます。ハンドリングのお作法はjQuery.ajax()と同じです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$.getJSON("example.json", function() {
    console.log("実行");
})
.success(function(json) {
    console.log("成功");
})
.error(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
})
.complete(function() {
    console.log("完了");
});
</script>

サンプルコードでお分かりのとおり、エラーだけでなく、成功時・完了時もjQuery.ajax()と同様、ハンドリングすることが可能です。

成功時のFirefoxコンソールログ
成功時のFirefoxのコンソールログ

失敗時のFirefoxコンソールログ(jqXHR.responseTextは省略)
失敗時のFirefoxのコンソールログ

1.6以降であれば、done()、fail()、always()が適用可能です。

$.getJSON("example.json", function() {
    console.log("実行");
})
.done(function(json) {
    console.log("成功");
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
})
.always(function() {
    console.log("完了");
});

getJSON()の第2パラメータのコールバックは、上のスクリーンショットでお分かりのとおり、エラー時には実行されません。不要であれば以下でもよいかと思います。

$.getJSON("example.json")
.done(function(json) {
    //... 
})
.fail(function(jqXHR, textStatus, errorThrown) {
    //...
})
.always(function() {
    //...
});

3.getJSON()の結果をjqXHRに保存する

getJSON()の結果を変数jqXHRに保存して、ハンドラメソッドを独立して定義することも可能です。

var jqXHR = $.getJSON("example.json", function() {
    console.log("実行");
});
jqXHR.done(function(json) {
    console.log("成功");
});
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
});
jqXHR.always(function() {
    console.log("完了");
});

1項と同様、getJSON()の第2パラメータのコールバックはエラー時に実行されません。不要であれば以下でもよいかと思います。

var jqXHR = $.getJSON("example.json");
…後略…

4.参考サイト

参考サイトは以下です。ありがとうございました。

Error handling in getJSON calls
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3