Access properties of an html element injected with AJAX

user_14675120 0
Viewed 101

I am creating a small project which implements CRUDs on a MySQL table using PHP and jQuery. The table is injected into the layout this way:

<?php

require '../connect.php';

$sql = "SELECT id, countryName, shortDesc FROM countries";
$result = mysqli_query($conn, $sql);

echo "<table>
          <tr>
              <th>Id</th>
              <th>Country</th>
              <th>Short description</th>
              <th>Actions</th>
          </tr>";

while ( $row = $result->fetch_assoc() ) {
        echo "<tr>
                  <td>".$row["id"]."</td>
                  <td>".$row["countryName"]."</td>
                  <td>".$row["shortDesc"]."</td>
                  <td>
                      <button id='show' value=".$row["id"].">Show</button>  
                      <button id='edit' value=".$row["id"].">Edit</button>    // value field added to pass id data
                      <button id='delete' value=".$row["id"].">Delete</button> 
                  </td>
              </tr>";
    }
    
echo "</table>";

$conn->close();
?>

I added value fields to the buttons because I was thinking of using this property to pass the row's ID to the JS script which should load the EDIT page.

I used the event delegation to access the button but just after that i have no idea about accessing the value property of the button.

On my jQuery scripts file I wrote this code to test:

// EDIT
$('#content').on('click', '#edit', function() {       // EVENT DELEGATION
    // THIS DOESN'T WORK
    var id = $('#content').children('#edit').attr("value");       

    alert( id );    // RETURN UNDIFINED
});

I tried to access a property of the content element and it work, so the problem should be that I cannot access his children like that (in a similar way to the even delegation with .on()).

there will probably be a more elegant way than this to solve the problem but in the meantime I would like to understand how to access the properties of AJAX injected HTML elements!

mysql php jquery ajax javascript
3 Answers

You cannot have same id for mutliple elements change it to class then just use $(this).attr("value") to get value of edit button which is clicked.

Demo Code :

$(document).on('click', '.edit', function() {
//get value
  var id = $(this).attr("value");
  console.log(id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Country</th>
    <th>Short description</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>1</td>
    <td>abc</td>
    <td>abc</td>
    <td>
    <!--added class-->
      <button class='show' value="1">Show</button>
      <button class='edit' value="1">Edit</button>
      <button class='delete' value="1">Delete</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>ab2c</td>
    <td>ab2c</td>
    <td>
      <button class='show' value="2">Show</button>
      <button class='edit' value="2">Edit</button>
      <button class='delete' value="2">Delete</button>
    </td>
  </tr>
</table>

user_106064000

Did you miss the "." before "attr" ?

var id = $('#content').children('#edit')attr("value");

And you are trying to create multiple items with same id via loop. That's why ajax can not detect the right item you want. Try adding it with unique identifier like id of item.

user_112583470

There are a few issues with this code, you generally want to use classes for elements that are being repeated, like in the while loop in your php:

...

while ( $row = $result->fetch_assoc() ) {
        echo "<tr>
                  <td>".$row["id"]."</td>
                  <td>".$row["countryName"]."</td>
                  <td>".$row["shortDesc"]."</td>
                  <td>
                      <button class='show' value=".$row["id"].">Show</button>  
                      <button class='edit' value=".$row["id"].">Edit</button>    // value field added to pass id data
                      <button class='delete' value=".$row["id"].">Delete</button> 
                  </td>
              </tr>";
    }

Then you should be able to access the element using an event like this:

$('#content .edit').on('click', function() {
    var id = $(this).attr("value");

    alert( id );
});
user_32134020
Related