Back to free scripts page
Good practice for long
term projects,
Question taken from some site. User wish to make this code working .
<script>
$('[name="Lab Elective"]').on('change', function()
{
$('#Lab Elective g').toggle(this.checked);
}).change();
</script>
<input type="checkbox" name="Lab Elective" id="Lab Elective"
value="some value">
<select id="Lab Elective g" name="Lab Elective g">
<option value="some value">some
value</option>
</select>
Of course, this code can be simply fixed. But I want to say about good
practices.
The user is used as the ID of the "Lab Elective g" element, including
spaces. Now most browsers use HTML5, and html5 allow spaces in the ID.
But HTML4 specifications - do not allow spaces in the ID. So, doing
this, you lose backward compatibility. And the worst thing is, there
are many
browsers in the world, you can not imagine how many different browsers
on different devices. And while you may have a problem
even in HTML5 browsers.
Another problem that makes space in IDs is jquery performace. Selecting
an element by ID is faster than searching for an attribute value.
With a normal identifier, you can refer to it as $('#Lab_Elective_g'),
but with spaces as $ ('input [id="Lab Elective g"]'), and it's slower.
If you do this in one place, nothing bad will happen. But if you do
this many times, in cycles and on some slow devices like TV ...
The second problem is the .toggle () function in jQuery. Usually it
works as it should. But it is not reliable, sometimes the simplest
changes in design
make it not work. And even now you do this, and then the design changes
can create a problem. It is a pity that it can be hidden
when you do not see it until users find it. As my experience, only 5%
of users report a problem if they create a problem for them,
and may not report at all. It may just be a hidden function that you
spend a lot of time on. In this code, this is a deferred action. The
best thing
change to show() / hide(). Also this will make it easy to play as
fadeIn()/fadeOut(), if necessary.
The third problem is checkbox refference. It is allocated as $ ('[name
= "Lab Elective"]'), and again slow, also what happens if there is
Two forms with an element called "Laboratory choice"? Yes, both will be
affected. You have to be as accurate as possible. And if now there is
only one
forms, and you never plan to add another, and then again delay the
action in your code. Once someone else can add a similar form. That's
better
assigns this identifier of the element, presenting it to the form and
referent element within the form. Like $('#form_name input [name = "Lab
Elective"]'). But better
directly added to the element.
The fourth problem. Initial state. This code is run when an item has
been changed. But what about the initial state. Of course, you can
expect
This check box is selected or cleared. But what if the following code
is changed? This can be done in the simplest way, only in php-code,
and make a quick fix. And this fix can only be done by the php
programmer, not by the frontend programmer.
Fifthly, this is not a big problem, but there is a difference between
the "change" and "click" handlers. "Click" is launched immediately
after clicking on
checkbox, but "change" start the bit later. And sometimes there is a
delay that can be seen. Click on the user's flag and do not see that it
changes
The second. Of course, switching to the "click" event is good only for
the checkboxes.
A few lines of code are simple, but they make code like a bomb. If this
code is absolutely final, you can just fix it. But if there are many
people there
work on the same project, the project grows, then you need to write it
in another way.
<script>
function show_hide_selectbox_lab_elective_g()
{
if( $('#Lab_Elective').is(':checked' )
{
$('#Lab_Elective_g').show();
}
else
{
$('#Lab_Elective_g').hide();
}
}
$(document).ready(function() {
$('#Lab_Elective').on('click', function() {
show_hide_selectbox_lab_elective_g()
});
show_hide_selectbox_lab_elective_g();
//set initial state
});
</script>
<input type="checkbox" name="Lab Elective" id="Lab_Elective"
value="some value">
<select id="Lab_Elective_g" name="Lab Elective g">
<option value="some value">some
value</option>
</select>
Why I do extra function ? First need do not duplicate code
that can be not duplicated . It need for 'click' handler and also to
set initial
state . Later logic of the code may be changed , but you still will
modify just single function . How it can change ?
Let say if you will wish to clear some text before show
<select> or change some other element value , or
show/hide more elements, so on .
This make code that can grow without completely rewrite . And
programmer will see all logic quickly .
Why do I do an additional function? First of all, you do not need to
build code that duplicated. This is necessary for the 'click' handler,
as well as for setting the initial
state. The later logic of the code can be changed, but you will still
only change one function. How can this change?
For example, if you want to clear the text before displaying
<select> or change another item value or show / hide more
elements and so on.
This makes code that can grow without full rewriting. And the
programmer will quickly see all the logic.
