[jQuery] Re: Refactoring problem with jquery-selectors

If you just want to use your function without changing the signature,
you have to pass along the current this when calling your function.
This is done using the call function JavaScript provides for
functions.

function addClickHandler(tableId, functionName, myUrl) {
jQuery('#' + tableId + ' tbody').children('tr').click(function
()
{
functionName.call(this,myUrl); // alternate syntax:
functionName.apply(this, [myUrl]);
});
}

On Dec 28, 11:04 pm, j0llyr0g3r <th3.gr31t.j0lly.r0...@googlemail.com>
wrote:
> Hui,
>
> fast reply.....:-)
>
> I did as you proposed and it works fine now.
>
> Special thanks for the explanation!
>
> On 28 Dez., 22:26, "Michael Geary" <m...@mg.to> wrote:
>
> > The problem is the first line in your clickOnTableRowResultSet() function:
>
> >         var row = jQuery(this);
>
> > When you were using that function directly as a click handler, 'this' was
> > set to the element being clicked. But now you are calling the function
> > through an ordinary function call, so 'this' is not the same any more. (It's
> > now the global object, i.e. the window object.)
>
> > To fix it:
>
> > function addClickHandler(tableId, functionName, myUrl)  {
> >         jQuery('#' + tableId + ' ' +
> > 'tbody').children('tr').click(function()
> > {
> >                 functionName(this,myUrl);
> >         });
>
> > }
>
> > And:
>
> > function clickOnTableRowResultSet(element,url) {...}
>
> > -Mike
>
> > > From: 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?