Creating a jQuery Django Controlgroup Widget Tutorial

Creating a jQuery Django Controlgroup Widget Tutorial

django controlgroup widget - Title
Complete Tutorial - 10 Minute Read

Why use a jQuery Django Controlgroup Widget?

The jQuery Django Controlgroup Widget is useful whenever you have a lot going on in your user input forms. In just a few sentences, jQuery takes the mess that multiple checkboxes, radio selects, drop down menus, etc would be, and transforms it into a simple, easy to navigate control group selection. 

This is a good one to learn, because if you’re looking to start developing for long time companies, or even start ups, they’re going to have very complex user input fields most likely. There’s countless products out there – enough to satisfy every individual’s personal preference. So to sell a product you’re going to have to figure out exactly what a consumer wants. 

This is done by either pitching a product and making the user want this product because of your pitch. Or, the much more likely option, asking the consumer enough questions to figure out exactly what you can sell to them. That’s when jQuery Django controlgroup widgets really shine. 

jQuery Django Controlgroup Widget - Example

See an Example of a jQuery Django Controlgroup 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 Controlgroup Widget

To get the source code for the controlgroup 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. This one’s a tad bit unique, because jQuery chose to style their controlgroup inside the script containing file. I’ll include that below too for the vertical example we’ll work through. 

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

<link rel=“stylesheet” href=“/resources/demos/style.css”>
 
<style>
.ui-controlgroup-vertical {
width:150px;
}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
text-align: center;
}
.ui-controlgroup-horizontal .ui-spinner-input {
width:20px;
}
 
<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() {
$( ".controlgroup" ).controlgroup()
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
} );
</script>
jQuery covers both  horizontal and vertical design. They’re pretty much the same, so I’m just going to cover the vertical one because it had the additional styling that comes with it. If you can code along with this one the horizontal one will be fine to implement too.
Using the Controlgroup JavaScript to create a Django Controlgroup 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 Controlgroup Widget, specify a fieldset, and then a div class of widget. It’s pretty straight forward. Then jQuery works it’s magic in making everything look nice and tidy. 

jQuery Django Widget Live Example Transition - Title Slide
Source code for the jQuery Django Controlgroup Widget on the live site:

Here’s the source code copied straight from the live site and we’ll go through it a bit.

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

{% block content %}
<script>
$( function() {
$( “.controlgroup” ).controlgroup()
$( “.controlgroup-vertical” ).controlgroup({
“direction”: “vertical”

});
} );
</script>
<style>
.ui-controlgroup-vertical {
width: 150px;
}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
text-align: center;
}
</style>
<div class=”widget”>
<fieldset>
<legend>What Type of software are you looking to purchase?</legend>
<div class=”controlgroup-vertical”>
<select>
<option>Photo Editing</option>
<option>Web Design</option>
<option>Productivity</option>
<option>Analytics</option>
<option>Machine Learning</option>
<option>Cloud Solutions</option>
<option>Business, Microsoft</option>
</select>
<label for=”private-use”>Private Use</label>
<input type=”radio” name=”Use” id=”private-use”>
<label for=”commerical-use”>Commerical</label>
<input type=”radio” name=”Use” id=”commerical-use”>
<label for=”Service”>Need Development Help?</label>
<input type=”checkbox” name=”service-contact” id=”servicehelp-v”>
<label for=”vertical-spinner” class=”ui-controlgroup-label”># of users (1 if private use)</label>
<input id=”vertical-spinner” class=”ui-spinner-input”>
<button id=”generate”>Generate Results</button>
</div>
</fieldset>
</div>

{% endblock %}

Let’s do a quick review:

  • I’ve given the user the ability to select the type of software they’re looking to purchase in the form of a drop down menu. Then the radio select option of if they’re either private or commerical in their intended use. They can’t be both, so that’s why it’s a radio select and not a check box. Then The option of if they would like to employ assistance in the form of a check box – either yes or no. Finally we give the field to collect the information of how much users will need copies of this software. 

That’s pretty much it whenever it comes to creating your own jQuery Django Controlgroup 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 this content? Subscribe to the newsletter! 

Other jQuery Django Widget Tutorials:

Leave a Reply

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