Requesting consecutive tables through AJAX and PHP, links in 2nd disabled

[jssutton11]

On a webpage, I have a table (generated on page load through php/html) on the side that has several links (one on each row), and when you click any of them it calls a javascript function (href='javascript:newtable()') that uses an ajax requests to populate the table again (performed by a php file echoing an html table that is placed into a div innerHTML on the page), this time with new items and links on each row/cell. In this second table, none of the javascript links or buttons work after the first row.

For whatever reason, after calling consecutive ajax requests to re-populate an HTML table, the links in the first row of the 2nd table work and call javascript functions, but for any row thereafter the links or buttons no longer work.

I'm completely stumped so I'd really appreciate any help! I've attached the relevant segments of code.

<form id="mylists" name="mylists">
<div id="table" style="overflow: auto; height: 250px; width: 250px;">
   <table id="myplaylists" cellspacing="0" cellpadding="2" width="225px" style="position: relative; left: -7%;">
      <tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>
         </table>
</div>
</form>

The javascript ajax function:

function getUserPlaylist(id)
{
var request;
var table = document.getElementById("table");

try {
    request = new XMLHttpRequest(); /* e.g. Firefox */
    } 
catch(e) {
      try {
      request = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
      } catch (e) {
        try {
        request = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
        } catch (E) {
         request = false;
        } 
      } 
 }

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
    {
        table.innerHTML = "";
        table.innerHTML = request.responseText;
    }
};

request.open("GET", "user_playlists.php?display=" + id, true);
request.send();
}

And the PHP file the request is made to:

$display = $_GET['display'];
$query = "SELECT item, title FROM Playlists WHERE playlistID = '$display'";
    $result = mysql_query($query);
    $numr = mysql_num_rows($result);

    if($numr > 0)
    {
        $row = mysql_fetch_array($result, MYSQL_ASSOC);
        $item = $row['item'];
        $title = $row['title'];
        $temp = explode(",", $item);
        $items = array();

        echo "<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>";
        echo "<tr height='8px' scope='col'><td><b>$title</b>&nbsp;<a href='javascript:editPlaylist($display)'>add</a></td></tr>";

        foreach ($temp as $id)
        {
            $query = "SELECT title FROM Info WHERE ID = '$id'";
            $result = mysql_query($query);
            $numr = mysql_num_rows($result);

            if ($numr > 0)
            {
                $row = mysql_fetch_array($result, MYSQL_ASSOC);
                $title = $row['title'];

                echo "<tr height='8px' scope='col'>";
                echo "<td><a href='javascript:editPlaylist($id)'>$title</a></td>";
                echo "<td><input type='button' value='x' onclick='remove($id)' /></td></tr>";
            }
        }

        echo "</table>";
    }
    else {
        echo "Error finding requested playlist.";
    }
}

Additionally, here is the direct output of the PHP function to create the 2nd table, which goes into a div innerHTML attribute:

<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>
  <tr height='8px' scope='col'><td><b>playlist2</b>&nbsp;<a href='javascript:editPlaylist(4025199)'>add</a></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(6)'>Duck Sauce</a></td><td><input type='button' value='x' onclick='remove(6)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(O)'>Young, Wild and Free</a></td><td><input type='button' value='x' onclick='remove(O)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(9)'>No Sleep</a></td><td><input type='button' value='x' onclick='remove(9)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(R)'>The Show Goes On</a></td><td><input type='button' value='x' onclick='remove(R)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(s)'>Waka Flocka Flame</a></td><td><input type='button' value='x' onclick='remove(s)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(U)'>Roll Up</a></td><td><input type='button' value='x' onclick='remove(U)' /></td></tr>
</table>

[Airshow]

I expect you find that "Duck Sauce" and "No Sleep" are OK but the others are not?

If I'm right then it's to do with editplayer()'s arguments, ie. the ids generated by foreach ($temp as $id) .

editPlaylist(6); //ok, argument is a number
editPlaylist(R); //will generate a javascript error unless the global variable R exists
editPlaylist('R'); //ok, argument is a string

Try:

...
                echo "<td><a href='javascript:editPlaylist(\"$id\")'>$title</a></td>";
                echo "<td><input type='button' value='x' onclick='remove(\"$id\")' /></td></tr>";
...

Don't worry about numeric ids. editPlaylist("6") should work the same as editPlaylist(6) .

Airshow

[jssutton11]

Ahh, escaping the php variable worked! I got confused working with a mixture of strings and integers. Thank you, Airshow.