Creating a jQuery Django Spinner Widget Tutorial

Creating a jQuery Django Spinner Widget Tutorial

Django Spinner Widget - Title
Complete Tutorial - 6 Minute Read

Why use a jQuery Django Spinner Widget?

The jQuery Django Spinner Widget is one of the more complicated jQuery Django Widgets to implement into your website. Not necessarily that the scripting is difficult – jQuery has done all this work for us, but rather that the applications of it seem to occur infrequently. What it does is it takes your text blank, which is expecting a number format input, and gives the user the ability to modify this text blank using up and down arrows.

The jQuery example of this is a donate widget on your site. Sometimes you’ll find yourself on a website that’s asking for a donation. Rather than check boxes or a plain number input blank, the website owner might of opted to use a spinner widget to add a little touch to their webpage.

It’s definitely something cool to learn if nothing else than the few times you can propose using this widget over something else. jQuery does give a good example on their site involving the use of their time spinner widget. This works the same way as described above, but it does so in a blank expecting time formatted values rather than just plain long numbers. We’ll cover the basic spinner in this tutorial.

jQuery Django Spinner Widget Example

See an Example of a jQuery Django Spinner 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.

Source Code for jQuery Django Widgets - Transition slide
First, we need the source code for the jQuery Django Spinner Widget

To get the source code for the spinner 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">
These two are just the styling jQuery uses by default.
<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() {
var spinner = $( "#spinner" ).spinner();
$( "#disable" ).on( "click", function() {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
});
$( "#destroy" ).on( "click", function() {
if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
}
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).on( "click", function() {
spinner.spinner( "value", 5 );
});
$( "button" ).button();
} );
</script>
Like always, the two first scrips are the ones which include all the widgets. Then the third script is setting up the functionality of the spinner widget. 
 
The spinner widget is, like I stated earlier, slightly complex. I had a hard time of finding a circumstance where you would need all the functionality that jQuery gives you in the default. I assume for most uses, that this widget would be stripped down to one or two functionalities. This is just giving the ability to use them all. It’s better to build robust and have more power than what you need, compared to too little!
Using the Spinner JavaScript to create a Django Spinner 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 Spinner Widget, you’ll need to create labels and buttons that correspond to the jQuery script above for each functionality.

<input id=“spinner” name=“value”>

Will give an input field that has the ‘spinner’ or two control arrows to the right of the blank. 

Then, you can begin creating buttons to increase the functionality of your spinner even further.

<button id=“disable”>Toggle disable/enable</button>

Will create a button that will disable your spinner. Or lock the value into the input field.

<button id=“destroy”>Toggle widget</button>

Will remove the spinner widget completely. This transforms the spinner back to the normal blank input text field. 

<button id=“getvalue”>Get value</button>

Will create a dialog box that will display to the user the current value entered. If you don’t know what a dialog box is, check out the jQuery tutorial on it here.

<button id=“setvalue”>Set value to 5</button>

The set value button created above, will set the input field to whatever you specified as the set value value in the scripts above. 

I didn’t change the source code on this one at all. To be honest, I had a hard time coming up with an example that would of used all the functionality. so I just left it as is and placed it into my extension of my django file. None the less I’ll post it below and you can find it here.

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

{% block content %}

<script>
$( function() {
var spinner = $( “#spinner” ).spinner();

$( “#disable” ).on( “click”, function() {
if ( spinner.spinner( “option”, “disabled” ) ) {
spinner.spinner( “enable” );
} else {
spinner.spinner( “disable” );
}
});
$( “#destroy” ).on( “click”, function() {
if ( spinner.spinner( “instance” ) ) {
spinner.spinner( “destroy” );
} else {
spinner.spinner();
}
});
$( “#getvalue” ).on( “click”, function() {
alert( spinner.spinner( “value” ) );
});
$( “#setvalue” ).on( “click”, function() {
spinner.spinner( “value”, 5 );
});

$( “button” ).button();
} );
</script>
</head>
<body>

<p>
<label for=”spinner”>Select a value:</label>
<input id=”spinner” name=”value”>
</p>

<p>
<button id=”disable”>Toggle disable/enable</button>
<button id=”destroy”>Toggle widget</button>
</p>

<p>
<button id=”getvalue”>Get value</button>
<button id=”setvalue”>Set value to 5</button>
</p>


</body>

{% endblock %}

That’s pretty much it whenever it comes to creating your own jQuery Django Spinner 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? Sign up for the newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

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