Home » Php » javascript – PHP/AJAX/Mysql generated table links not working correctly

javascript – PHP/AJAX/Mysql generated table links not working correctly

Posted by: admin February 25, 2020 Leave a comment

Questions:

I have several tables on our site that are generated via pulling data from a mysql database. I have hyper links in the table that the user needs to be able to click on. When clicked, specific corresponding cell data needs to be recognized and returned. I have partially accomplished this with a for loop of each row;HOWEVER, the consequences of this is that the user needs to click the link twice to get it to work AND since the rows are “activated” if they click on another row, the AJAX command is triggered for that row as well. Which requires inefficient work arounds to avoid problems. For example, if the row/record contains a “delete record” link attached to AJAX => PHP command, it will delete any row on the table if it’s clicked even without clicking the link.

Table is rendered with a PHP query from Mysql with links in on each row to correspond to each row.

$mainid=mysqli_real_escape_string($conn,$_POST["mcnum"]);
$useid=mysqli_real_escape_string($conn,$_POST["dlnum"]);

$sql="SELECT id,subname AS name,description AS des,pct,
score
FROM probability LEFT JOIN a_score ON a_score.subid=probability.id
WHERE probability.maincat='$maincatid' AND a_score.oppid='$dealid'";
$result=mysqli_query($connect,$sql);

echo '
<div style="height:160px;overflow:scroll;" id="subpad">
<table style="font-size:12px;" id="strtlist">
<tr>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">Save Changes</th>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">ID</th>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">NAME</th>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">Description</th>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">Target %</th>
<th style="border: 1px solid black;position:sticky;top:0;background-color:#A9D0F5;">Your Score</th>
</tr>';

while($row = mysqli_fetch_assoc($result)){

    echo "<tr style='background-color:#FFFFFF;'>
    <td style='border: 1px solid black;'><a href='' id='savelnk' name='nmsvlnk' class='linksc'>Save</a><a href='' id='savelnk2'                                 name='nmsvlnk2' class='linksc2' style='color:blue;'>Erase</a></td>

    <td style='border: 1px solid black;'>".$row['id']."</td>
    <td style='border: 1px solid black;'>".$row['name']."</td>
    <td style='border: 1px solid black;'>".$row['des']."</td>
    <td style='border: 1px solid black;'>".$row['pct']."%</td>
    <td style='border: 1px solid black;' contenteditable>".$row['score']."%</td>
    </tr>";

}

echo '</table>';
echo '</div>';

********THIS IS THE FOR LOOP FUNCTION I’m USING*************

$(document).on('click', '#savelnk', function() {
  event.preventDefault();

  for (var i = 0; i < strtlist.length; i++) {
    strtlist.rows[i].onclick = function() {
      rIndex = this.rowIndex;
      var recordid = this.cells[1].innerHTML;
      var nwscore = this.cells[5].innerHTML;
      $.post('includes/updatescore.php', {
        recordid: recordid,
        nwscore: nwscore
      }, function(data) {
        alert(data);
      });
    };
  }
});
How to&Answers:

You should not add a click handler inside a click handler. Just do what you want in the main click handler.

Another problem is that you’re repeating id="savelink" in every row. IDs must be unique, you should use a class instead.

So the PHP should be:

while($row = mysqli_fetch_assoc($result)){

    echo "<tr style='background-color:#FFFFFF;'>
    <td style='border: 1px solid black;'><a href='' name='nmsvlnk' class='linksc savelnk'>Save</a><a href='' id='savelnk2'                                 name='nmsvlnk2' class='linksc2' style='color:blue;'>Erase</a></td>

    <td style='border: 1px solid black;'>".$row['id']."</td>
    <td style='border: 1px solid black;'>".$row['name']."</td>
    <td style='border: 1px solid black;'>".$row['des']."</td>
    <td style='border: 1px solid black;'>".$row['pct']."%</td>
    <td style='border: 1px solid black;' contenteditable>".$row['score']."%</td>
    </tr>";

}

and the JS should be

$("#strtlist").on('click', '.savelnk', function() {
  event.preventDefault();

  var recordid = this.cells[1].innerHTML;
  var nwscore = this.cells[5].innerHTML;
  $.post('includes/updatescore.php', {
    recordid: recordid,
    nwscore: nwscore
  }, function(data) {
    alert(data);
  });
});