jqueryの$.getで目当ての外部ファイルを読み込む方法でつまづいてしまいました。


searchファイル
(resultsファイルを非同期通信で読み込むはずなのですが、読み込んでくれません。)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

function getContents(){
var http = $.get("http://localhost/eigazuki/results/title:/time:0%E3%80%9C300/country_id:",null, function(data) {$("#main").html(data);});
}
</script>

<input type="checkbox" name="country_id[]" value="1" id="CountryId1" />日本
<input type="checkbox" name="country_id[]" value="2" id="CountryId2" />アメリカ
<input type="checkbox" name="country_id[]" value="3" id="CountryId3" />アジア

<input type="checkbox" name="genre_id[]" value="1" id="GenreId1" />アクション
<input type="checkbox" name="genre_id[]" value="2" id="GenreId2" />ドラマ
<input type="checkbox" name="genre_id[]" value="3" id="GenreId3" />ホラー

//読み込んだデータが表示される箇所なんですが・・・
<div id="main"></div>

http://anond.hatelabo.jp/20101206224349
このサイトに書かれているとおりに外部のHTMLを読み込む事むjqueryを書いたのですが、全く反応してくれません。
何か間違っているのでしょうか?


回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/04/25 03:21:51
  • 終了:2012/05/02 03:25:03

回答(1件)

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262012/04/25 15:25:26

  • localhostでWEBサーバが立っていない(まずブラウザでそのURLが開けるか確認)
  • そのコードが書いてあるページのURLがlocalhost以外のサイト(クロスドメイン制約によって特別なことをしない限り別サイトのコンテンツをAJAXで読みこむことは出来ません)

あと、まずはブラウザのデバッグコンソールを開いて、そもそも通信が開始されているのか?Javascriptエラーは出ていないか?などを確認したほうが良いです。

id:kyouryukun

ありがとうございます。参考にさせていただきます!

2012/04/27 13:40:33
  • id:Cherenkov
    ブラウザで
    http://localhost/eigazuki/results/title:/time:0〜300/country_id:
    を開くと目当てのファイルが返ってきますか?
  • id:Cherenkov
    $("#main").load('http://localhost/eigazuki/results/title:/time:0〜300/country_id:');とすると?
  • id:kyouryukun
    <script type="text/javascript">
    $("#main").load('http://localhost/eigazuki/results/title:/time:0〜300/country_id:');
    </script>
    としたのですが無理でした。
  • id:Cherenkov
    $(function(){
    $("#main").load('http://localhost/eigazuki/results/title:/time:0~300/country_id:');
    });
    (ローカル)サーバを立てる必要がありますが立ってます?
  • id:kyouryukun
    自分でも調べたんですが、
    $().ready ( function() {
    var http = $.get (
    "http://localhost/eigazuki/results/title:/time:0%E3%80%9C300/country_id:",
    null,
    function ( data ) {
    $("#main").html(data);
    }
    );
    });
    でローカル環境でも読み込んでくれました。
  • id:Cherenkov
    あとはコピペで再現する最小限のコード提示ですかね。
  • id:kyouryukun
    あとは、

    <input type="checkbox" name="country_id[]" value="1" id="CountryId1" />日本
    <input type="checkbox" name="country_id[]" value="2" id="CountrdIs2" />アメリカ
    <input type="checkbox" name="country_id[]" value="3" id="CountryId3" />アジア


    <input type="checkbox" name="dgenre_id[]" value="1" id="GenreId1" />アクション
    <input type="checkbox" name="genre_id[]" value="2" id="GenreId2" />ドラマ
    <input type="checkbox" name="genre_id[]" value="3" id="GenreId3" />ホラー
    でチェックされた項目があるならリアルタイムにvalu値を取得。

    $().ready ( function() {
    var http = $.get (
    //値があれば、それぞれ「1|2|3」という形で代入する
    "http://localhost/eigazuki/results/title:/time:210〜239/country_id:1|2|3/genre_id:1|3",
    null,
    function ( data ) {
    $("#main").html(data);
    }
    );
    });

    こすれば、チェックするだけでresults.phpから一致するデータだけをリアルタイムでしゅとくできるはずなので
  • id:Cherenkov
    それだけではDOM構築後に一度だけ#mainにコンテンツを読み込むだけでリアルタイムに表示を切り替える処理になっていません。
    changeイベントに引っ掛けた処理は他にないのでしょうか?
    ページを開いた後、動的にコンテンツは追加されているがチェックボックスを変化させても「全く反応してくれません」という話?
  • id:Cherenkov
    コピペで動作するコードを提示したほうが早く解決しますよと再びアドバイス。
    getContents()で引数を受け取らずにリクエストURIが固定なのがよくわからないですね。
    (疑似コードとして中途半端に編集して提示しているのか判断できない。)
  • id:kyouryukun
    すいませんが、コピペで動作するコードというのはこれでいいのでしょうか?


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    //チェックされたcountry_idを全て取得
    var Allcoun = new Array;
    $("input[name=country_id[]]:checked").map(function() {
    Allcoun.push($(this).val());
    });

    //チェックされたgenre_idを全て取得
    var Allgen = new Array;
    $("input[name=genre_id[]]:checked").map(function() {
    Allgen.push($(this).val());
    });

    //getContentsを呼び出す
    getContents(Allcoun,Allgen);
    })


    function getContents(Allcoun,Allgen){
    //"http://localhost/eigazuki/results/title:/time:0〜300/country_id:1|2|3/genre_id:1|5",という形にする
    var http = $.get("http://localhost/eigazuki/results/title:/time:0〜300/country_id:" + Allcoun + "/genre_id:" + Allgen,null, function(data) {$("#serviceListSection").html(data);});
    }

    </script>


    国 <br/>
    <input type="checkbox" name="country_id[]" value="1" id="CountryId1" />日本 <br/>
    <input type="checkbox" name="country_id[]" value="2" id="CountrdIs2" />アメリカ <br/>
    <input type="checkbox" name="country_id[]" value="3" id="CountryId3" />アジア <br/>

    ジャンル <br/>
    <input type="checkbox" name="dgenre_id[]" value="1" id="GenreId1" />アクション <br/>
    <input type="checkbox" name="genre_id[]" value="2" id="GenreId2" />ドラマ <br/>
    <input type="checkbox" name="genre_id[]" value="3" id="GenreId3" />ホラー <br/>

    //一致するデータが含まれたファイルを呼び込む
    <section id="serviceListSection"></section>


    http://adult-slider.com/js/slider.js
    http://d.hatena.ne.jp/switchblade/20110131/1296461467
    を参考にしました。
  • id:Cherenkov
    コピペで動かないですね。1|5の形になってないのとchangeイベントにバインドされてないです。
  • id:kyouryukun
    あらためて練り直します。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません