実現したいこと
DjangoでAjaxを利用して動的にデータの編集をしたい。
前提
現在Djangoを利用してSNSのようなアプリケーションを作っています。
搭載する機能は投稿のCRUDといいね（Ajax）機能であり、編集機能以外は完成しました。
編集機能の実装は、「元はpタグで出力している投稿内容」を「inputタグに変更して」、「ajax通信を用いてviewに飛ばし」、「viewでDBの書き換えを行う」という処理を想定しています。
発生している問題・エラーメッセージ
viewへ値を渡す際に、空白で返ってくる。
該当のソースコード
DjangoHTML:index.html
1<form 2 action="" 3 method="POST" 4 name="f" 5 class="d-flex flex-column align-items-center" 6 > 7 <input type="hidden" name="send_id" id="send_id" /> 8 <input type="hidden" name="send_text" id="send_text" /> 9{% csrf_token %} {%for post in posts%} 10 <div class="card mb-3" style="width: 30rem" id="{{post.id}}"> 11 <div class="card-body"> 12 <p class="card-text py-3 mb-0" id="title{{post.id}}">{{post.title}}</p> 13 {%if edit%} 14 <button class="btn btn-outline-primary edit">編集する</button> 15 {%endif%} 16 </div> 17 </div> 18 {%endfor%} 19 </form> 20<script> 21 // HTMLが読み込まれた際に発火するイベント 22 $(document).ready(function () { 23 // 編集ボタンを押した時にbtnのテキストと入力欄が変更する処理 24 $(".edit").click(function (e) { 25 // btn本来のform actionに飛ばす機能を無効にする 26 e.preventDefault(); 27 // 該当投稿のidを取得する 28 let id = $(this).parents(".card").attr("id"); 29 // 投稿内容をinputタグに置き換える 30 $(`#title${id}`).replaceWith(function () { 31 $(this).replaceWith( 32 `<input type='text' name='edit_text' class="form-control my-2" id="title${id}" value="${$( 33 this 34 ).text()}" >` 35 ); 36 }); 37 // btnのテキストと機能の書き換え 38 // 編集ボタンと削除ボタンを取得する 39 let edit_btn = $(this); 40 let delete_btn = $(this).next(); 41 // 「編集する」ボタンのテキストを変更 42 edit_btn.html("完了する"); 43 delete_btn.html("変更を破棄する"); 44 // 完了ボタンを押した際に、編集する 45 $(edit_btn).click(function () { 46 // idをsend_idに格納する 47 let id = $(this).parents('.card').attr('id') 48 let text = $(`#title${id}`).val() 49 // inputのvalをsend_textに格納する 50 $('form[name="f"]').attr('action','{% url 'edit' %}'); 51 $('form[name="f"]').submit() 52 $.ajax({ 53 url: '{% url "edit" %}', 54 type: "POST", 55 data: { 56 // viewにrequestで押されたbuttonのid属性を渡す 57 'id': id, 58 'new_text':text, 59 }, 60 dataType: "json", 61 // 成功した時 62 }).done(function (response) { 63 // inputタグをpタグに戻す 64 $(`#title${id}`).replaceWith(function () { 65 $(this).replaceWith( 66 `<p class="card-text py-3 mb-0" id="title${id}">${response.text}</p>` 67 ); 68 }); 69 // 完了ボタンを編集ボタンに戻す 70 edit_btn.html("編集する"); 71 // 変更を破棄するボタンを削除ボタンに直す 72 delete_btn.html("削除する"); 73 }); 74 }); 75 }); 76 }); 77 </script>
Django:views.py
1# 投稿編集 2def edit(request): 3 # idを取得 4 post_id = request.POST.get('id') 5 print(post_id) 6 # 編集後のテキストを取得 7 edit_text = request.POST.getlist('new_text') 8 print(edit_text) 9 # 該当投稿取得 10 post = モデル名.objects.get(pk=post_id) 11 # 書き換え 12 post.title = edit_text 13 # 変更をセーブする 14 post.save() 15 return JsonResponse({'text':edit_text})
試したこと
inputの内容をinput type=hiddenのvalueに渡し、viewで受け取る→失敗（空で帰ってくる）
pタグでなくinput disabledにし、編集時にdisabel = Falseとする→成功
この結果から、javascriptで書き換えたinputタグは、requestで送られず、val()も返ってこないと解釈できますが、私が実装したいのが「pタグをinputタグに書き換えてviewに値を渡す」ことであるので、できればこの方法は使いたくありません（CSSを当てる必要があるため）。
また、同じような方法で、input type=hiddenを投稿内容のpタグの下に忍ばせておくことも考えており、良い方法がなければこのやり方で実装すると思うのですが、HTML内にタグを増やしたくないため、書き換えでのやり方があれば教えていただきたいです。
私がご質問させていただきたいのは、「javascriptで動的に生成したinputタグは、入力された値をjsもしくはviewによって値を取得できるのかどうか」です。よろしくお願いしたします。
0 コメント