Access-Control-Allow-Origin ヘッダーに見つかりません。

異なるドメインから利用される Webサービスは、アクセスを許可するドメインをAccess-Control-Allow-Origin ヘッダーで制限できます。

どのドメインからでもアクセスを許可するには

Access-Control-Allow-Origin: *

ドメインを http://www.northwind.mydns.jp に限定するには

Access-Control-Allow-Origin: http://www.northwind.mydns.jp

Access-Control-Allow-Origin の指定がない場合は同一ドメインのみアクセス可となります。つまり、他のドメインからアクセスした場合、「Access-Control-Allow-Origin ヘッダーに見つかりません。」となります。

PHPでヘッダを書き出すには

header("Access-Control-Allow-Origin: *");

と1行追加で対応できます。

jQuery UI DatePickerの選択イベント

jQuery UI Datepicker で日付を選択した時に何かをしたい。そんなときは select イベントを使います。

以下の例では、選択された日付を表示しています。

jQuery(document).ready(function() {
    $( "#datepicker" ).datepicker({
        inline: true,
        onSelect: function (date) {
            alert(date);
        }
    });
});

...

<div id="datepicker"></div>

jQuery UI タブの選択イベント

別館サイトの jQuery ライブラリをアップデートした際に、jQuery UI タブが期待通りに動作しなくなったのですが、実務でも対応する必要がでたので対処方法を紹介します。

タブが選択された時のイベント処理で何かをする場合は jQuery UI 1.10 より以前のバージョンではこのように出来ていました。
ここでは例として jqGrid を再読み込みしています。

$("#tabs").tabs({
    select: function(event, ui) {
        if (ui.index == 0) {
            $("#grid1").trigger("reloadGrid");
        } else if (ui.index == 1) {
            $("#grid2").trigger("reloadGrid");
        }
    },
    heightStyle: "fill"
});

これを、以下のように変更します。

$("#tabs").tabs({
    activate: function(event, ui) {
        var index = ui.newTab.index();
        if (index == 0) {
            $("#grid1").trigger("reloadGrid");
        } else if (index == 1) {
            $("#grid2").trigger("reloadGrid");
        }
    },
    heightStyle: "fill"
});

select イベントは activate になり
ui.index は ui.newTab.index() 関数となっています。

動作確認:
http://www.northwind.mydns.jp/samples/tab_sample2.php

jqueryとjquery-uiの簡単導入

jQuery / jQuery UI の使用方法について jqGrid を試してみる(導入編) でふれましたが、最新の jQuery は少しファイル構成が変わっているので、jQuery 1.11.2 / jQuery UI 1.11.2 で再度わかりやすくまとめました。

1. jQuery 1.11.2 のダウンロード

http://jquery.com/download/ から ”Download the compressed, production jQuery 1.11.2” リンクを右クリックして「名前を付けてリンク先を保存」でローカルにダウンロードします。デフォルトで jquery-1.11.2.min.js という名前でダウンロードされます。

2. jQuery 1.11.2 のダウンロード

http://jqueryui.com/download/ から :

  • “Version” のセクションより、1.11.2 (Stable, for jQuery1.6+)を選択
  • “Components” のセクションより、Toggle All を選択
  • “Theme” のセクションより、Redmond を選択(※お好きなものを選らんで下さい)
  • Download ボタンをクリック

デフォルトで jquery-ui-1.11.2.custom.zip という名前でダウンロードされます。ダウンロードが完了したら展開します。
展開すると以下のフォルダおよびファイルがあります。

    + external
    + images
    index.html
    jquery-ui.css
    jquery-ui.js
    jquery-ui.min.css
    jquery-ui.min.js
    jquery-ui.structure.css
    jquery-ui.structure.min.css
    jquery-ui.theme.css
    jquery-ui.theme.min.css

3. サイトへ配置

以下のファイルおよびフォルダをサイトへ配置します。ここでは例として /var/www/html/jqdemo/lib へ配置します。

  • jquery-1.11.2.min.js
  • 展開した jquery-ui-1.11.2 から imagesフォルダ、jquery-ui.min.js、jquery-ui.min.css

4. テスト準備

jquery-ui-1.11.2.custom.zip 中にあった index.html に下記の変更を行い、/var/www/html/jqdemo へ配置します。

6 行目
<link href="lib/jquery-ui.min.css" rel="stylesheet">

394-395 行目
<script src="lib/jquery-1.11.2.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>

5. 動作確認
http://www.northwind.mydns.jp/dev/jqdemo/index.html

jQuery 1.x vs. jQuery 2.x

jQuery を始めて使う場合、jQuery 1.x と jQuery 2.x のどちらをダウンロードすれば良いか?という疑問があるのではないですか?

jQuery ダウンロードサイトを参考にすると、

jQuery 1.x の最新版は 1.11.2 (2015/1/2 現在) です。1.9.0 で大きな変更があり、バージョン 1.9 以前のjQuery をお使いでバージョンアップするには jQuery Migrate Plugin (jQuery 移行プラグイン)を使用することが推奨されています。

jQuery 2.x の最新版は 2.1.3 です。こちらバージョンは jQuery 1.x と同じAPIを提供しているが、IE6, 7, 8 をサポートしていない点が異なります。IE8以前のサポートを考慮する必要がある場合は jQuery 1.x を使用することが推奨されています。

ということで、初めてjQuery を導入される場合、IE8以前をサポートするかどうかです。

ちなみに、当サイトでは、以前にjQuery 1.11.0 へバージョンアップしてを使用しています。