0

I have an AJAX call when the user enters the parameters, which the MySQL database returns a row, and shows it to the user through a table. I want to have it so that when they click a row, it calls back for the MySQL database, using a unique hash, to get the contents of the row that they clicked and show it in a div. So for instance, if there's a table like

JOHN | 21 | foo.com
AMY  | 29 | bar.com

that the MySQL database returned, the user can click on the row John | 21 | foo.com and get something like

John have been working at foo.com for 22 years...

on the div below the table. I've been able to work out most of it, but having the row be clickable is a bit of a challenge. Since I have Jquery, if I do something like

$('.dashboard_main_row').click(function(){
            alert('This is an alert');
        });

It doesn't work, as I assume the AJAX call is made after the page has been loaded, although it does on something like a static webpage in jsfiddle. So I have two questions:

  • How would I implement this in JQuery where the rows are getting re-generated every time the user desires?

  • How can I have a row be identifiable so that if they click john I get the contents of john not amy? (I do have a column hidden by CSS where it does show unique hashes.)

EDIT: I did try the method that the one the mod linked as "duplicate":

$('.dashboard_main_row').on('click', 'tr', function(){
            alert('This is an alert');
        });

And it doesn't work. That's why I switched to .click() instead.

Just for conciseness, here's my html code:

<table>
    <tbody id = "dashboard_tbody">
    <tr class = "dashboard_main_row">
         <td> John </td>
         /* ... */
    </tr>
    </tbody>
<table>
Dragonsnap
  • 834
  • 10
  • 25
  • `How would I implement this in JQuery where the rows are getting re-generated every time the user desires?` Use a delegated event handler - see the duplicate – Rory McCrossan Jul 08 '19 at 13:06
  • 1
    `How can I have a row be identifiable so that if they click john I get the contents of john not amy?` Use the `this` keyword within the event handler to refer to the element which was clicked, eg. `$(this).text()` – Rory McCrossan Jul 08 '19 at 13:06
  • Try assigning your event in the callback of the ajax call. What I usually do is I put the code that assigns the event in a function "initializeWhatever", which I call on the document ready event, and I call it again in the callback of the ajax call. You can also set your event on a parent element like this, specifying to which child it must apply: $('#myparentdiv').on('click', '.dashboard_main_row', function() { /* ... */ }); – Naomi Jul 08 '19 at 13:12
  • @RoryMcCrossan I already tried that method, doesn't work. – Dragonsnap Jul 08 '19 at 13:22
  • I can guarantee you that it does. From your edit I can see that the problem is because the selector for the delegated handler need to be a *static parent element*. In your current example `.dashboard_main_row` and the `tr` are the same thing so it won't work. As such, use this: `$('table').on('click', '.dashboard_main_row', function(){...` – Rory McCrossan Jul 08 '19 at 13:28
  • @RoryMcCrossan Did exactly that and tried giving `table/tr` a div id, still doesn't really work. – Dragonsnap Jul 08 '19 at 13:40
  • @RoryMcCrossan Update, I had to use `document` instead of divs or `table`. I heard selecting from `document` can be slower, but oh well. – Dragonsnap Jul 08 '19 at 15:47
  • It is, but we're talking a difference of milliseconds. I guess from that result that the `table` itself is dynamically created too? – Rory McCrossan Jul 08 '19 at 15:48
  • @RoryMcCrossan Yeah, It's from an AJAX call. While you're on the line, if I wanted to select a specific from the that I selected, how would I go about doing that? – Dragonsnap Jul 08 '19 at 15:54
  • 1
    Within the `tr` click handler `$(this).find('td.whateverClassname')`. If you want to select a specific `td` in a column, `$(this).find('td:eq(0)')` where 0 is the first columns – Rory McCrossan Jul 08 '19 at 16:02

0 Answers0