Creating a jQuery Django Selectmenu Widget tutorial

Creating a jQuery Django Selectmenu Widget tutorial

Django Selectmenu Widget - Title
Complete Tutorial - 9 Minute Tutorial

Why use a jQuery Django Selectmenu Widget?

The jQuery Django Selectmenu Widget gives the user the ability to make several selection options about a specific item to purchase or request.

These are especially helpful whenever you’re selling a service or product and you need to cater to the exact needs of the customer looking to purchase your services. 

Select menus give you the ability to request information from the user in a very clear and concise manner to deliver the best service. 

jQuery Django Selectmenu widget -example

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

To get the source code for the selectmenu 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() {
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
$( "#salutation" ).selectmenu();
} );
</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 selectmenu widget. 
 
jQuery also gives some additional styling for their selectmenu on their site. Feel free to edit this as it isn’t important for the functionality – just the look of your select menu widget. 
 
fieldset {border: 0;}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;}
Using the Selectmenu JavaScript to create a Django Selectmenu 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 Selectmenu Widget, you’ll need to begin by designating a fieldset. Then within each fieldset, you can label your desired inputs with the label tag:

<fieldset>
<label for=”labelname”>Label Name </label>

Then you’ll need to include all your options into an HTML select tag. 

<select name=”select1″ id=”select1″>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
<option>Option #4</option>
<option>Option #5</option>
</select>

and then of course close with your fieldset tags once you’re done. This will provide you with a drop down django selectmenu widget that the user will be able to click and then select one option from the menu. 

What if you want to create subheadings within the selectmenu for a variety of different products or services?

You would do this by using the HTML tag optgroup:

<optgroup label=”Label name”>

You would include this tag above your option tags whenever you want to create a new subheading within your jQuery Django selectmenu widget.

 

I only changed jQuery’s source code slightly for this example. Remember you can always view the live example at the Heroku hosted Django web app found here.

 

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

{% block content %}
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
</style>
<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() {
$( “#script” ).selectmenu();

$( “#files” ).selectmenu();

$( “#number” )
.selectmenu()
.selectmenu( “menuWidget” )
.addClass( “overflow” );

$( “#salutation” ).selectmenu();
} );
</script>
</head>
<body>

<div class=”demo”>

<form action=”#”>

<fieldset>
<label for=”script”>Scripting Language</label>
<select name=”script” id=”script”>
<option>Python</option>
<option>Ruby</option>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>

<label for=”files”>Select a Tutorial</label>
<select name=”files” id=”files”>
<optgroup label=”Languages”>
<option value=”jquery”>jQuery</option>
<option value=”Javascript”>Javascript</option>
</optgroup>
<optgroup label=”Length of Tutorial”>
<option value=”10min”>Less than 10 minutes</option>
<option value=”10plus”>More than 10 minutes</option>
</optgroup>
</select>


<label for=”number”>Would you like visual copies?</label>
<select name=”number” id=”number”>
<option>No thank you</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>

<label for=”salutation”>Select a title</label>
<select name=”salutation” id=”salutation”>
<option disabled selected>Please pick one</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
<option>Other</option>
</select>
</fieldset>

</form>

</div>

{% endblock %}

Quick review:

  • You have the ability to make subheadings within your given selectmenu’s by using the html tag of optgroup.
  • No limit to the number of options you can place into your selectmenu widget

That’s pretty much it whenever it comes to creating your own jQuery Django SelectMenu 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. 

Other jQuery Django Widget Tutorials:

Leave a Reply

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