質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.00%

HTMLではないページ先をその場に表示させる方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,599

takato

score 130

前提・実現したいこと

HTMLでjQuery、AJAXを使用して検索先のページをURLを変えずにその場に表示させる機能を実装したいのですが、うまく動きません。

発生している問題・エラーメッセージ

ページが飛んでしまう。飛ぶページ先がHTMLでなく普通のリンク先のためそもそも無理なのか。

ソースコード

<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" href="./css/jquery-ui.min.css">
<script src="./js/jquery.js" charset="UTF-8"></script>
<script src="./js/jquery-1.9.0.min.js" charset="UTF-8"></script>
<script src="./js/jquery-ui.js" charset="UTF-8"></script>
<script src="js/Suggest.js"></script>
</head>
<body>
//ここのリンク先をその場に表示させたいです。現状は,http://(中略)search?car_name=(入力した単語)で検索ページを表示させている
<form method="get"action="http://localhost:8180/api/stock/search?q=" Accept-charset="UTF-8">
<input type="text"  id="ac2"  name="car_name" >
<input type="button" onclick="return test()" value="検索"></form>

</body>
</HTML>
続いて返ってくるJSONデータです。中身の部分は記述を少し変えています。
[ {
  "timestamp" : "2015-11-16T06:44:24.541Z",
  "id" : "51024876",
  "cat_id" : "10066581",
  "first_reg_daytime" : "2015-08-05T02:59:31.000+0000",
  "maker_cd" : "101",
  "maker_name" : "トミー",
  "animal_name" : "ポンタ",
  "nakigoe_name" : "ワン",
  "grade_name" : "カラー",
  "model_num" : "16671",
  "model_name" : "GSJ15W",
  "model_year" : 2012,
  "price" : 3008000,
  "mileage" : 33,
  "color_name" : "black",
 
  "images" : [ {
    "url" : "0705\\20150722A0000705\\51024876LF001.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876IN001.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876RR001.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP014.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP006.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP008.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP010.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP009.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP013.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP011.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP012.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP002.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP001.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP007.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP005.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP003.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP004.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP015.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP020.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP017.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP023.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP018.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876SP026.JPG"
  }, {
    "url" : "0705\\20150722A0000705\\51024876IM001.JPG"
  } ],
  "keywords" : [ "たぬき", "狸", "いぬ" ]
} ]


補足情報(言語/FW/ツール等のバージョンなど)

プログラミング経験半年足らずのため何か誤解している部分があるかと思います。
AJAXを勉強したいのですがおすすめの参考書、ブログ等ありましたら教えてください。グーグル検索で見ていますが、わかりにくい。。。
以前に似たような質問をしましたがどうやら自分の伝え方が、認識誤解があったため質問内容を変え再度質問させていただきます。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

2015/11/18(Thu) 0:30 追記
画像のURL は、バックスラッシュ(¥サイン)ではなくて、スラッシュに変更してください。
Java 動的Webプロジェクトフォルダ構成
ProjectSample/
   WebContent/
       jqueryDemo.html
      images/
           GooH.png
           GooW.png
           ...
      jsondata.txt

TOMCAT6 , macBook , eclipse Luna

<!--

-->
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://www.jsviews.com/download/jsrender.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css">
<script>
$(function() {

    // $.templates テスト
    // alert($.templates);
    // テンプレートエンジン
    // http://www.jsviews.com/download/jsrender.js

    // 通常メッセージ表示用ダイアログ。
    $("#alertDialog").dialog({
        autoOpen: false,
        buttons:[
            {
                text: "閉じる",
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });
    // UI ブロック用モーダルダイアログ
    $("#modalDialog").dialog({
        autoOpen: false,
        modal: true
    });
    // UI ブロック用モーダルダイアログの右上の「❌」ボタンを隠す
    var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close");
    closeButton.css({ "visibility" : "hidden" });

    // @param messages 文字列 or 配列
    function showAlertMessageDialog(messages) {
        if (typeof messages != "string" && typeof messages.splice == "function") {
            messages = messages.join("");
        }
        $("#alertMessage").html(messages);
        $("#alertDialog").dialog("open");
    }


    // @param p - 指定なしのとき、規定のメッセージを表示
    //          - 文字列を指定したとき、それを表示(HTML可能)
    //          - 配列を指定したとき、誤動作確定。
    //          - オブジェクト時、p.img にローディングアイコンなどのgif アニメ画像、
    //          - p.text に文言。
    function showUIBlockDialog(p) {
        if (!!p && typeof p != "string") {
            var tmp = "<span class='uiblock-dialog-content'>";
            if ("img" in p) {
                tmp += "<img src='" + p.img + "' />";
            }
            if ("text" in p) {
                tmp += "<span class='uiblock-dialog-message'>" + p.text + "</span>";
            }
            tmp += "</span>";
            p = tmp;
        } else {
            p = "検索中です、しばらくおまちください。";
        }
        $("#modalMessage").html(p);
        $("#modalDialog").dialog("open");
    }
    // dialog を閉じる
    // @param timerTick 指定なし時は、即閉じる
    //                  60 以下の時、1000 掛けた秒数に変換
    //                  61 以上、そのまま。
    //        指定時間経過後に、メッセージを消去し、ダイアログを閉じる
    // @param closeOnCallback 閉じた時に呼び出すコールバック
    function hideUIBlockDialog(timerTick, closeOnCallback) {

        if (typeof timerTick == "undefined") {
            timerTick = 0;
        } else if (timerTick < 60) {
            timerTick *= 1000;
        }
        setTimeout(function() {
            $("#modalMessage").html("<span></span>");
            $("#modalDialog").dialog("close");
            closeOnCallback();
        }, timerTick);
    }

    // 検索ボタン
    $("#search").button().click(function(e) {
        // UI Block Dialog 表示
        showUIBlockDialog();

        $.ajax({
            url: "jsondata.txt",
            cache: false,
            success: function(data) {
                hideUIBlockDialog(1.5, (function(d) {
                    return function() {
                        var items = null;
                        if (JSON) {
                            items = JSON.parse(d);
                        } else {
                            //eval はかっこつけないとダメだった希ガス
                            items = eval( "(" + d + ")");
                        }

                        var allHtml = [];
                        for (var i=0;i < items.length;i++) {
                            var viewDetails = $.templates("#viewDetails").render(items[i]);
//alert(viewDetails);
                            items[i]["viewDetails"] = viewDetails;
                            var viewBody = $.templates("#viewBody").render(items[i]);
                            allHtml.push(viewBody);
                        }
                        $("#result").html(allHtml.join(""));

                    };
                })(data));
            },
            error: function(x,y,z) {
                alert("何かのエラー");
            }
        });
    });

    // form の submit を殺す
    $("#myForm").on("submit",function(e) {
        e.preventDefault();
        e.returnValue = false;
        return false;
    });
});
</script>
</head>
<body>
<div class="ui-dialog-initializations">
    <div id="alertDialog" title="Alert dialog">
        <p id="alertMessage"></p>
    </div>
    <div id="modalDialog" title="Modal dialog">
        <p id="modalMessage"></p>
    </div>
</div>
<fieldset>
    <legend>参考資料:URLs</legend>
     <p>Dialog:https://jqueryui.com/dialog/</p>
     <p>Button:http://jqueryui.com/button/</p>
     <p>templates: http://www.jsviews.com/#fortag</p>
     <p>じゃんけん画像:http://lmsnn.fc2web.com/material/janken.html</p>
</fieldset>
<hr />
<form id="myForm">
検索:<input type="text" size="30" id="car_name" />
    <input type="button" value="Search..." id="search" />
</form>
<div class="for-ui-template-engine">
    <script id="viewBody" type="text/x-jsrender">
        <table border="1">
            <tr>
                <th>タイムスタンプ</th>
                <td>{{:timestamp}}</td>
            </tr>
            <tr>
                <th>識別子</th>
                <td>{{:id}}</td>
            </tr>
            <tr>
                <th>メーカー</th>
                <td>{{:maker_name}}</td>
            </tr>
            <tr>
                <th>モデル名</th>
                <td>{{:model_name}}</td>
            </tr>
            {{:viewDetails}}
        </table>
    </script>

    <!-- 上記テンプレートの viewDetails に埋め込まれる(viewDetails 識別子が既存と被らないように注意すべし -->
    <script id="viewDetails" type="text/x-jsrender">
        <tr>
            <td colspan="2">
                {{for images}}
                <img src="{{:url}}" width="40px" height="40px" />
                {{/for}}
            </td>
        </tr>
    </script>
</div>

<div id="result">

</div>

</body>
</html>
[ {
  "timestamp" : "2015-11-16T06:44:24.541Z",
  "id" : "51024876",
  "cat_id" : "10066581",
  "first_reg_daytime" : "2015-08-05T02:59:31.000+0000",
  "maker_cd" : "101",
  "maker_name" : "トミー",
  "animal_name" : "ポンタ",
  "nakigoe_name" : "ワン",
  "grade_name" : "カラー",
  "model_num" : "16671",
  "model_name" : "GSJ15W",
  "model_year" : 2012,
  "price" : 3008000,
  "mileage" : 33,
  "color_name" : "black",

  "images" : [ {
    "url" : "images/ChoH.png"
  }, {
    "url" : "images/ChoW.png"
  }, {
    "url" : "images/GooH.png"
  }, {
    "url" : "images/GooW.png"
  }, {
    "url" : "images/ParH.png"
  }, {
    "url" : "images/ParW.png"
  } ],
  "keywords" : [ "たぬき", "狸", "いぬ" ]
} ]
疲れました。あとはご自由に。完成のめどがたったら、スレッドに完成したHTMLと動作の仕組みを修正・記述追加して、スレッドを閉めてください。
コピペで、Java の動的Webプロジェクトで確認済みです。
js/... などのそちらの環境用フォルダなどは、とりあえず上のやつで動きが確認できたら、自分のものに置き換えてください。
jQuery/jQuery-ui は、このHTML以上(またはこれとまったく同じもの)のバージョンを使うことをお勧めします。
疲れたので、一覧をポップアップで表示する仕掛けはご自分で努力なさってください。
できる方法は書きました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/19 18:10

    ipadcaron様
    Eclipseで動かさずHTMLをきないで作成して動かそうとしているんですが出来ないです。ただエラーもないですしアラートは消えました!
    ダイアログが「検索中です、しばらくおまちください。」と表示されますがその後何も表示されないです。

    Eclipseは最終的に出来ればいいと考えていますm(__)m

    余談ですがソースコメント見ているとipadcaron様はユーモアあるかただなと思いました。w

    キャンセル

  • 2015/11/19 18:38

    検索ボタン押下するとエラー出ていました。。。
    頑張って取り除いてみます。ここまでしていただいたので頑張りますとも。

    キャンセル

  • 2015/11/19 18:46 編集

    ipadcaron様
    JSONデータでた!っておもったらipadcaron様が作成してくれたテーブルでした・・・
    ここまで作成していただいたんですね。本当にありがとうございます。

    キャンセル

0

http://js.studio-kingdom.com/jquery
http://js.studio-kingdom.com/jqueryui
情報の仕入先

search が返す html を例示してください。検索結果2件程度でよいです。

test は、イメージとしては、以下のように実装されますね。
function test(){
   $.ajax({ ... });
   return false;
}
フォームには、遷移先のurl は不要です。search へのパラメタ初期化、呼び出し
、結果取得、ポップアップする画面構築、すべての作業を test() 内で、実装します。
リクエストは非同期で実行し、そのため検索ボタン押下後、検索結果が表示
される迄入力と検索ボタンが触れる状態にあるので、これらを 非活性に
するか、「検索中です、しばしお待ちください」などのメッセージを表示し
た画面全体を覆うポップアップ画面を上に表示することで、検索実行中の
画面からユーザ入力をブロックします。
よって、処理は以下のようになります。test() 内処理です。

1.検索条件を検索可能な文言が入力されているかチェックする
1.5  画面を覆う入力防止のポップアップを表示する
2.検索条件、url、succcess, error 各 ajax コールバックメソッドを指定、get リクエストの場合は、キャッシュさせないように工夫、post を指定し、ajax を実行する
3.success のコールバックで、受信した検索結果を検索結果一覧表示用ポップアップに描画する
4.  1.5 で表示しておいたポップアップを非表示にする
5. 3. の一覧画面を表示する
6.  error コールバックが呼び出されたら、エラーメッセージを画面に表示する

必要な jquery-ui 部品は、

error ポップアップ用 jquery.dialog
一覧ポップアップ用 jquery.dialog
ユーザ入力ブロック用 jquery.dialog

dialog の初期化については、url のhp見て勉強してください。

わからないことがあれば具体的に質問してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/17 17:45

    ipadcaron様
    いつもありがとうございます。
    質問構文編集しHTMLで表示されるデータを書き足しました。
    JSON表記で表示されます。このデータですがいかがでしょうか?

    リンク先までご親切にありがとうございます。
    確認してみます。

    キャンセル

  • 2015/11/17 20:23

    http://www.jsviews.com/#jsrapi
    テンプレートエンジンです。JSON データをあらかじめ用意しておいたhtmlテンプレートに当てはめて html を完成させます。
    ループ処理や条件分岐が無いものならすぐに作れますが、適当にに見つけてきました。

    suggest.js はオートコンプリート機能らしいですが、jquery-ui にも autocomplete があります。
    とりあえず、雛形だけ用意するので、分からない事があれば質問してください。半年も努力されているのですから、きあいの入れどきかと思いますね。

    キャンセル

  • 2015/11/18 09:54

    ipadcaron様
    ありがとうございます。suggest.js 機能なんですが、ただのオートコンプリートではなくグーグルのサジェスト機能をもっています。指定のリンク先からサジェストとってくるといった機能です。
    お気遣い誠にありがとうございます。

    キャンセル

0

<!--
UI ボタンが縦長でかっこ悪いなら取っ払ってください。
取っ払う方法は調べてください。
JSON データを生成する jsp ? を呼び出して結果を alert で表示するとこまでできたらもう直ぐです。

modalダイアログと、普通のダイアログ2パターん用意したので、できるところはどんどん進めてください。

-->
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
    // 通常メッセージ表示用ダイアログ。
    $("#alertDialog").dialog({
        autoOpen: false,
        buttons:[
            {
                text: "閉じる",
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });
    // UI ブロック用モーダルダイアログ
    $("#modalDialog").dialog({
        autoOpen: false,
        modal: true
    });
    $("#button01").button().click(function(e) {
        $("#alertMessage").html("<b>ボタン押下でポップアップします。</b>");
        $("#alertDialog").dialog("open");
    });
    $("#button02").button().click(function(e) {
        $("#modalMessage").html("<b>ajax 検索中に入力されないようにUI をブロックするためだけにこのダイアログを出します。このダイアログ表示中は下の検索条件入力、検索ボタンが触れないことを確認してね</b>");
        if ($(":checked").attr("id") == "hideRUbtu") {
        
            var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close");
            closeButton.css({ "visibility" : "hidden" });
        } else {

            var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close");
            closeButton.css({ "visibility" : "visible" });
        }
        $("#modalDialog").dialog("open");
    });

    // 検索ボタン
    $("#search").button().click(function(e) {
        $.ajax({
            url: "jsondata.txt",
            success: function(data) {
                alert("ここに JSON データが表示されればOK");
                // 続きは明日、ここに JSON データが表示されるまでは自分で作ってください。
            },
            error: function(x,y,z) {
                alert("[]");
            }
        });
    });
});
</script>
</head>
<body>
<input type="button" id="button01" value="アラートダイアログオープン" />
<input type="button" id="button02" value="モーダルダイアログオープン" /><br />
<input type="checkbox" value="1" id="hideRUbtu" />右上の❌ボタンを非表示にする
<div id="alertDialog" title="Alert dialog">
    <p id="alertMessage">メッセージ表示用ダイアログです。OKボタンだけあります。</p>
</div>
<div id="modalDialog" title="Modal dialog">
    <p id="modalMessage">UI ブロック用のモーダルダイアログです。OKボタンはおろか、右上の「❌」ボタンさえ表示しません。</p>
</div>
<fieldset>
    <legend>URLs</legend>
     <p>Dialog:https://jqueryui.com/dialog/</p>
     <p>Button:http://jqueryui.com/button/</p>
</fieldset>
検索:<input type="text" size="30" id="car_name" /><input type="button" value="Search..." id="search" />

</body>
</html>
残りは明日の質問で回答します。ちょっと考えればできるので頑張って努力目標の json データ取得まで
実装してみてください。

以上です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/18 10:33

    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
    JSON パーサ、検索結果の文字列を javascript のオブジェクトに変換する。

    キャンセル

  • 2015/11/18 10:56

    ipadcaron様
    朝早くからありがとうございます!完成したら欲は確かに出てくるかと思います、でも「検索結果のJSONデータをテーブル形式で一覧表示する」という目標だけで確かに充分です。かれこれ3週間は悩んでいるので…主体がずれますがそもそもできないという方もいらっしゃれば、ipadcaron様のようにできてしまう方もいるのでネットは真偽が多い環境ですね。m(__;)m

    キャンセル

  • 2015/11/19 00:42

    最新コメントをあげたので下げます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる