[jQuery] Refactoring problem with jquery-selectors

[j0llyr0g3r]

Hey guys,

i am having problems with some refactoring:

I have some html-tables to which i add an onclick-handler like this:

CODE:
addClickHandler('myTableID',myFunction);

'addClickHandler' looks like this:

CODE:
function addClickHandler(tableId, functionName) {
        jQuery('#' + tableId + ' ' + 'tbody').children('tr').click
(functionName);
}

Now, all the functions i pass to this onclick-Handler look almost the
same :

CODE:
function clickOnTableRowResultSet() {
        var row = jQuery(this);
        var songUrl = trimAll(row.find('td:last form input
[name=hidden_url_field]').val());
        var trackID = trimAll(row.find('td:last form input
[name=hidden_id_field]').val());
        var trackInfoUrl = "/tracks/track_info/" + trackID;
        sendPlayEventToPlayer(songUrl);
        jQuery.ajax({success:function(request){$('#track_info').html
(request);}, url:trackInfoUrl, async:false});
}
CODE

with trimAll being:

CODE
/*
 * trimAll replaces all whitespace and newlines from a string
 */
function trimAll(str) {
        return str.replace(/\n+|\s+/g,"");
}

All of these functions basically do the same: they read out hidden
fields in the last column of the table row, send an event to a flash-
player and update a certain part of the website.

The only thing in which they differ, is this part:

        var trackInfoUrl = "/tracks/track_info/" + trackID;

So i wanted to summarize all my almost identical functions into one by
passing the above mentioned url to them.

I tried it like this:

Call to addClickHandler on the website:

CODE
   addClickHandler('list_tracks_table',clickOnTableRowResultSet, '/
tracks/track_info/' );

Then I changed my addClickHandler like this:

CODE
function addClickHandler(tableId, functionName, myUrl)  {
        jQuery('#' + tableId + ' ' + 'tbody').children('tr').click(function()
{
                functionName(myUrl);
        });
}

And finally summarized my clickOnTable...-functions like this:


function clickOnTableRowResultSet(url) {
        var row = jQuery(this);
        var songUrl = trimAll(row.find('td:last form input
[name=hidden_url_field]').val());
        var trackID = trimAll(row.find('td:last form input
[name=hidden_id_field]').val());
        var trackInfoUrl = url + trackID;
        sendPlayEventToPlayer(songUrl);
        jQuery.ajax({success:function(request){$('#track_info').html
(request);}, url:trackInfoUrl, async:false});
}


So far, this looks good to me, but unfortunately it doesn't work.
Using debugging i see that 'clickOnTableRowResultSet' gets passed the
correct url, but then the line afterwards:

CODE
        var songUrl = trimAll(row.find('td:last form input
[name=hidden_url_field]').val());

gives me the JS-error:
Error: str is undefined

in function trimAll, which basically means that

      row.find('td:last form input[name=hidden_url_field]').val()

yields undef.

This is what i don't get, i didn't change any part of the logic which
deals with finding the fields, etc.

None of my changes affected these parts - at least in my eyes. But
somehow the jquery-selectors seem to be unable to find my rows?

Does anybody see what's the problem here?