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

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

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

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

HTML

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

Q&A

解決済

1回答

301閲覧

HTML JavaScropt ajaxで作成したフォームをid順で作成したい

amaguri

総合スコア227

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/09/12 06:10

やりたいこと
ajaxのsuccess時に作るフォームを「data-imgid」ごとに作りたい。

現在
ajax作成時に
formを作成しているのですが
var $formlayouts で作成したフォームに
2回目のsuccessになったデータのformも作成されてしまいます。

今回
data-imgidを割り当てたのですが

//削除 $('#box div.delete') .append($delBtn); //画像 $('#left label') .append($img) //テキストエリア $('#right div.textareabox') .append($txtArea) //カテゴリ $('#right div.category') .append($category_info) .append(res.category).end()

の宣言時に$formlayoutsにも付与したdata-imgidごとに
作成宣言をしたいのですがうまくいきません。

どうすればdata-imgidごとに
フォームを作成できますでしょうか?

現在のソースコード

<div class="layout" id="layout"> <!-投稿フォーム--> </div>

js

1$.ajax({ 2 url: "/hogehoge/ninnin/add", 3 type: 'POST', 4 dataType: 'json', 5 data: formData, 6 cache: false, 7 contentType: false, 8 processData: false, 9 xhr: function() { 10 var xhr = $.ajaxSettings.xhr(); 11 if (xhr.upload) { 12 $('#submitBtn').attr('disabled', 'disabled'); 13 xhr.upload.addEventListener('progress', function(evt) { 14 var percent = (evt.loaded / evt.total) * 100; 15 $("#progress-container").find(".progress-bar").width(percent + "%"); 16 17 }, false); 18 } 19 return xhr; 20 }, 21 success: function(res) { 22 var $img = $('<img class="imgView" src="'+ res.img +'" data-imgid="'+ res.img_id +'" />'); 23 var $category_info = $('<p data-imgid="'+ res.img_id +'">カテゴリ選択<span class="red">(必須)</span></p>'); 24 var $txtArea = $('<textarea name="body['+ res.img_id +']" maxlength="140" data-imgid="'+ res.img_id +'">'+"\n"+'</textarea>'); 25 var $delBtn = $('<input type="button" name="'+ res.img_id +'" value="削除" class="deleteBtn" data-imgid="'+ res.img_id +'"/>'); 26 var $category_info = $('<p data-imgid="'+ res.img_id +'">カテゴリ選択<span class="red">(必須)</span></p>'); 27 28 var $formlayouts = $('<div class="box" id="box" data-imgid="'+ res.img_id +'"><div class="delete" data-imgid="'+ res.img_id +'"></div><div class="left" id="left" data-imgid="'+ res.img_id +'"><label for="file_photo" data-imgid="'+ res.img_id +'"></label></div><div class="right" id="right" data-imgid="'+ res.img_id +'"><div class="textareabox" data-imgid="'+ res.img_id +'"></div><div class="category" data-imgid="'+ res.img_id +'"></div></div></div>'); 29 30 31 32 33 //フォーム 34 $('#layout') 35 .append($formlayouts); 36 37 //削除 38 $('#box div.delete') 39 .append($delBtn); 40 41 //画像 42 $('#left label') 43 .append($img) 44 45 //テキストエリア 46 $('#right div.textareabox') 47 .append($txtArea) 48 49 //カテゴリ 50 $('#right div.category') 51 .append($category_info) 52 .append(res.category).end() 53 54 $('#submitBtn').removeAttr('disabled'); 55 56 if ($("#left label img").length > 10){ 57 $('#submitBtn').prop('disabled', true); 58 } 59 }, 60 error: function(xhr, textStatus, errorThrown) { 61 var res = {}; 62 try { 63 res = $.parseJSON(xhr.responseText); 64 } catch (e) {} 65 alert(res.errorMessage); 66 $('#submitBtn').prop('disabled', true); 67 }, 68 complete: function() { 69 $("#progress-container").children().remove(); 70 newPromise.resolve(); 71 } 72 }); 73 return newPromise; 74 }); 75 }); 76 def.resolve(); 77 });

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

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

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

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

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

guest

回答1

0

ベストアンサー

idは重複しないようにしてください。
そのうえで、$formlayoutsからfind()で探せばいいでしょう。

JavaScript

1$formlayouts.find('div.delete').append($delBtn);

.find()
https://api.jquery.com/find/

投稿2017/09/12 07:15

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問