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

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

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

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

408閲覧

javaScriptでリンクの記述について

i_pay94

総合スコア9

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/27 06:54

編集2017/06/27 07:44

###前提・実現したいこと
Springで「会議室予約」のプログラムを作成中です。
トップ画面に、今日の日付の一覧画面が表示され、
イメージ説明
会議室名をクリックすると
こちらの予約画面(今日)が表示されるようになっています。
イメージ説明
トップ画面の「カレンダーから日付を指定」からカレンダー画面に遷移し、
カレンダーの日付から先ほどの予約画面(指定した日付)に遷移させたいです。
イメージ説明

###発生している問題・エラーメッセージ
日付をクリックするとURLが
http://localhost:8080/@%7B
で、エラーメッセージ404になってしまいます。
【理想】
http://localhost:8080/rooms/2017-06-28

###該当のソースコード

HTML

1<body> 2<script th:inline="javascript"> 3/*<![CDATA[*/ 4//日付と時間の設定 5now = new Date(); 6year = now.getYear(); 7if (year < 1900) year += 1900; 8mon = now.getMonth()+1; 9day = now.getDate(); 10you = now.getDay(); 11 12//曜日の選択肢 13youbi = new Array("日","月","火","水","木","金","土"); 14youbi_color = new Array("ff0000","","","","","","0000ff"); 15 16//表示の設定 17today = year + "年" + mon + "月" + day + "日" + "(<font color='" + youbi_color[you] + "'>" + youbi[you] + "</font>)"; 18 19//画面に表示 20//document.write(today); 21//document.write("<hr>"); 22 23//1日 24fday = new Date(year+"/"+mon+"/1"); 25fyou = fday.getDay(); 26//末日 27 lday = new Array(31,28,31,30,31,30,31,31,30,31,30,31); 28if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) { 29 lday[1]++; 30 } 31//カレンダー表示 32document.write("<table border='2' align=center width='380px' height='350px'>"); 33document.write("<tr><th colspan='7'>"+year+"年"+mon+"月</th></tr>"); 34document.write("<tr>"); 35for (m = 0; m < 7; m++){ 36 document.write("<th><font color='" + youbi_color[m] + "'>" + youbi[m] + "</font></th>"); 37} 38document.write("</tr>"); 39for (n = 0; n < 6; n++) { 40 document.write("<tr>"); 41 for (m = 0; m < 7; m++){ 42 d = (n*7+m+1-fyou); 43 if (day == d) { 44 document.write("<td align='right' bgcolor='#ffaaaa'><a href='@{'/rooms/' + ${date.plusDays(1)}'>"); 45 }else { 46 document.write("<td align='right'><a href='@{'/rooms/' + ${date.plusDays(1)}'>"); 47 } 48 if (d > 0 && d <= lday[mon-1]) { 49 document.write("<font color='" + youbi_color[m] + "'>" + d + "</font>"); 50 }else { 51 document.write("&nbsp;"); 52 } 53 document.write("</a></td>"); 54 } 55 document.write("</tr>"); 56 if (d >= lday[mon-1]) break; 57} 58document.write("</table>"); 59/*]]>*/ 60</script> 61</body>

###試したこと
//カレンダー表示
~省略~
if (day == d) {document.write("<td align='right' bgcolor='#ffaaaa'><a href='@{'/rooms/' + ${date.plusDays(1)}'>");}
else {document.write("<td align='right'><a href='@{'/rooms/' + ${date.plusDays(1)}'>");

本来なら<a href="@{'/rooms/' + ${date.plusDays(1)}">
にするべきだと思うのですが外側のdocument.writeの""があってエラーになります。(というよりカレンダーが表示されなくなる)

少しググってみたら"で囲めるとあったのですが、
aタグ内が文字列として認識されてしまいダメでした。

###補足情報(言語/FW/ツール等のバージョンなど)
とりあえず予約画面に遷移したいのでplusDays(1)にしています。

拙い文章で申し訳ありませんが、よろしくお願い致します。

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

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

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

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

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

kei344

2017/06/27 07:31

すみません、「STS」とは何でしょう。
i_pay94

2017/06/27 07:44

Spring tool Suiteです。springと書いたほうが分かりやすかったですね…修正しておきます。
guest

回答1

0

ベストアンサー

javascript で thymeleaf のテンプレート要素を出力してももう遅いです。テンプレートが展開されるのはサーバから応答が返るタイミングだけになります。(テンプレートを展開するのが誰か、を理解すると分かりやすいかと[正解はサーバ])
アプリケーションのコンテキストパスを使いたい為に @{} をお使いかと思いますが、一旦 <input type="hidden"> 等に @{'/rooms/'} までの値を設定しておき、javascript からはその値を参照して URL を組み立てると良いと思います。

追記

<input id="base-url" value="@{'/root/'}" /> (/> にして下さい。エラー消えると思います。) とするとコンテキストパス(例えば /myapp)までが入り、<input id="base-url" value="/myapp/root/" /> という内容になるかと思います。それを使って

javascript

1var a = document.getElementById("base-url") + ${date.plusDays(1)}';

の様に欲しい URL を組み立てます。

投稿2017/06/27 07:43

編集2017/06/27 08:50
mattn

総合スコア5030

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

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

i_pay94

2017/06/27 08:46

ご回答ありがとうございます。少し調べつつ試してみたものの、 > javascript からはその値を参照して URL を組み立てる の方法が分かりません...申し訳ありませんが、もう少しヒントを頂けないでしょうか? あとなぜか、「要素タイプ"input"は、対応する終了タグ"</input>"で終了する必要があります。」 と、出たのですがこれも理解できませんでした...
mattn

2017/06/27 08:50

書き足しました。これで分かりますでしょうか。
mattn

2017/06/27 08:52 編集

あ、もしかして date は java のオブジェクトでしょうか?であれば javascript で日付文字列を作る必要があります。
i_pay94

2017/06/27 09:14

とても分かりやすい説明ありがとうございます。 無事、解決致しました!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問