Creating a jQuery Django Checkboxradio Widget Tutorial

Creating a jQuery Django Checkboxradio Widget Tutorial

Django Checkboxradio Widget - Title
Complete Tutorial - 12 Minutes

Why use a jQuery Django Checkboxradio Widget?

The jQuery Django checkboxradio Widget enhances typical radio select and check box fields on your Django application. 

Say you have an application that you need to give the user an ability to query specific sets of data or other words search for something specific on your site. jQuery’s example of this is whenever you’re searching for Hotels. You’ll likely need to make a selection of one location, but then in some other fieldsets have multiple different options.

An application that I can think of quickly is to enhance this blog site. Say you want to give the user the ability to query the site for tutorials about a certain language, and then the relative difficulty and time with each tutorial. I tweaked jQuery’s No Icons example for this on the live site

jQuery Django checkboxradio widget - Example
Example of a jQuery Django Checkboxradio widget

See an Example of a jQuery Django Autocomplete Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

First, we need the source code for the jQuery Django checkboxradio Widget

To get the source code for the accordion widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below:

<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel=“stylesheet” href=“/resources/demos/style.css”>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "input" ).checkboxradio();
} );
</script>
Like most of the jQuery widgets available, there’s some different functionalities created. Usually whenever I’m doing these Django tutorials I’ll use the default one to keep things simple. but this time I’d like to use the one labeled ‘no icons’ – I think it’ll cover the basics of what you should know. 

Using the Checkboxradio JavaScript to create a Django Checkboxradio Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Checkboxradio Widget, you first need to designate a fieldset. jQuery knows how to handle the field ‘<legend>’ as well and will make it look nice if you wish to use it. Then you’ll need a label and input field for each item in your fieldset. 

Then you’ll need to decide between either a radio select or a checkbox. The Difference of a radio select from a check box, is that only one item can be selected in a radio select. Multiple items can be selected from a checkbox fieldset. 

So in my example above, I only want the user to be able to lookup results for one language at a time (CSS, HTML, Django, etc.) That way the user isn’t deep in learning Javascript and runs into an SQL statement tutorial that they don’t understand yet. 

Layout of a radio select (Only one able to be selected per field set):

  <fieldset>
    <legend>Name of Fieldset </legend>
    <label for=”radio-1″>Option #2</label>
    <input type=”radio” name=”radio-1″ id=”radio-1″>
    <label for=”radio-2″>Option #2</label>
    <input type=”radio” name=”radio-1″ id=”radio-2″>
  </fieldset> 

We would have two options from the code above. An ‘Option #1’ and ‘Option #2’ field that the user would be able to click. We have specified it as a radio select option by typing the input type as radio. The name Radio-1 gives jQuery the authority to create the widget, and then the id will be the value submitted once a used clicked a POST or GET button. 

But what if you want the user to select multiple options in the fieldset? Then you would opt for the option of checkboxs and use code something similar to the following:

<fieldset>
<legend>Legend Name:</legend>
<label for=”checkbox-1″>Option #1</label>
<input type=”checkbox” name=”checkbox-1″ id=”checkbox-1″>
<label for=”checkbox-2″>Option #2</label>

<input type=”checkbox” name=”checkbox-2″ id=”checkbox-2″>

</fieldset>

Here we’ve again told Django that we have a fieldset. We’ve specified a name of the options with the legend field. However this time we want the user to be able to select multiple options. That’s why we’ve used the checkbox-1, checkbox-2 naming scheme. 

You aren’t limited to two fields in the fieldset, I just didn’t want to list a lot out in fear of confusing anyone. 

 

Full Code from the jQuery Django radioboxselect widget site

Let’s take a look at the full code from the live jQuery Django Widgets Site hosted by Heroku. 

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<script>
$( function() {
$( “input” ).checkboxradio({
icon: false
});
} );
</script>

<div class=”widget”>
<h1>Checkbox and radio button widgets</h1>

<h2>Radio Group</h2>
<fieldset>
<legend>Select a Tutorial Language: </legend>
<label for=”radio-1″>Python</label>
<input type=”radio” name=”radio-1″ id=”radio-1″>
<label for=”radio-2″>HTML</label>
<input type=”radio” name=”radio-1″ id=”radio-2″>
<label for=”radio-3″>jQuery</label>
<input type=”radio” name=”radio-1″ id=”radio-3″>
<label for=”radio-4″>CSS</label>
<input type=”radio” name=”radio-1″ id=”radio-4″>
</fieldset>

<h2>Tutorial Level</h2>
<fieldset>
<legend>Difficulty:</legend>
<label for=”checkbox-1″>Beginner</label>
<input type=”checkbox” name=”checkbox-1″ id=”checkbox-1″>
<label for=”checkbox-2″>Intermediate</label>
<input type=”checkbox” name=”checkbox-2″ id=”checkbox-2″>
<label for=”checkbox-3″>Advanced</label>
<input type=”checkbox” name=”checkbox-3″ id=”checkbox-3″>
<label for=”checkbox-4″>Whoa Bro Chill</label>
<input type=”checkbox” name=”checkbox-4″ id=”checkbox-4″>
</fieldset>

<h2>Length of Tutorial</h2>
<fieldset>
<legend>Average Completion</legend>
<label for=”checkbox-nested-1″>5 minutes
<input type=”checkbox” name=”checkbox-nested-1″ id=”checkbox-nested-1″>
</label>
<label for=”checkbox-nested-2″>10 minutes
<input type=”checkbox” name=”checkbox-nested-2″ id=”checkbox-nested-2″>
</label>
<label for=”checkbox-nested-3″>15 minutes
<input type=”checkbox” name=”checkbox-nested-3″ id=”checkbox-nested-3″>
</label>
<label for=”checkbox-nested-4″>20 minutes
<input type=”checkbox” name=”checkbox-nested-4″ id=”checkbox-nested-4″>
</label>
</fieldset>
</div>

{% endblock %}

Quick review of the above code:

  • Pretty simple repeating elements are occurring in both the radio and check boxes. Specify a div of ‘widget’ for jQuery’s scripts, a fieldset, and then label your input types accordingly.
  • The biggest thing to take away, and you’re probably tired of reading it by now, is that a radio select accepts one value while a checkbox will accept either a ‘clicked’ or not clicked value. Therefore you can have multiple inputs with checkboxes. 

But that’s pretty much it whenever it comes to creating your own jQuery Django Checkboxradio Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

 

Enjoy the Content? Join the Django Development Newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *