タグ別アーカイブ: jQuery

jQueryを使った確認アラート表示

管理ページなどで情報を削除する際など、確認のアラートボックスを表示したい時があると思います。
これはjQueryを使うと簡単に実装することができます。

» デモページ

<!DOCTYPE html>
<html>
  <head>
  	<title>【デモ】jQueryを使った確認アラート表示</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </head>
  <body>
	  <p><a class="confirm" href="./del.php">データを削除</a></p>
	  <p style="color:#aaa;">※デモなのでリンク先ページが開くだけです</p>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
		$(".confirm").on('click', function(){
			if(window.confirm("データを削除しますがよろしいですか?")) {
				location.href = $(this).attr('href');
			} else {
				return false;
			}
		});
      });
    </script>
  </body>
</html>

解説

11行目でjQueryを読み込んでいます。今回はGoogleのCDNを使いました。

12行目から22行目がアラートボックス表示に関する部分です。
クリックイベントに対して定義してます。
クラスを指定することで複数のリンクがあった場合にも対応できるので便利です。
「データを削除しますがよろしいですか?」というメッセージを表示し、OKであればリンク先のページを開き、キャンセルであれば何もしないという指示を書いてます。

用途によってはフォームの送信前に最終確認メッセージを表示するなどいろいろな使い方ができると思います。

ちょっとした部分ですが、ユーザビリティをアップしヒューマンエラーを減らす効果があると思います。
目立つ部分ではないですがこんな気遣いがクオリティアップの一つになるので大切にしたいものですね。

jquery-1.10.2.min.mapが404 Not Found

fuelphpを使っていて謎のエラーが出ていたのを解決したので同じ問題を持った人のために記事にします。

そのエラーはjquery-1.10.2.min.mapが404 Not Foundというエラーでした。
そんなファイルを読み込んだ覚えもないし。。。と思いjsを読み込んでいる部分をのぞいてもそれっぽいのがない!

jqueryがらみなのは間違いなさそうだったので/assets/js/jquery.jsを確認すると、一番はじめに次のようなコメントが書かれていました。

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

ん〜ソースマップのURLが書かれてますね。。。

原因はこれなので、サクッと1行削除して

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
*/

とするとエラーは消えます。
もしjquery.jsの変更をしたくない場合は、jquery-1.10.2.min.mapをjquery.jsと同じフォルダに置いてあげるとOKです。

上記の例の場合は以下のリンク先のファイルを配置することでエラーが無くなりました。
» jquery-1.10.2.min.map

上記のようにソースマップを同じ場所に置くことで解消されますが、ソースマップに対応したブラウザだとソースマップのファイルを読み込むために1リクエスト余計なアクセスが増えることになります。
「1行消す」か「ソースマップを配置する」かはお好みに応じて対処してください。

補足

このソースマップのURLの記述はどうやらjQuery1.9から追加されたようです。
ソースマップについて詳しく知りたい方や、ソースマップ対応されていることでどんなメリットがあるかについては、以下のURLにわかりやすい説明があります。
» [てっく煮ブログ]jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

ちなみに、現在ソースマップに対応しているブラウザはGoogleChromeのみのようです。
Firefoxも対応してきているようですが、まだ不十分のようです。
以下の記事にそのことが書かれてました。
» [terurouメモ] Firefox 23でSource Mapsが実装されたみたいだけど、まだちゃんと動いてない?

今回の私のケースはfuelphpでしたが少し古いwordpressを使っている場合にも同様のエラーが出るケースがあったようです。
» [設定やツールとか]WordPress 3.6でjquery-1.10.2.min.mapのエラー

WordPress 3.6だと、jquery-1.10.2.min.mapのエラーが出る。原因はWordPressで使っているjquery.jsのヘッダー記述の問題。
WordPress 3.6.1でこのバグが修正された。3.6.1以降を使っていればこの問題はおきない。

とのことです。

同様のエラーが出た人の参考になれば幸いです。