►
From YouTube: Very, Very Basic jQuery - George Williams
Description
Resources:
https://will1410.github.io/presentations/very.very.basic.jQuery.html
Chat logs:
02:28:00 Fred King: One of my favorite Koha stories, which I hope is true, is that someone posted to a Koha list saying "Koha doesn't do (x)." Next morning came the reply "it does now."
02:34:41 Christopher Brannon: What? I thought you were sleeping during my presentation!
02:37:32 Tasha: Maybe a question for later on in the presentation--is it possible to debug non-working jQuery in Firefox? I haven't managed to figure that out.
02:38:00 Christopher Brannon: If you don't want all instances everywhere (on every page) affected, it is good to know the page ID and limit to just that page.
02:38:07 Tasha: Thank you
02:39:15 Christopher Brannon: F12 will open the tools, and you can also right click on something on a webpage and click on inspect.
02:39:18 Fred King: Somehow, online conferences are more exhausting than in-person conferences, wonderful though they are.
02:40:09 Jason: The console tab specifically in the inspector can be helpful in finding errors
02:43:27 Fred King: Have to go now. Thank you to everybody, this has been a great conference. Bye!
02:43:36 Christopher Brannon: So maybe have two, one for tested code, and one for new stuff you are testing.
02:45:45 Christopher Brannon: ^ Referring to the $(document).ready(function(){ sections. 2 sections might be ideal.
02:46:35 Jason: I have a bajillion $(document).ready(function(){ sections, don't judge me plz
02:48:14 TJ Rutkowski: What if the HTML does not have a CLASS? Or, if it is used by multiple elements?
02:48:33 TJ Rutkowski: Is it better to use JS vs CSS?
02:48:52 Daniel Gaghan (PPLD): George do you do a basic CSS for Koha?
02:48:56 Christopher Brannon: I'm judging you Jason.
02:49:04 Jason: I know.
02:49:27 George Williams - NEKLS: .icon_lists
02:51:06 Christopher Brannon: CSS is good for basic formatting you always want to happen. jQuery is good for dynamically changing CSS elements. But you can also do that in combination with classes as well.
02:52:28 George Williams - NEKLS: $('#main_intranet-main .biglinks-list .icon_general.icon_lists').hide();
02:54:13 Jason: I always try to fix things with CSS before resorting to JS, someone somewhere told me that is lighter? less burdensome? has less impact on load times? Something?
02:58:29 Elaine Bradtke: Seems to me css is potentially more general, js can be very particular.
02:59:52 Jason: yes! CSS is sort of cosmetic, JS can have logic. You want to make text red, use CSS. You want to make it Red IF it's a certain word then JS
03:02:53 Wally DesChamps: I LOVE this...we only have ONE library...and that extraneous thing bugs me...so, I'm glad to be able to get rid of it.
03:04:36 George Williams - NEKLS: $('#main_auth #branch').parent().hide();
03:09:46 Wally DesChamps: During upgrades, are these customizations likely to be broken?
03:11:43 Christopher Brannon: It's also a good idea to review, because sometimes the changes you make are actual features in newer versions.
03:12:28 Barbara Johnson: One thing to be aware of with the 21.05 upgrade is that the OPAC changes from Bootstrap 3 to Bootstrap 4. If you have a lot of customizations, then your code may need some updating in order to display properly.
03:13:25 Jason: If I fix something with jQuery and find a related bug or file a related bug, I like to put that bug number in the comment of my jQuery to remind me to remove it later
03:13:49 Heather Hernandez (she/her): That's such a great idea, Jason!
03:13:53 Lauren Denny: can you limit changes to one library in a consortium?
03:13:57 Christopher Brannon: Yep. I do that too.
03:21:16 Lauren Denny: how do you limit code to one library instead of all?
A
A
Yesterday,
this
is
like
the
second
or
third
time.
I've
done
this
very,
very
basic
jquery
and
just
like
very,
very
basic
sequel
yesterday.
This
is
very,
very
basic.
I
mean
it's
for
people
that
just
have
that
have
that
are
starting
at
zero,
and
so,
if
you
have
ever
written
any
jquery,
this
is
probably
you're,
probably
already
past
the
point
of
where
this
would
be
useful.
A
Some
of
and
I've
got
all
the
notes
from
the
last
time
I
did
very,
very
basic.
Jquery
plus
I've
got
some
of
the
notes
from
what
I
did
very
basic
jquery
and
I'm
just
going
to
kind
of
go
for
about
an
hour,
and
if
anybody
has
any
questions,
ask
you
know
interrupt,
don't
be
afraid
to
interrupt.
This
is
more
fun
to
do
this
kind
of
workshop
in
person,
because
there's
all
the
people
around
you
and
people
feel
more
more.
B
A
Interrupt
and
ask
questions,
but
you
know
don't
be
afraid
to
interrupt,
don't
be
afraid
to
ask
questions,
so
you
should
all
see
a
web
page.
That
says
very,
very
basic
jquery
for
cohaba
is
that
is
that
what
you're
seeing
jason's
nodding
his
head
and
that's
where
you
can
find
that
presentation?
The
link
is
in
the
chat
box
there.
A
A
A
There
was
no
way
after
the
request
had
been
placed
to
change
the
pickup
location.
You
would
have
to
go
in
and
cancel
the
request
and
then
replace
the
request
with
the
new
location,
and
so
that
was
what
we
asked
for
a
simple
thing:
can
you
change
it
so
that
we
can
change
the
the
pickup
location
after
a
request
has
been
made
that
I
think
we
asked
for
that
in
2006.
A
like
in
about
2010?
Four
years
later
they
said:
hey,
we
added
that
feature.
You
really
wanted
and
they
added
it
in
the
next
version
and
it
had
bugs
in
it,
and
you
would
try
to
change
your
pickup
location
and
the
whole
system
would
crash
and
you'd
have
to
restart
the
the
the
client
which
was
not
a
web-based
client.
You
would
have
to
restart
the.
A
You
can
make
modifications
to
the
way
things
look
on
the
screen
and
sometimes
to
the
workflows,
and
sometimes
the
way
the
system
acts
without
having
to
find
a
developer,
to
write
some
code
and
go
through
the
whole
process
of
getting
the
code
into
the
into
the
system
and
and
making
it
work
right.
You
can
just
do
it
yourself,
sometimes
in
just
a
few
minutes.
A
If
you
know
these,
if
you
know
these
the
way
to
write
some
basic
jquery,
so
the
most
basic
answer
to
this
question
is
you
can
use
jquery
to
modify
the
way
quahog
looks
and
operates
without
having
to
do
a
development.
So
that's
why
it's
worth
knowing
the
next
question
that
I
usually
get
when
I'm
talking
about
jquery
is
what
is
jquery.
This
is
like
yesterday's
question.
A
A
So
here
on
this
in
the
web
page
there's
an
example.
This
is
the
javascript
for
how
to
hide
a
selector,
how
to
hide
something
in
html.
You
have
to
get
the
element
by
the
id,
you
have
to
know
the
selector,
and
then
you
change
dot
style.
Dot
display
equals
none
the
same
command
in
jquery.
Is
you
put
in
the
selector
dot
hide,
so
it's
a
much
simplified
version
of
some
javascript,
so
all
of
this
stuff
is
replaced
by
selector,
and
all
of
this
stuff
is
replaced
by
this.
A
If
we
go
to
jquery.com,
this
is
the
full
manual
for
jquery
all
the
commands.
The
full
documentation
is
here
so
anything
you
want
to
know
about
writing
jquery.
This
is
the
official
jquery
site
and
all
of
the
commands
and
the
full
documentation.
Is
there
and
that's
great.
You
know
if
you've
been
doing
it
for
a
while,
and
you
want
to
look
up.
You
want
to
try
and
remember
how
to
use
a
specific
function.
A
There's
also
like
I
mentioned
yesterday
with
sql.
There
is
a
w3
website
and
w3
is
the
place
where
you
go
and
they'll
want
you
to
go
through
their
whole
tutorial,
take
their
class
and
then
send
them
like
100
bucks
and
then
they'll
send
you
a
certificate
that
says
yay,
you're
you're
certified
by
w3schools
and
jquery,
but
you
can
do
all
of
this
stuff.
Without
paying
any
money
you
can
you
can
access
the
full
site,
it's
only
if
you
want
the
certificate
which
is
kind
of
irrelevant
to
that,
you
need
to
pay.
A
So
these
are
both
good
sites
and
our
library
subscribes
to
linkedin
learning,
which
used
to
be
lynda.com.
I
found
a
linkedin
learning
course
for
jquery.
There
is
a
linkedin
learning
course,
and
so
it
gives
you
you
know
if
you
want
a
formal
course
in
how
to
do
this,
with
somebody
explaining
explaining
everything
to
you
and
your
library
or
a
library
in
your
area
that
you
have
access
to
uses,
lynda.com
or
linkedin
learning.
There's
this
one
and
there's
a
couple
of
others.
A
I
didn't
really
cover-
I
mentioned
it
up
here,
but
I
kind
of
skipped
over
it.
There
are
four
system
preferences
that
really
govern
where
you
can
use
jquery
and
what
you
can
do
with
it,
and
the
easiest
way
to
find
all
of
these
system
preferences
is
just
go
to
the
coho
admin
and
search
system
preferences
for
js,
and
there
is
the
javascript
for
the
self
checking
user
and
I'm
on
the
koha
us
demo
site.
A
A
And
we
have
the
internet
user.js.
This
one
adds
javascript
adds
jquery
to
your
opac,
and
this
one
adds
jquery
to
your
internet.
There
is
a
fifth
one
called
intranet
slip,
printer
js,
that
I
don't
know
that
I
don't
know
of
anybody,
that's
using
this,
because
it
also
requires
that
you
use
it
in
conjunction
with
the
firefox
plug-in
and
this
plug-in
hasn't
been
updated
since
2016.
A
A
B
A
When
you
put
it
all
together,
you
get
a
dollar
sign,
left
parenthesis
quote
right,
parentheses,
dot,
parentheses,
parentheses
semicolon,
and
so
all
you're
really
doing
with
jquery
is
filling
in
these
blanks.
You
just
need
to
find
something
to
put
inside
the
quotes
and
something
to
put
in
front
of
that
second
set
of
parentheses.
A
B
A
Presentation
on
tuesday
about
facets,
it's
it's
really
helpful
to
when
you're
doing
things
with
coho.
If
you,
since
it
is
all
web-based
it's
not
a
bad
idea
to
know
some
basic
html,
because
the
things
that
you're
going
to
be
doing
with
cohab
you're,
going
to
be
you're,
going
to
be
modifying.
What's
on
the
screen
and
what's
on
the
screen
is
all
html.
A
B
A
A
A
You
can
open
the
inspector
click
on
this
arrow
button
over
here
and
then
click
on
course.
Reserves
and
then
it'll
highlight
it
down
here,
and
we
can
see
that
this
it's
an
anchor
and
it's
got
a
class
of
icon
general
icon
course,
reserves
and
then
there's
the
actual
href,
the
actual
link
to
where
that
go.
Where
that'll
take
you
in
cohab.
A
B
A
And
so
here's
a
question
from
tasha,
maybe
a
question
for
later
on
in
the
presentation:
is
it
possible
to
debug
non-working
jquery
firefox?
I
haven't
managed
to
figure
that
out.
That's
probably
not
a
good
question
for
this
presentation,
but
but
we
can
talk
about
that
later
in
the
working
sessions.
Christopher
might
be
a
good
person
to
jump
in
on
that
and
and
help
out
with
that
too.
A
And
I
did
mention
the
selector
it's
been.
I
have
done
this
presentation
a
couple
of
times,
but
I
haven't
done
in
a
while,
and
I
looked
over
pretty
quickly
last
night
because
I
was
so
happy
that
today
was
the
last
day
of
the
conference.
I've
really
enjoyed
this
conference,
but
man
it's
exhausting,
so
I
did
mention
the
how
to
find
the
selectors
control
shift.
I
is
the
way
I
always
open
the
developer
tools.
A
The
jquery
library
is
really
useful
and
one
of
the
things
you
need
to
know
about
the
the
staff
coin,
the
intranet
user.js
system
preference
is
it
requires
this
command
in
it
document
ready
function
and
then
you've
got
a
pair
of
curly
brackets
here
and
all
of
the
jquery
you
write
goes
in
the
middle
of
these
curly
brackets.
So
if
we
head
back
over
to
the
cohort
demo
site,
let
me
show
you
that.
A
A
A
And
there
are
two
schools
of
thought
on
this
command.
One
school
of
thought
is
that
every
piece
of
jquery
should
be
wrapped
inside
this
function
and
then
the
other
school
of
thought
is
you
just
put
it
at
the
beginning.
This
is
the
beginning
and
this
at
the
end,
and
everything
else
can
go
in
the
middle
in
between
there.
A
A
A
B
A
B
A
A
A
A
A
A
A
A
A
A
A
You
can
hover
over
the
the
element
and
right
click
it
and
say
copy
the
css
selector,
and
then
you
can
actually
I'll
paste
that
in
the
chat
box,
it's
just
telling
me
that
the
class
on
this
page-
that's
the
selector,
that
it
says
to
use
for
this
another.
A
way
that
you
can
narrow
in
is.
We
know
that
this
element
is
underneath.
Another
element
called
big
links,
dot
list.
A
A
So
here
we're
we're
step,
we're
specifying
you
know
we're
first,
we're
looking
for
that
element
for
anything
with
the
class
of
big
links,
dash
list
and
then
anything
in
that
anything
that
that
selects,
that
has
the
further
class
of
icon,
general
dot,
icon
lists,
and
we
can
even
go
further
and
it's
often
not
a
bad
idea
to
go
further.
This
whole
page
has
a
body
id
tag,
so
we
can
throw
in
the
body
id
of
main
internet
main,
so
you
can
keep.
A
B
A
B
A
A
Those
are
hard
to
find
and
generally
there's
a
really
complicated
way
of
of
identifying
them
and
then
wrapping
a
span
or
a
paragraph
tag
around
them
and
then
so
you,
you
use
jquery
to
add
an
element.
You
can
select
to
those
things
and
that's
probably
a
little
bit
beyond
what
I'm
saying.
We
are
doing
here
as
very,
very
basic
jquery.
So.
A
A
Like
these
buttons,
they
all
have
a
class,
so
the
the
html
will
say
class
equals
and
then
it
will
have
a
list
of
what
the
classes
are
to
select
by
class.
You
take
the
class
out
of
here
and
put
a
dot
in
front
of
it,
and
so
all
of
these
things
top
links
top
links,
my
checkouts
and
actually
actually,
let's
go
back
to
the
set
library,
because
I
think
that
might
be
why
that's
in
there
somewhere
another
I
got
thrown
off.
A
So
the
set
the
set
library
has
a
link,
but
the
or
it
has
a
class,
but
the
class
is
just
top
links,
and
so
I
think
there
are
some
other
things
that
have
the
class
top
links
and
that's
why,
in
this
example,
this
is
another
way.
You
can
select
things
this
one,
I'm
selecting
everything
with
the
class
of
top
links,
but
then
I'm
using
contains
to
say:
where
can
where
the
top
links
class
element
contains
the
texts
select
library
so.
A
A
There
are
a
couple
of
places
that
I
found
in
quahog,
where
the
ids
aren't
unique
and
there
were
more
of
those
like
five
years
ago
six
years
ago,
but
I
think
most
of
those
places
where
an
id
had
been
duplicated.
I
think
most
of
those
have
been
fixed
and
I'm
not
sure
that
I
know
of
any
duplicate
ids
in
cohab
anymore.
A
A
A
A
A
A
A
So
what
we
can
do
here
is,
we
can
say,
find
that
branch
and
we're
going
to
add
a
command
before
the
hide.
That's
called
parent,
and
so
what
that's
saying
is
find
on
main
off
find
something
with
where
the
id
is
main
off.
And
then,
when
we
look
beneath
that,
we're
going
to
look
for
the
id
of
main
branch
and
once
we
find
branch
we're
going
to
select
the
parent.
A
A
A
A
A
A
A
A
A
A
So
right
now
all
I've
talked
about
is
one
command
and
that's
hide.
We
can
actually
do
a
lot
more
with
with
jquery.
This
is
actually
one
of
the
first
pieces
of
jquery
that
I
ever
learned,
and
I
learned
it
from
ed
who
just
turned
his
computer.
On
a
few
seconds
ago,
ed
was
worked
for
bywater
when
I
did
my
very
first.
A
A
They
see
the
word.
One
of
them
sees
the
word
surname
and
asks
what's
a
surname
and
my
used
to
work
used
to
manage
a
restaurant
brain
says
if
if
one
person
is
complaining
about
something,
there
are
10
other
people
that
have
the
exact
same
complaint,
they
just
don't
have
the
courage
to
say
I
have
a
complaint
here.
So
my
thought
was,
you
know
if
she
doesn't
know
what
a
surname
is.
A
A
Under
the
label,
one
of
the
attributes
of
this
label
is
for
equals,
surname
and
so
label
f
and
then
in
square
brackets.
We
put
four
equals
surname
and
then
we're
just
telling
it
make
the
html
in
the
things
that
match
this
label
equal
surname,
and
this
one
is
saying,
make
the
first
name
match.
First
name
plus
line
break
middle
name,
and
then
we
went
on
and
we
did
the
exact
same
thing
to
nickname.
A
A
A
A
A
We
are
a
bywater
customer,
and
so
we
do
have
a
test
server
and
one
of
the
tasks
that
I
do
before
every
upgrade
is
I
go
through
the
jquery
and
all
of
the
customizations.
We
have
and
make
sure
that
they
all
work,
and
so
that's
one
of
the
reasons
I'm
being
pretty
fast
and
loose
with
this
here
today,
because
it's
just
a.
B
A
But
but
you
can
put
comments
into
the
jake,
the
jquery
system
preferences.
Jquery
comments
are
just
two
slashes
or
you
can
do
comments
like
this,
where
it's
slash
asterisk
and
then
asterix
and
any
comments
you
want
to
go
in
between
those
two
asterisks
and
generally.
What
I
do
like.
I
know
that
this
is
on
the
one
of
the
ways
that
I
make
it
simple
to
know,
exactly
which
page
I'm
doing
that
this
jquery
is
going
to
affect,
because
I
put
the
breadcrumbs
from
the
page
into
the
comments.
A
A
Already
in
our
system,
and
only
like
four
lines
of
it
had
been
commented
so
the
first
time
I
did
an
upgrade
here.
There
were
all
these
crazy
bits
of
code
in
in
the
jquery
system
preferences,
and
I
had
no
idea
what
they
were
doing
so
now.
If
you
look
at
our
jquery,
it's
pretty
well
commented
so
that
it's
easy
to
find
easy
to
find
which
page
is
being
affected
by
which
piece
of
jquery
or
javascript
christopher
says
it's.
A
It's
a
good
idea
to
review,
because
sometimes
the
changes
you
make
with
jquery
are
actually
features
in
the
newer
version.
One
example
of
that
was
christopher,
actually
wrote
some
jquery
so
that
when
you
put
text
up
in
this
box
here
and
then
switched
from
one
to
the
other,
it
used
to
be
that
that
text
would
disappear.
A
If
you
put
something
in
search
patrons
and
then
flip
to
check
out,
you
would
lose
the
whatever
you
typed
up
here
and
christopher
wrote
some
jquery
that
that
fixed
that
and
then,
like
a
version
later,
somebody
had
added
that
feature
and
taken
christopher's,
jquery
and
added
it
in
the
co-op
and
jason
says.
If
I
fix
something
with
jquery,
then
find
a
related
bug
or
find
or
file
a
related
bug.
He
puts
the
bug
number
in
the
jquery
comments
that
he
knows
to
remove
it.
When
the
bug's
been
fixed.
A
A
I
don't
know
why
my
screen
keeps
freezing
here,
so
this
input
has
a.
We
have
two
password
fields
and
one
of
them
has
an
input
id
of
password.
The
other
one
has
an
input
id
of
password
too,
but
we
can
take
some
jquery,
and
this
is
just
when,
when
the
jquery
finds
an
element
with
the
id
of
entry
form,
which
is
one
of
the
elements
on
this
page.
A
A
A
B
A
A
A
A
So
what
we
got
here
is
a
function.
That's
saying,
every
time
we
find
the
patron
surname
we're
going
to
blur
that
which
is
a
way
of
saying
we're,
going
to
remove
focus
from
that
and
we're
going
to
do
this
function
where
we
take
the
password.
The
two
password
fields
and
the
value
that
we're
going
to
put
in
there
is
the
value
from
the
surname,
and
this
is
the
most
advanced
thing
that
I
think
I'm
going,
but
the
way
that
this
will
work,
then
I'm
going
to
reload
this
page.
A
It
can
you
can
change
the
way
elements.
Look
on
the
screen.
You
can
do
basics
with
with
you
know,
workflows,
and
this
is
just
some
of
the
very,
very
basic
stuff
that
you
can
do.
You
know
christopher's
talk
yesterday
or
the
day
before
about
the
facets
was
you
know
done
mostly
with
jquery
the
driver's
license
code
that
he
worked
on
was
done,
I
think
entirely
with
jquery.
A
So
there's
a
lot
you
can
do
to
to
make
some
changes.
You
just
need
to
learn
a
little
bit
about
how
to
use
it
and,
like
I
said,
there's
the
great
resources,
the
cohort
jquery
library,
where
there's
already
stuff
a
lot
of
stuff
already
written
in
the
koha
education
committee.
A
lot
of
the
videos
that
christopher-
and
I
have
done
every
other
thursday-
have
been
about
using
jquery
to
make
changes
to
the
way
co-op,
looks
and
works
for
people.