[jQuery] Refactoring problem with jquery-selectors
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?