Wsrtjtyk

I'm trying to create a view that change a boolean and switch images from it, I already done it but I need to iterate between 12 values (asiento) and i only can point to one of them this is my Django code.

models.py:

class Asientos(models.Model):

asiento = models.CharField(max_length=2,primary_key=True)

status = models.BooleanField()

mesa = models.ForeignKey(Reserva)



def __str__(self):

    template = 'Asiento {0.asiento} de la mesa {0.mesa}'

    return template.format(self)

views.py:

def reservacion(request):

asientos = Asientos.objects.all()

if request.method == "POST":

    estatus = Asientos.objects.get(asiento=asientos)

    if estatus.status == True:

        estatus.status = False

    else:

        estatus.status = True

    estatus.save()



return render(request,"first_app/reservacion.html", {'asientos': asientos})

HTML:

<form enctype="multipart/form-data" action="{% url 'first_app:reservacion' %}"  method="post">

{% csrf_token %}

<div class="row">

{% for asiento in asientos %}

  {% if asiento.status %}

  <div class="col" ><input class="d-block w-100" value="" name="reservacion" type="image" src="{%static "/img/s6.jpg" %}" >{{asiento.asiento}}</div>

  {% else %}

  <div class="col" ><input class="d-block w-100" value="" name="reservacion" type="image" src="{%static "/img/sn6.jpg" %}" >{{asiento.asiento}}</div>

  {% endif %}

  {% if asiento.asiento == '6' %}

  </div>

  <div class="row">

    <div class="col">        </div>

    <div class="col">  <img src="{%static "/img/m1.jpg" %}" alt="">      </div>

    <div class="col">        </div>

  </div>

  <div class="row">

  {% endif %}



{% endfor %}

</div>

<input type="submit" name="" value="Reservar">

</form>

this code change the value only of the first Asientos.objects.get(asiento=asientos) even when i click another one it just change the value of the first object in my DB.

How can i change the value of the object that i click?

There are multiple way to achieve this. This is probably the most basic:

1. 
   

   Change reservacion() to:

   
   
   

   def reservacion(request, asiento_id=None):
   
       if asiento_id:
   
           estatus = Asientos.objects.get(pk=asiento_id)
   
           if estatus.status == True:
   
               estatus.status = False
   
           else:
   
               estatus.status = True
   
           estatus.save()
   
       asientos = Asientos.objects.all()
   
       return render(request,"first_app/reservacion.html", {'asientos ': asientos })
   
   

   
   


2. 
   

   Change url to something like this:

   
   
   

   path('asiento/', views.reservacion, name='asientos'),
   
   path('asiento/change_status/<int:asiento_id>/', views.reservacion, name='reservacion_status')
   
   

   
   


3. 
   

   Change html to:

   
   
   

   <div class="row">
   
   {% for asiento in asientos %}
   
       {% if asiento.status == True %}
   
       <div class="col">
   
           <a href="{% url 'reservaction_status' asiento.pk %}"  class="d-block w-100">{% static '/img/s6.jpg' %}</a>
   
       </div>
   
       {% else %}
   
       <div class="col">
   
           <a href="{% url 'reservaction_status' asiento.pk %}"  class="d-block w-100">{% static '/img/sn6.jpg' %}</a>
   
       </div>
   
       {% endif %}
   
   {% endfor %}
   
   </div>
   
   

   
   

If you want to use POST method, then one fairly basic approach is with Javascript/jQuery.

1. 
   

   Change reservacation() to:

   
   
   

    def reservacion(request):
   
       asientos = Asientos.objects.all()
   
       if request.method == 'POST':
   
           asiento_id = request.POST.get('asiento', None)
   
           if asiento_id:
   
               estatus = Asientos.objects.get(pk=asiento_id)
   
               if estatus.status == True:
   
                   estatus.status = False
   
               else:
   
                   estatus.status = True
   
               estatus.save()
   
               return JsonResponse({'status': 'Success', 'msg': 'Status changed'})
   
       return render(request,"first_app/reservacion.html", {'asientos ': asientos })
   
   

   
   


2. 
   

   Your url is probably right. Should be something like this:

   
   
   

   path('asiento/change_status/', views.reservacion, name='reservacion_status')
   
   

   
   


3. 
   

   Change html to:

   
   
   

   <div class="row">
   
   {% for asiento in asientos %}
   
       {% if asiento.status == True%}
   
       <div class="col"><input class="d-block w-100" type="image" src="{% static '/img/s6.jpg' %}" name="asiento" value="{{ asiento.pk }}"></div>
   
       {% else %}
   
       <div class="col"><input class="d-block w-100" type="image" src="{% static '/img/sn6.jpg' %}" name="asiento" value="{{ asiento.pk }}"></div>
   
       {% endif %}
   
   {% endfor %}
   
   </div>
   
   <script>
   
       $(document).ready(function() {
   
           $("[name=asiento]").on("click", function() {
   
               var formData = {"csrfmiddlewaretoken": "{{ csrf_token }}", "asiento": $(this).val()}
   
               $.ajax({
   
                   url: "{% url 'reservaction_status' %}",
   
                   method: "POST",
   
                   data: formData,
   
                   success: function(msg) {
   
                       if (msg.status == "Success") {
   
                           location.reload();
   
                       } else {
   
                           alert("Error changing status");
   
                       }
   
                   }
   
               })
   
           }
   
       });
   
   </script>
   
   

   
   

I guess that's a good start. This code can be improved in a number of ways, but that's beyond this question.