10 Jun
Yes, I Do Some Javascript Programming As Well
(before I get into this I wanted to let people know that I will be going to ZendCon to give my deployment talk. I might be looking for a place to crash for a second night, so let me know if you're going and can hook me up)
For a work project I had to add in some Ajax functionality for a scoreboard feature, where users will enter scores for periods / quarters / innings and then the total score has to update automatically on the screen before the user wishes to save that scoring document. So with some help from one of my online javascript ninja associates and Google searches, I got it all figured out, and thought I would share.
Here's a snapshot of the interface in question:
The first thing I did was apply the same class name to the away "innings" and home "innings" form fields, so that $().serialize would be able to pull up all those fields. That way, it wouldn't matter how many "inning" fields there might be. The tricky thing I found out was that I need to wrap my $('.homePeriods').change() call in it's own function() call so that it would actually be loaded when the page was loaded as well. I had no idea I needed to do that, and thanks to Marc for pointing it out. If there is a better method, let me know.
-
// Method used to automatically update total fields
-
// when editing individual periods
-
$(function(){
-
$('.homePeriods').change(function(){
-
var params = $('.homePeriods').serialize();
-
var pArray = params.split('&');
-
var homeTotal = 0;
-
-
for (var i=0; i <pArray.length; i++) {
-
var temp = pArray[i].split('=');
-
var homePeriod = temp[1];
-
// Cast value to an integer with this little hack
-
homePeriod = homePeriod - 0;
-
homeTotal += homePeriod;
-
}
-
-
$('#homeScoreTotal').replaceWith('<td class="period" id="homeScoreTotal"><input type="text" name="homeScoreTotal" value="' + homeTotal + '" maxlength="2" size="2" id="htotal" />');
-
});
-
-
$('.awayPeriods').change(function(){
-
var params = $('.awayPeriods').serialize();
-
var pArray = params.split('&');
-
var awayTotal = 0;
-
-
for (var i=0; i <pArray.length; i++) {
-
var temp = pArray[i].split('=');
-
var awayPeriod = temp[1];
-
awayPeriod = awayPeriod - 0;
-
awayTotal += awayPeriod;
-
}
-
-
$('#awayScoreTotal').replaceWith('<td class="period" id="awayScoreTotal"><input type="text" name="awayScoreTotal" value="' + awayTotal + '" maxlength="2" size="2" id="vtotal" />');
-
});
-
});
So, here's a small movie showing that in action.
I hope this helps out other people looking to add similar functionality to their site.
Article Tags >> javascript || jquery || Sportso
Posted by Baz L on 10.06.08 at 1:25 pm
Some of the more hard core jQuery enthusiasts will tell you that this is "too many lines of code". Since you can chain a lot of things in jQuery, you may have been able to do something as follows:
var pArray = $('.homePeriods').serialize();.split('&');
But who cares? I say, there's a lot to be said for readability. Also, there are small things like DRYing out those two calls and making a function and passing '.homePeriods'/'.awayPeriods' and '#homeScoreTotal'/'#awayScoreTotal'
But, I think your biggest gain from jQuery would be the $('.homePeriods').each({ }). If I'm reading you right, this should be able to replace the whole serialize, split stuff. Then in the for each loop, you can reference the .homePeriods element with "this".
But hey, at the end of the day, it's whatever works.
Posted by Martin bavio on 10.06.08 at 1:25 pm
I think Baz is right, jQuery can help you a lot to minimize the time that you spend doing your js code work. Also, in the book Learning jQuery, there is a whole chapter dedicated to this point, I read it and in 15 minutes I have a cart checkout form that updates prizes depending of the quantity of products.
jQuery is like CakePHP, one of the best things of the open source web, and the kind of stuff that I couldnt live without.
Cheers.