Minimize jQuery Function - php

Question

I have a function that adds change events for form items based on the row name(uses the database to get these).
Heres the current function:
$sql = "SELECT * FROM product WHERE storeno = '1' ORDER BY descript";
$result = mssql_query($sql, $msConnection);
if ($result && mssql_num_rows($result) > 0) {
while ($row = mssql_fetch_object($result)) {
$sku = trim($row->mas90sku);
$JQueryReadyScripts .= "
$('#newCount_" . $sku . "_row .cases').change(function() {
var count = 0;
$('#newCount_" . $sku . "_row .cases').each(function () {
count += parseFloat($(this).val());
});
$('#cases_total_" . $sku . "').text(count);
});
$('#newCount_" . $sku . "_row .units').change(function() {
var count = 0;
$('#newCount_" . $sku . "_row .units').each(function () {
count += parseFloat($(this).val());
});
$('#units_total_" . $sku . "').text(count);
});";
}
mssql_free_result($result);
}
How can I consolidate this into a call that affects every row so that I can get rid of the DB portion and have just 2 pieces (or 1) of code instead of 2 for every row.

Answer 1

You could do something like this for both cases and units (Just note, you will need to change the id's of the total counts appropriately)
$('.cases').change(function() {
var id = $(this).attr('id');
var count = 0;
$('#'+id+' .cases').each(function() {
count += parseFloat($(this).val());
});
$('#count_'+id).text(count);
});

Answer 2

$('*[id^=newCount_]').each(function () {
var $row = $(this),
sku = this.id.replace(/newCount_(.*?)_row/, '$1');
function sumValues($elems) {
var sum = 0;
$elems.each(function () { sum += parseFloat(this.value) });
return sum;
}
$.each(['cases', 'units'], function (i, type) {
$row.on('change', '.' + type, function () {
$('#' + type + '_total_' + sku).text( sumValues($row.find('.' + type)) );
});
});
});
This has no dependency on PHP, just use it as a regular script.
It uses .on() event delegation, so it requires jQuery 1.7+. For earlier versions of jQuery you can use .delegate() for the same effect.
I'd recommend giving all your rows a common CSS class, so that the not-so-nice $('*[id^=newCount_]') can be replaced with something simpler, but that's a cosmetic change.

Answer 3

The main difference between class selectors and id selectors is where id selectors are expected to be unique, class selectors are not.
Using $(this) in the body of your change events, so the operations are relative, you could write one single change event that handles all cases.
<input class="cases" id="newCount_123"></input>
<input class="cases" id="newCount_345"></input>
$('.cases').change(function() {
var count = 0;
var sku = $(this).attr("id");
count += parseFloat($(this).val());
$('#cases_total_' + sku).text(count);
});
This also keeps JavaScript out of your PHP, which is hard to maintain and violates MVC principles. Your server-side code does its job of retrieving data and sending it to the client, while your client-side code does its job of dealing with the view.

Answer 4

I'm not sure if this works for both of your functions or not. Not sure of the exact markup. but might be worth trying.
$('#newCount_' + $sku + '_row .cases, #newCount_' + $sku + '_row .units').change(function() {
var count = 0,
thisClass = ( $(this).hasClass('cases') ) ? 'cases' : 'units';
$('#newCount_" . $sku . "_row .'+thisClass).each(function () {
count += parseFloat($(this).val());
});
$('#'+thisClass+'_total_" . $sku . "').text(count);
});