Доступ к свойствам html-элемента, введенного с помощью AJAX

ProgramBox

Доступ к свойствам html-элемента, введенного с помощью AJAX

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #php #jquery #mysql #ajax

Вопрос:

Я создаю небольшой проект, который реализует CRUDS в таблице MySQL с использованием PHP и jQuery. Таблица вводится в макет таким образом:

 <?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();
?>

Я добавил поля значений к кнопкам, потому что думал использовать это свойство для передачи идентификатора строки скрипту JS, который должен загрузить страницу РЕДАКТИРОВАНИЯ.

Я использовал делегирование события для доступа к кнопке, но сразу после этого я понятия не имею о доступе к свойству value кнопки.

В моем файле jQuery scripts я написал этот код для тестирования:

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

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

Я попытался получить доступ к свойству элемента содержимого, и это сработало, поэтому проблема должна заключаться в том, что я не могу получить доступ к его дочерним элементам таким образом (аналогично четному делегированию с помощью .on()).

вероятно, будет более элегантный способ решения проблемы, чем этот, но в то же время я хотел бы понять, как получить доступ к свойствам HTML-элементов, введенных AJAX!

1. var id = $(‘#content’).children(‘#edit’)attr(«значение»); Вы пропустили «.» перед attr ?

2. Нет, я просто скопировал его неправильно, потому что я пытался изменить его прямо сейчас в своем коде, извините!

3. Не используйте одно и то же id для нескольких элементов, для этого и существуют классы.

4. Вы создаете 3 кнопки ВНУТРИ ЦИКЛА WHILE, все с одинаковым идентификатором

5. Вы можете использовать var id = $(this).attr("value"); , потому что jQuery устанавливает кнопку в качестве контекста для функции. Кроме того, id предполагается, что an является уникальным во всем документе, а не только среди его HTML-братьев и сестер.

Ответ №1:

Вы не можете иметь то же id самое для элементов mutliple, измените его на class, а затем просто используйте $(this).attr("value") , чтобы получить значение кнопки редактирования, на которую нажата.

Демонстрационный код :

 $(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>

Развернуть фрагмент

Ответ №2:

С этим кодом есть несколько проблем, обычно вы хотите использовать классы для повторяющихся элементов, например, в цикле while в вашем 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>";
    }

Тогда вы сможете получить доступ к элементу, используя событие, подобное этому:

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

    alert( id );
});

Ответ №3:

Вы пропустили «.» перед «attr»?

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

И вы пытаетесь создать несколько элементов с одинаковым идентификатором через цикл. Вот почему ajax не может обнаружить нужный вам элемент. Попробуйте добавить его с уникальным идентификатором, например id элемента.