What is the selector for any link inside a table

Question

I have php page with a drop down selector, i use jquery, ajax and mysql to produce a table when the selector is changed and drop into a div called .mytable. Some of the data in the table are links to php scripts which effect the data in the table, so I want to refresh the table without a reload.

I know I need to do this by attaching an event listener to the links in the table, but I cant seem to get the right selector to attach the listener to?

Any help would be appreciated

The page the user sees, called user.php is:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/table_style.css" rel="stylesheet" type="text/css">
</head>



<body>
<form name="form1" method="post" action="">
  <label for="select_data"></label>
  <select name="select_data" id="select_data">
    <option value=1>"Apples"</option>
    <option value=2>"Pears"</option>
    <option value=3>"Bananas"</option>
  </select>
</form>

<div id="mytable">This is where the table goes</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="get_table.js"></script>
</body>
</html>

The jquery event handler is:

$(document).ready(function (){
    //listen for select list to change, pass fruit into create_table.php, pass data into mytable div
    $('#select_data').change(function() {
        $.post('create_table.php',{fruit: fruit}, function(data) {
            $('div#mytable').html(data);});     

    });

    $('.fruit_link').change(function() {
        $.post('create_table.php',{fruit: fruit}, function(data) {
            $('div#mytable').html(data);});     

    });

});

The script that the event handler calls which creates the table and returns the html code is:

<?php

require_once('Connections/dbc.php');
$fruit=$_POST['fruit'];
$sql="SELECT * FROM q_fruit WHERE FruitID =".$fruit;
$rec1=mysqli_query($dbc,$sql);

    echo '<table class="table" align="center">';
    echo '<th class="th" width="80px">Fruit ID</th>';
    echo '<th class="th" width="150px">Fruit Name</th>';
    echo '<th class="th" width="40px">Fruit Action 1</th>';
    echo '<th class="th" width="150px">Fruit Action 2</th>';

    while ($row=mysqli_fetch_array($rec1)) 
        {

            echo '<tr class="tr">';
            echo '<td class="td">'.$row['FruitID']. '</td>';    
            echo '<td class="td">'.$row['FruitName']. '</td>'; 
            echo '<td class="td"><a class="fruit_link" href="fruitaction1.php">'.$row['FruitID']. '</a></td>'; 
            echo '<td class="td"><a class="fruit_link" href="fruitaction2.php">'.$row['FruitID']. '</a></td>'; 
            echo '</tr>';
         }

    echo '</table>';


    mysqli_free_result($rec1);
    mysqli_close($dbc);

?>

So, the select event handler is working to reproduce the table every time a value is changed, but the link handler is not, I'm presuming its because the links are in the html thats returned and not already present in the user file which the java is listening to. Is there a way round this?

`$('.mytable table tr td a').click(function(){})` should do it — asprin, Jun 24 '13 at 12:08
This can be don easily by using AJAX and check this http://stackoverflow.com/questions/5681380/refresh-a-table-with-jquery-ajax-ever-5-seconds — user2504141, Jun 24 '13 at 12:11

Balint Bako · Answer 1 · 2013-06-24T12:12:55.493

2

I'm not sure, if this as simple as $("table a"), but it looks like that... This will select all the a(nchor)s in all the tables.

If you want to select them only in that table, then $("div.mytable table a"), if called means a class, but if it is an ID (and it really starts with a dot) then $("#.mytable table a").

edited Jun 24 '13 at 12:12

answered Jun 24 '13 at 12:06

Balint Bako

2,500
1
14
13

I understand the principles behind this but the problem i'm having is the complete table html is being echoed back to a div in a php script. So the links in the table are not being captured by the listener. But links that already in the script are being captured – user2391089 Jun 24 '13 at 22:19
The goal is to use jquery to create a table when a combo box is changed value, using the value in the combo as part of the sql query. The table produced will have links in the data cells, these links when clicked should perform a background php script or function to alter the database and refresh the table without navigating away from the page. – user2391089 Jun 24 '13 at 23:48
You can assing the listeners after the `$('div#mytable').html(data);`, that will attach them to the new elements – Balint Bako Jun 25 '13 at 06:57
Thanks for the reply balint, but i'm unsure what exactly you mean, could you be more specific? – user2391089 Jun 25 '13 at 09:34
This was an answer to `So the links in the table are not being captured by the listener.` If you assign the jquery listeners after you added the table to the page (and you select the new table), then it will work. – Balint Bako Jun 25 '13 at 09:38

What is the selector for any link inside a table

1 Answers1