2017-04-06 15 views
1

チェックボックスがある複数のアイテムがあるテーブルを作成したいのですが、チェックボックスがオンの場合は、ボタンをクリックしてアイテムを更新したいと思います。Django:チェックされているアイテムのみを更新する

私は既にこのアイテムの保存ボタンが押されている場合のみ(1つのテーブルアイテムがそれ自身のボタンを持っている)、それを行う更新ビューを持っています。私のコードは次のようになります。

<table> 
    <thead> 
    <tr> 
     <th colspan="4"> 
     <button type "submit">My Submit Button</button> 
     </th> 
    </tr> 
    <tr> 
     <th colspan="2">My Title</th> 
     <th>Movie title</th> 
     <th>Movie description</th> 
     <th>And so on</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th> 
     <input type="checkbox" class="custom-control-input"> 
     </th> 
     <th>Data</th> 
     <th>Data</th> 
     <th>Data</th> 
     <th>Data</th> 
     <th> 
     <button>Button to edit this row item</button> 
     </th> 
     <th> 
     <button type="submit" form="movie{{ forloop.counter }}">Button to save the changes</button> 
     </th> 
    </tr> 
    <tr> 
     <th> 
     <input type="checkbox" class="custom-control-input"> 
     </th> 
     <th>Data</th> 
     <th>Data</th> 
     <th>Data</th> 
     <th>Data</th> 
     <th> 
     <button>Button to edit this row item</button> 
     </th> 
     <th> 
     <button type="submit" form="movie{{ forloop.counter }}">Button to save the changes</button> 
     </th> 
    </tr> 
    </tbody> 
<!-- the form for saving exactly one movie --> 

<form class="hide" id="movie{{ forloop.counter }}" action="{% url 'myapp:movieDataUpdate' pk=movie.pk %}" method="post"> 
{% csrf_token %} 
</form> 
</table> 

これで、各行の[保存]ボタンのための私の既存のビュー/のURL /フォーム:

urls.py

from django.conf.urls import url 
from . import views 

app_name = "myapp" 
urlpatterns = [ 
     url(r'^$', views.AllMovies.as_view(), name="index"), views.UpdateMovieDataView.as_view(), name='movieDataUpdate'), 
] 

views.py

class UpdateMovieDataView(UpdateView): 
    model = Movie 
    form_class = UpdateMovieDataForm 
    success_url = reverse_lazy('myapp:index') 

    def form_valid(self, form): 
     self.object.slug = slugify(form.cleaned_data['title']) 
     return super(UpdateMovieDataView, self).form_valid(form) 

form.py

class UpdateMovieDataForm(forms.ModelForm): 
     class Meta: 
      model = Movie 
      fields = ['title', 'date', 'director', 'runtime', 'genre', 'status'] 

誰かが私をここで助けて、それを理解しようとしましたが、まだ成功しなかったことを願っています。たぶんもっと多くの経験を持つ人が助けてくれるでしょう:)

答えて

1

あなたはそれにjavascriptを追加できます(jQueryは簡単に始めることができます)。

まず、htmlページ(download here)にjQueryを追加します。 、

<input id="my_checkbox1" type="checkbox" class="custom-control-input"> 

そして、チェックボックスの変更を検出すること(HTMLで)JavaScriptコードを追加して、サーバーにAJAXを行います

は、次に、あなたのチェックボックス(以下の例)に IDを追加します。ここで使用

<script> 
$("#my_checkbox1").change(function() { 
    if(this.checked) { 
     $.post("{% url 'myapp:movieDataUpdate' pk=movie.pk %}", {}, 
     function(data, status){ 
      console.log("Data: " + data + "\nStatus: " + status); 
     }); 
    } 
    # If you want, make an else 
}); 
</script> 

いくつかのソースは:

jQuery checkbox checked state changed event

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

+0

私はあなたがチェックボックスの変更でこれをしたい、それを理解し、またはボタンをクリックして保存していませんでした。しかし、AJAXをチェックボックスに変更するのではなく、ボタンをクリックするだけでリストに追加するだけで、クリックすると変更があってもサブミット(またはAJAX)が行われます。 – Rafael

関連する問題