Javascript not working in AJAX response

Question

Below code is the AJAX response to another page. I have added onclick event to table row and written javascript code to handle it. But javascript code doesn't work.Is this wrong way of coding or there is any problem in code. Suggest me a simple solution

<?php

echo '<script type=\"text/javascript\">
    function clicked(){
      alert("I am an alert box!");
    }
    </script>';
$q = $_GET['q'];
include 'db_connect.php';
$sql="SELECT name,address,mobile,email,pan,tan FROM client WHERE name = '$q'";
$sql_bill="SELECT clientname,financialyear,receiptno,amount,ddate,type,chequeno,category FROM billing WHERE clientname = '$q'";
$sql_total="SELECT SUM(amount) AS TotalAmount FROM billing";
$result = mysql_query($sql);

$result_bill = mysql_query($sql_bill);
$result_total = mysql_query($sql_total);
$total= mysql_fetch_array($result_total);
echo "<h4><b>Client details</b></h4><table align='center' border='2'>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Mobile</th>
        <th>Email</th>
        <th>PAN</th>
        <th>VAT TIN</th>
    </tr>";

while($row = mysql_fetch_array($result))
{
  echo "<tr>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['address'] . "</td>";
  echo "<td>" . $row['mobile'] . "</td>";
  echo "<td>" . $row['email'] . "</td>";
  echo "<td>" . $row['pan'] . "</td>";
  echo "<td>" . $row['tan'] . "</td>";
  echo "</tr>";
}
echo "</table>";
echo "<h4><b>Payment received details</b></h4><table align='center' border='2'>
    <tr>
        <th>Client Name</th>
        <th>Financial Year</th>
        <th>Receipt No</th>
        <th>Date</th>
        <th>Type</th>
        <th>Chequeno</th>
        <th>Category</th>
        <th>Amount</th>
    </tr>";

while($row = mysql_fetch_array($result_bill))
{
  echo "<tr onclick=\"clicked()\">";
  echo "<td>" . $row['clientname'] . "</td>";
  echo "<td>" . $row['financialyear'] . "</td>";
  echo "<td>" . $row['receiptno'] . "</td>";
  echo "<td>" . $row['ddate'] . "</td>";
  echo "<td>" . $row['type'] . "</td>";
  echo "<td>" . $row['chequeno'] . "</td>";
  echo "<td>" . $row['category'] . "</td>";
  echo "<td>" . $row['amount'] . "</td>";
  echo "</tr>";
}

echo "<tr>";
echo "<td colspan=7>Total</td>";
echo "<td>".$total['TotalAmount'].  "</td>";
echo "</tr>";

echo "</table>";

?>

Answer 1

Edit 1:

Look in the console (F12), What happens when you click on a tr?

The following fiddle replicates your code and works: http://jsfiddle.net/Yaj44/

---

Edit 2:

I think it has something to do with the way you call the data.

• Put the function in your main page,
• then call the AJAX.
• Set innerHTML of specific div with responseData.

If you do it in that order, it might work.

---

Your way to adding this functionality is very dirty..

If you use JQuery, you can add on the end:

$('tr').click(function() {
    alert('Do something on click!');
});

mysql_fetch_array is outdated, use mysqli (or PDO) instead.

$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

$query = "SELECT Name, CountryCode FROM City ORDER by ID DESC LIMIT 50,5";

if ($result = $mysqli->query($query)) {

    /* fetch associative array */
    while ($row = $result->fetch_assoc()) {
        printf ("%s (%s)\n", $row["Name"], $row["CountryCode"]);
    }

    /* free result set */
    $result->free();
}

/* close connection */
$mysqli->close();

Answer 2

Try this instead of your script code:

echo <<<EOD
  <script type="text/javascript">
    function clicked(){
      alert("I am an alert box!");
    }
  </script>
EOD;