やりたいこと
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 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。