title: Django / jQuery - Button to update a value on each row of a table
body: <p>I am just learning Django, so I am making an app that can keep track of books with a Boolean for whether I have read them or not as a learning project. The model is relatively self explanatory books have title and id and a boolean completed "field". I want to have a page that lists the books and has a button next to each book that will change the read status to True and update immediately using AJAX/jQuery (and eventually a similar unread button for mistakes). I am having trouble getting the button to work. Specifically I think I need to somehow assign some sort of id to each row so that jQuery knows which item it is working with.</p>
  
  <p>Apologies for any obvious errors. I am new to web programming and I regret having to ask you all for help, but I have been trying to work out a solution myself for a few days now.</p>
  
  <p>Here is the django template snippet:</p>
  
  <pre><code>{% for book in lib_dict.books %}
  &lt;tr&gt;
      &lt;td&gt;{{ book.title }}&lt;/td&gt;
      &lt;td&gt;{{ book.date_due }}&lt;/td&gt;
      &lt;td id="book_completed_{{ book.id }}"&gt;{{ book.completed }}&lt;/td&gt;
      &lt;td&gt;
          &lt;button id="{{ book.id }}" data-bookid="{{ book.id }}" class="btn-mini btn-primary c" type="button"&gt;Complete&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  {% endfor %}
  </code></pre>
  
  <p>views.py:</p>
  
  <pre><code>def complete_book(request):
      context = RequestContext(request)
      book_id = None
      if request.method == 'GET':
      book_id = request.GET['book_id']
  
      if book_id:
      book = Book.objects.get(id=int(book_id))
      if book:
          book.completed = True
          book.save()
  
      return HttpResponse(book.completed)
  </code></pre>
  
  <p>jQuery code - I would imagine the error(s) are here</p>
  
  <pre><code>$('.btn-mini btn-primary c').click(function(){
      var bookid;
      bookid = $(this).attr("data-bookid");
      $.get('/libco/complete_book/', {book_id: bookid}, function(data){
          var bookstring = '#book_completed_' + bookid;
          $(bookstring).html(data);  \\trying to update the completed table cell
          $('#bookid').hide();   \\trying to hide the button
      });
  });
  </code></pre>
  
  <p>Please note, all of the connectivity works fine. If I just make this button for a single row with a dedicated id, and use the appropriate #-tag in the first line of the jQuery it works, but I am having trouble with the generalization. Maybe the "." thing isn't the way to get the class in the first line?</p>
  
  <p>Also, I am very much trying to teach myself, so if there are any good resources for this kind of thing please let me know. I started working on the official jQuery tutorial, but I looked through it quickly and nothing seemed too related to this.</p>
  
  <p>Thanks you all!</p>