CODEWITHSUNDEEP
javascriptjquery
Carl Weis
Carl Weis

Reputation: 7062

jQuery: trying hook a function to the onclick when page loads

I have seen a similar question, HERE and have tried that, but I can't seem to get it working. Here is my code for dynamically generating table rows.

for (var contribution = 0; contribution < candidate.contributions.length - 1; contribution++) {
    var id = candidate.contributions[contribution].donor_id;
    var uid = candidate.contributions[contribution].user_id;

    $("#history-table").append(
        "<tr onclick='" + parent.viewEngine.pageChange('public-profile', 1, id, uid) + ";>" +
        "<td class='img-cell'>" +
        "<img class='profile-avatar-small' src='/uploads/profile-pictures/" +
        candidate.contributions[contribution].image + "' alt='' /></td><td class=''>" +
        "<h2>" + candidate.contributions[contribution].firstname +
        " " + candidate.contributions[contribution].lastname + "</h2></a><br/><br/>" +
        "<span class='contribution-description'>" + candidate.contributions[contribution].contribution_description + "</span></td>" +
        "<td><h3>$" + formatCurrency(candidate.contributions[contribution].contribution_amount) + "</h3></td></tr>");
}

This still executes the click event as soon as the page loads, which is not the desired behavior. I need to be able to click the tr to execute the click event.

Upvotes: 0

Views: 164

Answers (5)

bfavaretto
bfavaretto

Reputation: 71939

Pass the whole thing as a string:

"<tr onclick='parent.viewEngine.pageChange(\'public-profile\', 1, " + id + ", " + uid + ");>" // + (...)

But, as you are using jQuery, you should be attaching the click handler with .on().

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150080

(I really don't recommend using inline event handlers like that, especially when you're already using jQuery, but anyway...)

The problem is that you need the name of the function to end up in the string that you are passing to .append(), but you are simply calling the function and appending the result. Try this:

...
"<tr onclick='parent.viewEngine.pageChange(\"public-profile\", 1, " + id + "," + uid + ");'>" +
...

This creates a string that includes the name of the function and the first couple of parameters, but then adds the values of the id and uid variables from the current loop iteration such that the full string includes the appropriately formatted function name and parameters.

Note that the quotation marks around "public-profile" were single quotes but that wouldn't work because you've also used single quotes for your onclick='...', so you should use double-quotes but they need to be escaped because the entire string is in double-quotes.

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50797

Take this -> 

$("#contribution-" + uid).click(function(){
  parent.viewEngine.pageChange('public-profile',1, id, uid);
});

And do two things:

1) Move it outside of the 'for' statement

As soon as the for statement is executed, the click function will be executed as well. The click function is not being supplied as a callback function in this for statement.

2) Change it to ->

$("tr[id^='contribution-'").on('click', function(){
  var idString = $(this).attr("id").split("-"); //split the ID string on every hyphen
  var uid = idString[1]; //our UID sits on the otherside of the hyphen, so we use [1] to selec it
  //our UID will now be what we need. we also apply our click function to every anchor element that has an id beginning with 'contribution-'. should do the trick.
  parent.viewEngine.pageChange('public-profile',1, id, uid); 
});

This is my solution.

Upvotes: 0

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

I'm wondering if you might be better simplifying things a bit.

If your rows are being dynamically added, then try putting some kind of meta-data in the <tr> tag, e.g. something like this:

<tr id="id" name="uid">

Then try the following with your jQuery (v.1.7 required):

$('#history-table tr').on('click', function(){
  parent.viewEngine.pageChange('public-profile', 1, this.id, this.name);
});

This will likely require modification depending on how your page rendering works but it's a lot cleaner and easier to read having been removed from your main table markup.

Upvotes: 1

DanRedux
DanRedux

Reputation: 9359

Well that's because you're executing the function, not concatenating it. Try:

onclick='parent.viewEngine.pageChange("public-profile", 1, id, uid);'

Upvotes: 0

Related Questions