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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Ajax

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

HTML

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

Q&A

0回答

817閲覧

To do listのタスク追加機能を非同期通信で実装したいです。

s_alt107

総合スコア1

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Ajax

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

HTML

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

0グッド

0クリップ

投稿2020/10/19 10:39

編集2020/10/20 09:52

前提・実現したいこと

railsで、To do listを作成しており、タスク追加機能を非同期通信で実装したいです。

JS上の変数HTMLに、taskとして描画する部分を定義したいのですが、下記記述通りで正しいでしょうか?
間違っていれば、訂正いただきたいです。

該当のソースコード

javascript

1function task() { 2 const submit = document.getElementById("submit") 3 console.log(submit) 4 submit.addEventListener("click", (e) => { 5 const formData = new FormData(document.getElementById("form")); 6 const XHR = new XMLHttpRequest(); 7 XHR.open("POST", ` /lists/:${gon.list}/tasks${(gon.list) }` , true) 8 XHR.responseType = "json"; 9 XHR.send(formData); 10 XHR.onload = () => { 11 if (XHR.status != 200) { 12 alert('Error ${XHR.status}: ${XHR.statusText}'); 13 return null; 14 } 15 const item = XHR.response.post; 16 const list = document.getElementById("list"); 17 const formText = document.getElementById("content"); 18 const HTML = ` 19 <div class="task"> 20 21 <div class="task-content"> 22 <%= check_box_tag :done %> 23 <%= task.content %> 24 </div> 25 26 <div class="map"> 27 <iframe 28 width="500" 29 height="100" 30 frameborder="0" style="border:0" 31 src=<%=url_for("https://www.google.com/maps/embed/v1/place?key=#{ENV["GOOGLE_API_KEY"]}&q=#{task.content}&zoom=15")%>> 32 </iframe> 33 </div> 34 35 <div class delete-btn> 36 <%= link_to "削除", list_task_path(@list.id, task.id), method: :delete %> 37 </div> 38 39 </div>`; 40 list.insertAdjacentHTML("afterend", HTML); 41 formText.value = ""; 42 }; 43 e.preventDefault(); 44 }); 45} 46window.addEventListener("load", task);

HTML

1 <div id="list"> 2</div> 3 4 <div class="task"> 5 <div class="task-content"> 6 <%= check_box_tag :done %> 7 <!-- 投稿したメッセージ内容を記述する --> 8 <%= task.content %> 9 </div> 10 <div class="map"> 11 <iframe 12 width="500" 13 height="100" 14 frameborder="0" style="border:0" 15 src=<%=url_for("https://www.google.com/maps/embed/v1/place?key=#{ENV["GOOGLE_API_KEY"]}&q=#{task.content}&zoom=15")%>> 16 </iframe> 17 </div> 18 <div class= delete-btn> 19 <%= link_to image_tag("img_x.png"), list_task_path(@list.id, task.id), method: :delete %> 20 </div> 21 </div> 22

お手数おかけしますが、アドバイスいただけると幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問