Django: update only items that are checked

Question

I'd like to build a table with multiple items that have checkboxes, if those checkboxes are checked I want to update just those items via button click.

I already got an update view that does that, but only for one item and only if the save button for this item is pressed (every table item got it's own button). My code looks like this:

<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>

This is my existing view/urls/form for the Save Button on each row:

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)

forms.py

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

I hope someone could help me here, tried to figure it out, but didn't succeeded yet. Maybe someone with a lot more experience can help :)

score 1 · Accepted Answer · edited May 23 '17 at 11:46

You can add javascript on it (jQuery is easy to start).

You first add jQuery to your html page (download here).

Then you add an id to your checkbox (example below):

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

And then, add a javascript code (at html) that detect the checkbox change, and make an AJAX to your server.

<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>

Some sources used here:

jQuery checkbox checked state changed event

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

I didn't understand it you want this on checkbox change, or on button save click. But if you want on button click, instead of make an AJAX on checkbox change, you just add it to a list, and when you click, you make a submit (or AJAX) with changes. — Rafael, Apr 07 '17 at 00:51

Django: update only items that are checked

1 Answers1