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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

3054閲覧

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

takato

総合スコア148

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2015/11/17 01:55

編集2015/11/17 08:41

###前提・実現したいこと
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データです。中身の部分は記述を少し変えています。

JSON

1[ { 2 "timestamp" : "2015-11-16T06:44:24.541Z", 3 "id" : "51024876", 4 "cat_id" : "10066581", 5 "first_reg_daytime" : "2015-08-05T02:59:31.000+0000", 6 "maker_cd" : "101", 7 "maker_name" : "トミー", 8 "animal_name" : "ポンタ", 9 "nakigoe_name" : "ワン", 10 "grade_name" : "カラー", 11 "model_num" : "16671", 12 "model_name" : "GSJ15W", 13 "model_year" : 2012, 14 "price" : 3008000, 15 "mileage" : 33, 16 "color_name" : "black", 17 18 "images" : [ { 19 "url" : "0705\\20150722A0000705\\51024876LF001.JPG" 20 }, { 21 "url" : "0705\\20150722A0000705\\51024876IN001.JPG" 22 }, { 23 "url" : "0705\\20150722A0000705\\51024876RR001.JPG" 24 }, { 25 "url" : "0705\\20150722A0000705\\51024876SP014.JPG" 26 }, { 27 "url" : "0705\\20150722A0000705\\51024876SP006.JPG" 28 }, { 29 "url" : "0705\\20150722A0000705\\51024876SP008.JPG" 30 }, { 31 "url" : "0705\\20150722A0000705\\51024876SP010.JPG" 32 }, { 33 "url" : "0705\\20150722A0000705\\51024876SP009.JPG" 34 }, { 35 "url" : "0705\\20150722A0000705\\51024876SP013.JPG" 36 }, { 37 "url" : "0705\\20150722A0000705\\51024876SP011.JPG" 38 }, { 39 "url" : "0705\\20150722A0000705\\51024876SP012.JPG" 40 }, { 41 "url" : "0705\\20150722A0000705\\51024876SP002.JPG" 42 }, { 43 "url" : "0705\\20150722A0000705\\51024876SP001.JPG" 44 }, { 45 "url" : "0705\\20150722A0000705\\51024876SP007.JPG" 46 }, { 47 "url" : "0705\\20150722A0000705\\51024876SP005.JPG" 48 }, { 49 "url" : "0705\\20150722A0000705\\51024876SP003.JPG" 50 }, { 51 "url" : "0705\\20150722A0000705\\51024876SP004.JPG" 52 }, { 53 "url" : "0705\\20150722A0000705\\51024876SP015.JPG" 54 }, { 55 "url" : "0705\\20150722A0000705\\51024876SP020.JPG" 56 }, { 57 "url" : "0705\\20150722A0000705\\51024876SP017.JPG" 58 }, { 59 "url" : "0705\\20150722A0000705\\51024876SP023.JPG" 60 }, { 61 "url" : "0705\\20150722A0000705\\51024876SP018.JPG" 62 }, { 63 "url" : "0705\\20150722A0000705\\51024876SP026.JPG" 64 }, { 65 "url" : "0705\\20150722A0000705\\51024876IM001.JPG" 66 } ], 67 "keywords" : [ "たぬき", "狸", "いぬ" ] 68} ]

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

TOMCAT6 , macBook , eclipse Luna

html

1<!-- 2 3--> 4<!doctype html> 5<html lang="ja"> 6<head> 7<meta charset="utf-8"> 8<title>jQuery UI Dialog - Default functionality</title> 9<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 10<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 11<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 12<script src="http://www.jsviews.com/download/jsrender.js"></script> 13<link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css"> 14<script> 15$(function() { 16 17 // $.templates テスト 18 // alert($.templates); 19 // テンプレートエンジン 20 // http://www.jsviews.com/download/jsrender.js 21 22 // 通常メッセージ表示用ダイアログ。 23 $("#alertDialog").dialog({ 24 autoOpen: false, 25 buttons:[ 26 { 27 text: "閉じる", 28 click: function() { 29 $(this).dialog("close"); 30 } 31 } 32 ] 33 }); 34 // UI ブロック用モーダルダイアログ 35 $("#modalDialog").dialog({ 36 autoOpen: false, 37 modal: true 38 }); 39 // UI ブロック用モーダルダイアログの右上の「❌」ボタンを隠す 40 var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close"); 41 closeButton.css({ "visibility" : "hidden" }); 42 43 // @param messages 文字列 or 配列 44 function showAlertMessageDialog(messages) { 45 if (typeof messages != "string" && typeof messages.splice == "function") { 46 messages = messages.join(""); 47 } 48 $("#alertMessage").html(messages); 49 $("#alertDialog").dialog("open"); 50 } 51 52 53 // @param p - 指定なしのとき、規定のメッセージを表示 54 // - 文字列を指定したとき、それを表示(HTML可能) 55 // - 配列を指定したとき、誤動作確定。 56 // - オブジェクト時、p.img にローディングアイコンなどのgif アニメ画像、 57 // - p.text に文言。 58 function showUIBlockDialog(p) { 59 if (!!p && typeof p != "string") { 60 var tmp = "<span class='uiblock-dialog-content'>"; 61 if ("img" in p) { 62 tmp += "<img src='" + p.img + "' />"; 63 } 64 if ("text" in p) { 65 tmp += "<span class='uiblock-dialog-message'>" + p.text + "</span>"; 66 } 67 tmp += "</span>"; 68 p = tmp; 69 } else { 70 p = "検索中です、しばらくおまちください。"; 71 } 72 $("#modalMessage").html(p); 73 $("#modalDialog").dialog("open"); 74 } 75 // dialog を閉じる 76 // @param timerTick 指定なし時は、即閉じる 77 // 60 以下の時、1000 掛けた秒数に変換 78 // 61 以上、そのまま。 79 // 指定時間経過後に、メッセージを消去し、ダイアログを閉じる 80 // @param closeOnCallback 閉じた時に呼び出すコールバック 81 function hideUIBlockDialog(timerTick, closeOnCallback) { 82 83 if (typeof timerTick == "undefined") { 84 timerTick = 0; 85 } else if (timerTick < 60) { 86 timerTick *= 1000; 87 } 88 setTimeout(function() { 89 $("#modalMessage").html("<span></span>"); 90 $("#modalDialog").dialog("close"); 91 closeOnCallback(); 92 }, timerTick); 93 } 94 95 // 検索ボタン 96 $("#search").button().click(function(e) { 97 // UI Block Dialog 表示 98 showUIBlockDialog(); 99 100 $.ajax({ 101 url: "jsondata.txt", 102 cache: false, 103 success: function(data) { 104 hideUIBlockDialog(1.5, (function(d) { 105 return function() { 106 var items = null; 107 if (JSON) { 108 items = JSON.parse(d); 109 } else { 110 //eval はかっこつけないとダメだった希ガス 111 items = eval( "(" + d + ")"); 112 } 113 114 var allHtml = []; 115 for (var i=0;i < items.length;i++) { 116 var viewDetails = $.templates("#viewDetails").render(items[i]); 117//alert(viewDetails); 118 items[i]["viewDetails"] = viewDetails; 119 var viewBody = $.templates("#viewBody").render(items[i]); 120 allHtml.push(viewBody); 121 } 122 $("#result").html(allHtml.join("")); 123 124 }; 125 })(data)); 126 }, 127 error: function(x,y,z) { 128 alert("何かのエラー"); 129 } 130 }); 131 }); 132 133 // form の submit を殺す 134 $("#myForm").on("submit",function(e) { 135 e.preventDefault(); 136 e.returnValue = false; 137 return false; 138 }); 139}); 140</script> 141</head> 142<body> 143<div class="ui-dialog-initializations"> 144 <div id="alertDialog" title="Alert dialog"> 145 <p id="alertMessage"></p> 146 </div> 147 <div id="modalDialog" title="Modal dialog"> 148 <p id="modalMessage"></p> 149 </div> 150</div> 151<fieldset> 152 <legend>参考資料:URLs</legend> 153 <p>Dialog:https://jqueryui.com/dialog/</p> 154 <p>Button:http://jqueryui.com/button/</p> 155 <p>templates: http://www.jsviews.com/#fortag</p> 156 <p>じゃんけん画像:http://lmsnn.fc2web.com/material/janken.html</p> 157</fieldset> 158<hr /> 159<form id="myForm"> 160検索:<input type="text" size="30" id="car_name" /> 161 <input type="button" value="Search..." id="search" /> 162</form> 163<div class="for-ui-template-engine"> 164 <script id="viewBody" type="text/x-jsrender"> 165 <table border="1"> 166 <tr> 167 <th>タイムスタンプ</th> 168 <td>{{:timestamp}}</td> 169 </tr> 170 <tr> 171 <th>識別子</th> 172 <td>{{:id}}</td> 173 </tr> 174 <tr> 175 <th>メーカー</th> 176 <td>{{:maker_name}}</td> 177 </tr> 178 <tr> 179 <th>モデル名</th> 180 <td>{{:model_name}}</td> 181 </tr> 182 {{:viewDetails}} 183 </table> 184 </script> 185 186 <!-- 上記テンプレートの viewDetails に埋め込まれる(viewDetails 識別子が既存と被らないように注意すべし --> 187 <script id="viewDetails" type="text/x-jsrender"> 188 <tr> 189 <td colspan="2"> 190 {{for images}} 191 <img src="{{:url}}" width="40px" height="40px" /> 192 {{/for}} 193 </td> 194 </tr> 195 </script> 196</div> 197 198<div id="result"> 199 200</div> 201 202</body> 203</html> 204

JSON

1[ { 2 "timestamp" : "2015-11-16T06:44:24.541Z", 3 "id" : "51024876", 4 "cat_id" : "10066581", 5 "first_reg_daytime" : "2015-08-05T02:59:31.000+0000", 6 "maker_cd" : "101", 7 "maker_name" : "トミー", 8 "animal_name" : "ポンタ", 9 "nakigoe_name" : "ワン", 10 "grade_name" : "カラー", 11 "model_num" : "16671", 12 "model_name" : "GSJ15W", 13 "model_year" : 2012, 14 "price" : 3008000, 15 "mileage" : 33, 16 "color_name" : "black", 17 18 "images" : [ { 19 "url" : "images/ChoH.png" 20 }, { 21 "url" : "images/ChoW.png" 22 }, { 23 "url" : "images/GooH.png" 24 }, { 25 "url" : "images/GooW.png" 26 }, { 27 "url" : "images/ParH.png" 28 }, { 29 "url" : "images/ParW.png" 30 } ], 31 "keywords" : [ "たぬき", "狸", "いぬ" ] 32} ] 33

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

投稿2015/11/18 15:21

編集2015/11/18 15:42
ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ipadcaron

2015/11/18 15:45

左の↓って評価の上げさげ? このコメントを上にあげようとして、評価1のコメントに下げ評価をしたら、こいつが上にあげられなくなってしまいました。。。。なんだかよくわかんない機能ですね;;
takato

2015/11/19 03:21 編集

ipadcaron様 お忙しい中重労働させて申し訳ないです。 HTMLと jsondate.txtをここにある構文でコピペして動かしたところ、エラーのほうに処理が流れてしまいます。Ecripceの環境下でないと動作しないということでしょうか? また、完成するとダイアログにJSONデータが表示されるんですよね?
ipadcaron

2015/11/19 07:58

url は、search の奴でok ですよ。 一覧画面は、出てこないです。検索条件の直下に、ペロっと一覧が張り付くだけです。 出すための仕掛けは全部盛り込まれているので工夫して実現してください。 eclipseの環境云々は、スレッドたいとるの下にeclipse カテゴリがあるのでそういう環境を作っただけです。search がすでにできてて、それがphp だろうが画面には一切関係ありません。あなたが例示した json 結果を返す search で期待する結果が得られるでしょう。 細かい詰めは、ちょちょ気合入れてください。
takato

2015/11/19 09:10

ipadcaron様 Eclipseで動かさずHTMLをきないで作成して動かそうとしているんですが出来ないです。ただエラーもないですしアラートは消えました! ダイアログが「検索中です、しばらくおまちください。」と表示されますがその後何も表示されないです。 Eclipseは最終的に出来ればいいと考えていますm(__)m 余談ですがソースコメント見ているとipadcaron様はユーモアあるかただなと思いました。w
takato

2015/11/19 09:38

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

2015/11/19 09:51 編集

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

0

html

1<!-- 2UI ボタンが縦長でかっこ悪いなら取っ払ってください。 3取っ払う方法は調べてください。 4JSON データを生成する jsp ? を呼び出して結果を alert で表示するとこまでできたらもう直ぐです。 5 6modalダイアログと、普通のダイアログ2パターん用意したので、できるところはどんどん進めてください。 7 8--> 9<!doctype html> 10<html lang="ja"> 11<head> 12<meta charset="utf-8"> 13<title>jQuery UI Dialog - Default functionality</title> 14<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 15<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 16<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 17<link rel="stylesheet" href="/resources/demos/style.css"> 18<script> 19$(function() { 20 // 通常メッセージ表示用ダイアログ。 21 $("#alertDialog").dialog({ 22 autoOpen: false, 23 buttons:[ 24 { 25 text: "閉じる", 26 click: function() { 27 $(this).dialog("close"); 28 } 29 } 30 ] 31 }); 32 // UI ブロック用モーダルダイアログ 33 $("#modalDialog").dialog({ 34 autoOpen: false, 35 modal: true 36 }); 37 $("#button01").button().click(function(e) { 38 $("#alertMessage").html("<b>ボタン押下でポップアップします。</b>"); 39 $("#alertDialog").dialog("open"); 40 }); 41 $("#button02").button().click(function(e) { 42 $("#modalMessage").html("<b>ajax 検索中に入力されないようにUI をブロックするためだけにこのダイアログを出します。このダイアログ表示中は下の検索条件入力、検索ボタンが触れないことを確認してね</b>"); 43 if ($(":checked").attr("id") == "hideRUbtu") { 44 45 var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close"); 46 closeButton.css({ "visibility" : "hidden" }); 47 } else { 48 49 var closeButton = $("#modalDialog").parent().find("button.ui-dialog-titlebar-close"); 50 closeButton.css({ "visibility" : "visible" }); 51 } 52 $("#modalDialog").dialog("open"); 53 }); 54 55 // 検索ボタン 56 $("#search").button().click(function(e) { 57 $.ajax({ 58 url: "jsondata.txt", 59 success: function(data) { 60 alert("ここに JSON データが表示されればOK"); 61 // 続きは明日、ここに JSON データが表示されるまでは自分で作ってください。 62 }, 63 error: function(x,y,z) { 64 alert("[]"); 65 } 66 }); 67 }); 68}); 69</script> 70</head> 71<body> 72<input type="button" id="button01" value="アラートダイアログオープン" /> 73<input type="button" id="button02" value="モーダルダイアログオープン" /><br /> 74<input type="checkbox" value="1" id="hideRUbtu" />右上の❌ボタンを非表示にする 75<div id="alertDialog" title="Alert dialog"> 76 <p id="alertMessage">メッセージ表示用ダイアログです。OKボタンだけあります。</p> 77</div> 78<div id="modalDialog" title="Modal dialog"> 79 <p id="modalMessage">UI ブロック用のモーダルダイアログです。OKボタンはおろか、右上の「❌」ボタンさえ表示しません。</p> 80</div> 81<fieldset> 82 <legend>URLs</legend> 83 <p>Dialog:https://jqueryui.com/dialog/</p> 84 <p>Button:http://jqueryui.com/button/</p> 85</fieldset> 86検索:<input type="text" size="30" id="car_name" /><input type="button" value="Search..." id="search" /> 87 88</body> 89</html>

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

以上です。

投稿2015/11/17 15:25

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takato

2015/11/18 01:15 編集

ipadcaron様 ここまで親切にやっていただけるとは・・・ 大変感謝しています! 早速試してみます。 取得したJSONデータをそのままテーブルにコンバートすることもできるんでしょうか? JSONデータ所得→可視化しやすいようテーブルに変換という流れで考えております。 とりあえずですが、ダイアログにJSONデータらしきものをとって来れました!
ipadcaron

2015/11/18 01:24

取得したJSONデータは、テンプレートエンジン経由で html 書式に変換されて alertDialog よりももうちょっと大きい画面で、表示します。一覧なんで、見易さを考慮すると、検索条件の下に固定で表示し、ブラウザ本体のスクロールバーでスクロールできるようにする、と色々考えられますが、こういうのは作っていくうちにだんだん欲が出てくるもので、見出しを固定したい、とか、イメージは、横方向に等間隔で最大5つまで表示し、6つ目以降は段組で、とか横スクロールさせたくないとか、、、、きりないです。とりあえず、このスレッドの目標は、画面遷移しないで検索結果のJSONデータをテーブル形式で一覧表示する、ってとこまでを目標にしてください。
takato

2015/11/18 01:56

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

2015/11/18 15:42

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

0

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

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

test は、イメージとしては、以下のように実装されますね。

javascript

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

よって、処理は以下のようになります。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 02:34

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takato

2015/11/17 08:45

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

2015/11/17 11:23

http://www.jsviews.com/#jsrapi テンプレートエンジンです。JSON データをあらかじめ用意しておいたhtmlテンプレートに当てはめて html を完成させます。 ループ処理や条件分岐が無いものならすぐに作れますが、適当にに見つけてきました。 suggest.js はオートコンプリート機能らしいですが、jquery-ui にも autocomplete があります。 とりあえず、雛形だけ用意するので、分からない事があれば質問してください。半年も努力されているのですから、きあいの入れどきかと思いますね。
takato

2015/11/18 00:54

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問