Utilizing the toggle switch functionality in Django with a boolean field implementation

Question

Utilizing the toggle switch functionality in Django with a boolean field implementation

My work_experience model includes an "is_working" field which is set to true when a user is currently employed at a company. I am using a toggle switch on the front end and would like to update the boolean field value for "is_working" with a click. What logic should I implement to use the toggle in Django?

Toggle switch

HTML

<div style="display:inline-block">
    <label>Currently working here?</label>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>

Model

class Work_Experience(models.Model):
    job_title       = models.CharField(max_length=100, null=True, blank=True)
    company         = models.CharField(max_length=100, null=True, blank=True)
    description     = models.CharField(max_length=300, null=True, blank=True)
    exp_start_date  = models.DateField(null=True, blank=True)
    exp_end_date    = models.DateField(null=True, blank=True)
    is_working      = models.BooleanField(default=False)

javascript html css django

Answer 1

Answer №1

Avoid using the null=True parameter with the CharField as it is not a good practice.

To toggle the boolean field value is_working on click, Jquery must be used.

I developed an app called toggle, make sure to replace it with the name of your own app.

Below is the complete code:

urls.py::

from django.urls import path
from toggle.views import home, toggle

urlpatterns = [
    path('', home),
    path('toggle/', toggle),
]

views.py:

from django.shortcuts import render
def home(request):
    w, created = Work_Experience.objects.get_or_create(id=1)
    return render(request,'home.html', {'workexperiance': w})

from django.http import HttpResponse
from toggle.models import Work_Experience
def toggle(request):
    w = Work_Experience.objects.get(id=request.POST['id'])
    w.is_working = request.POST['isworking'] == 'true'
    w.save()
    return HttpResponse('success')

home.html:

<div style="display:inline-block">
    <label>Currently working here?</label>
    <label class="switch">
        <input type="checkbox" id="checkbox" value="{{workexperiance.is_working}}">
        <span class="slider round"></span>
    </label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- Import Jquery Here-->
<script type="text/javascript">
$(document).ready(function() {
    $('#checkbox').change(function() {
        $.post("/toggle/", {
            id: '{{workexperiance.id}}', 
            isworking: this.checked, 
            csrfmiddlewaretoken: '{{ csrf_token }}' 
        });
    });
}); 
</script>

run: ./manage.py runserver and visit: http://localhost:8000

By clicking the Currently working here? checkbox, you can instantly toggle the "is_working" boolean field value.

Answer 2

Avoid using the null=True parameter with the CharField as it is not a good practice.

To toggle the boolean field value is_working on click, Jquery must be used.

I developed an app called toggle, make sure to replace it with the name of your own app.

Below is the complete code:

urls.py::

from django.urls import path
from toggle.views import home, toggle

urlpatterns = [
    path('', home),
    path('toggle/', toggle),
]

views.py:

from django.shortcuts import render
def home(request):
    w, created = Work_Experience.objects.get_or_create(id=1)
    return render(request,'home.html', {'workexperiance': w})

from django.http import HttpResponse
from toggle.models import Work_Experience
def toggle(request):
    w = Work_Experience.objects.get(id=request.POST['id'])
    w.is_working = request.POST['isworking'] == 'true'
    w.save()
    return HttpResponse('success')

home.html:

<div style="display:inline-block">
    <label>Currently working here?</label>
    <label class="switch">
        <input type="checkbox" id="checkbox" value="{{workexperiance.is_working}}">
        <span class="slider round"></span>
    </label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- Import Jquery Here-->
<script type="text/javascript">
$(document).ready(function() {
    $('#checkbox').change(function() {
        $.post("/toggle/", {
            id: '{{workexperiance.id}}', 
            isworking: this.checked, 
            csrfmiddlewaretoken: '{{ csrf_token }}' 
        });
    });
}); 
</script>

run: ./manage.py runserver and visit: http://localhost:8000

By clicking the Currently working here? checkbox, you can instantly toggle the "is_working" boolean field value.

Answer 3

Answer №2

If you're okay with the page being refreshed, this is how I would tackle it:

views.py:

from django.urls import reverse_lazy
from .models import Work_Experience
from django.shortcuts import redirect

def update_status(request,pk):
    status = Work_Experience.objects.get(id=pk)
    status.is_working^=True
    status.save()
    return redirect(reverse_lazy('index.html'))

urls.py

from django.urls import path
from .views import update_status

urlpatterns = [
    ...
    ...
    ...
    path('update-status/<int:pk>/', update_status, name='update-status'),
]

index.html

<div style="display:inline-block">
  <label>Currently employed?</label>
  <a href="{% url 'update-status' task.id %}">
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </a>
</div>

Answer 4

If you're okay with the page being refreshed, this is how I would tackle it:

views.py:

from django.urls import reverse_lazy
from .models import Work_Experience
from django.shortcuts import redirect

def update_status(request,pk):
    status = Work_Experience.objects.get(id=pk)
    status.is_working^=True
    status.save()
    return redirect(reverse_lazy('index.html'))

urls.py

from django.urls import path
from .views import update_status

urlpatterns = [
    ...
    ...
    ...
    path('update-status/<int:pk>/', update_status, name='update-status'),
]

index.html

<div style="display:inline-block">
  <label>Currently employed?</label>
  <a href="{% url 'update-status' task.id %}">
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </a>
</div>

Utilizing the toggle switch functionality in Django with a boolean field implementation

Answer №1

Answer №2

Similar questions

The functionality of the offcanvas button is not working correctly

Issues with Submitting Form using Jquery, PHP, and Mysql

What's causing these divs to be misaligned in various directions?

Cube.js Highlights of the Week and Month

Displaying Local Storage Data in Primeng Dropdown

How to Safely Merge Data from Several Excel Files into a Single Worksheet in Google Sheets using ExcelJS without Overwriting Existing Data

Can you explain the significance of the ">" symbol within CSS coding?

Tips on customizing the MSAL login commands for successful integration with numerous users

Tips for recovering lost files that were inadvertently deleted during a merging process

Step-by-step guide: Deploying your app to Heroku with Babel and ES6 support

Troubleshooting: Issue with passing parameters in Wordpress ajax function

Unleashing the Power of Node Js: Retrieving File Data and Form Data in POST Requests

Challenges encountered when retrieving parameters from union types in TypeScript

When I use the AngularJS otherwise function, it sends me to the incorrect route

creating an audio streaming application using child processes in nodejs

Adapting the position of a table row in AngularJS based on the

The dynamic change of a required field property does not occur

Arrange the parallel table columns within their own individual divs to be perfectly aligned

Using CSS styling to dictate how browsers display web content, specifically through setting font size measurements in EM

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index