Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

jQuery: Events

ajax jquery

  • Please log in to reply
10 replies to this topic

#1 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 25 February 2009 - 02:21 AM

G'day everyone.

This is the third sequence of my jQuery tutorials. The first one was all the selectors, the second was making a table stripey, now this one will be
using events such as onclick, onkeyup etc. in jQuery. I said in my previous tutorial I would be showing you how to sort data easily in jQuery, but I
decided to change my mind. The next tutorial will show you one of the ways you can sort the table data, using AJAX and MySQL. The one after that, it
will be even MORE simple! We will be using a jQuery plugin.

As I mentioned in the previous tutorials, you must have the jQuery.js file. This can be found in the first tutorial. Another thing you might need for
this tutorial will be the previous source code from tutorial 2. If you have been following you might have created your own code, but here is mine if
you didn't;

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Zebra Stripes</title>

<style type="text/css">
thead tr th {
background-color: #93008E;
}

tr {
background-color: #FFADFC;
}

tr.alt td {
background-color: white;
}

tr.over td, tr:hover td {
background-color: #93008E;
}
</style>

<script src="jQuery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".zebra tr:even").addClass("alt");
});
</script>
</head>
<body>

<table width = "650" class = "zebra">
<thead>
<tr>
<th>
Name
</th>
<th>
Rank
</th>
<th>
Post Count
</th>
<th>
Avatar Rating
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jordan
</td>
<td>
Administrator
</td>
<td>
12,447
</td>
<td>
8
</td>
</tr>
<tr>
<td>
Xav
</td>
<td>
Code Slinger
</td>
<td>
12,146
</td>
<td>
7
</td>
</tr>
<tr>
<td>
TcM
</td>
<td>
Code Warrior
</td>
<td>
8,450
</td>
<td>
9
</td>
</tr>
<tr>
<td>
WingedPanther
</td>
<td>
Super Moderator
</td>
<td>
5,079
</td>
<td>
7
</td>
</tr>
<tr>
<td>
chili5
</td>
<td>
Code Warrior
</td>
<td>
4,431
</td>
<td>
9
</td>
</tr>
<tr>
<td>
marwex89
</td>
<td>
Guru
</td>
<td>
3,995
</td>
<td>
6
</td>
</tr>
<tr>
<td>
John
</td>
<td>
Co-Administrator
</td>
<td>
3,762
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Egz0N
</td>
<td>
Guru
</td>
<td>
3,674
</td>
<td>
9
</td>
</tr>
<tr>
<td>
amrosama
</td>
<td>
Code Warrior
</td>
<td>
3,283
</td>
<td>
7
</td>
</tr>
<tr>
<td>
v0id
</td>
<td>
Retired
</td>
<td>
2,697
</td>
<td>
5
</td>
</tr>
<tr>
<td>
MathXpert
</td>
<td>
Guru
</td>
<td>
2,263
</td>
<td>
8
</td>
</tr>
<tr>
<td>
mendim.
</td>
<td>
Guru
</td>
<td>
2,032
</td>
<td>
8
</td>
</tr>
<tr>
<td>
Brandon W
</td>
<td>
Guru
</td>
<td>
2,004
</td>
<td>
10
</td>
</tr>
<tr>
<td>
MikeM
</td>
<td>
Guru
</td>
<td>
1,494
</td>
<td>
10
</td>
</tr>
</tbody>
</table>

</body>
</html>


What we will be doing in this tutorial, is adding a onhover effect to the elements with the class "over". As you can see there is no elements, but
if you read the previous tutorial, I highly suggest you do, you will understand why there isn't an element, yet, with the class over. Also the hover
effect already works because we added it the CSS, but what about the browsers that don't support :hover *cough*IE*cough*? jQuery can do this too.

So let's get started;
Here is some new jQuery code you must insert;

$(".zebra tr").mouseover(function() {
$(this).addClass("over");
});


This must still fall into the function that checks when the DOM is ready, so the new code looks like this;

$(document).ready(function() {
$(".zebra tr").mouseover(function() {
$(this).addClass("over");
});
$(".zebra tr:even").addClass("alt");
});

Now comes the explanation. The beginning part of this new code selects all the elements with the class zebra (only our table) then every tr element
inside that class. Once they are all selected when add a new funtion, mouseover. This will mean when the element is hovered over the function after
will be ran. In our case. It will run;

$(this).addClass("over");

The selector "this" will select the element last time an element was selected so it will select our table's tr elements. Then it will add the class
"over" to that element. In summary, the class "over" will be added to the tables tr elements when they are hovered over.

Now we need to add a new event which will remove the class when the mouse is left. This is basically the same as above, but we will remove the class.

$(".zebra tr").mouseout(function() {
$($this).removeClass("over")
});


All this code can be cut down to very few lines. But that is more advanced, probably the hardest jQuery gets, so I will show you in another tutorial.
If you would like to see how to do it, you can just Google "jQuery chains".

Hope you enjoyed the tutorial. Tutorial one and two can be found in my signature.

Good luck ;)

+rep if you liked.

Regards,
Brandon
  • 2
I've returned...

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 25 February 2009 - 05:19 AM

Nicely done! +rep
  • 0

#3 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 25 February 2009 - 08:49 AM

I like. +rep :)
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#4 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 25 February 2009 - 01:17 PM

Thanks Winged and Jordan :) Step closer to Code Warrior.
  • 0
I've returned...

#5 mendim.

mendim.

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 741 posts

Posted 26 February 2009 - 04:45 AM

Perfect ... +rep .. when i Can .!
  • 0

#6 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 04:55 AM

Your welcome mate, take your time :)
  • 1
I've returned...

#7 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1155 posts

Posted 26 February 2009 - 05:01 AM

CooL .. +rep too :)
  • 0

#8 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 05:23 AM

Thanks Egz. You getting interested in jQuery?
  • 0
I've returned...

#9 mendim.

mendim.

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 741 posts

Posted 26 February 2009 - 05:38 AM

Yes ..
it's Really interesting .. ! but a bit hard ..
  • 0

#10 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 05:51 AM

It will come much easier, at the start it will be bumpy. But after, it should be a breeze for you mate.
  • 0
I've returned...

#11 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 28 February 2009 - 02:54 AM

I just noticed I had an error in my code. I did something that I would normally do in PHP. For one of the "this", I did "$this". Here is the new final code sorry.


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Zebra Stripes</title>

<style type="text/css">
thead tr th {
background-color: #93008E;
}

tr {
background-color: #FFADFC;
}

tr.alt td {
background-color: white;
}

tr.over td, tr:hover td {
background-color: #93008E;
}
</style>

<script src="jQuery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".zebra tr").mouseover(function() {
$(this).addClass("over");
});
$(".zebra tr").mouseout(function() {
$(this).removeClass("over")
});
$(".zebra tr:even").addClass("alt");
});
</script>
</head>
<body>

<table width = "650" class = "zebra">
<thead>
<tr>
<th>
Name
</th>
<th>
Rank
</th>
<th>
Post Count
</th>
<th>
Avatar Rating
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jordan
</td>
<td>
Administrator
</td>
<td>
12,447
</td>
<td>
8
</td>
</tr>
<tr>
<td>
Xav
</td>
<td>
Code Slinger
</td>
<td>
12,146
</td>
<td>
7
</td>
</tr>
<tr>
<td>
TcM
</td>
<td>
Code Warrior
</td>
<td>
8,450
</td>
<td>
9
</td>
</tr>
<tr>
<td>
WingedPanther
</td>
<td>
Super Moderator
</td>
<td>
5,079
</td>
<td>
7
</td>
</tr>
<tr>
<td>
chili5
</td>
<td>
Code Warrior
</td>
<td>
4,431
</td>
<td>
9
</td>
</tr>
<tr>
<td>
marwex89
</td>
<td>
Guru
</td>
<td>
3,995
</td>
<td>
6
</td>
</tr>
<tr>
<td>
John
</td>
<td>
Co-Administrator
</td>
<td>
3,762
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Egz0N
</td>
<td>
Guru
</td>
<td>
3,674
</td>
<td>
9
</td>
</tr>
<tr>
<td>
amrosama
</td>
<td>
Code Warrior
</td>
<td>
3,283
</td>
<td>
7
</td>
</tr>
<tr>
<td>
v0id
</td>
<td>
Retired
</td>
<td>
2,697
</td>
<td>
5
</td>
</tr>
<tr>
<td>
MathXpert
</td>
<td>
Guru
</td>
<td>
2,263
</td>
<td>
8
</td>
</tr>
<tr>
<td>
mendim.
</td>
<td>
Guru
</td>
<td>
2,032
</td>
<td>
8
</td>
</tr>
<tr>
<td>
Brandon W
</td>
<td>
Guru
</td>
<td>
2,004
</td>
<td>
10
</td>
</tr>
<tr>
<td>
MikeM
</td>
<td>
Guru
</td>
<td>
1,494
</td>
<td>
10
</td>
</tr>
</tbody>
</table>

</body>
</html>

  • 0
I've returned...





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download