Как я могу получить AJAX для чтения данных из нескольких элементов класса HTML - PullRequest
Новая
       0

Как я могу получить AJAX для чтения данных из нескольких элементов класса HTML

0 голосов
/ 15 марта 2019

То, что я пытаюсь сделать, это записать номер записи стипендии, которая динамически создается на странице, и опубликовать результат, полученный на сервере, без обновления страницы. Это работает сейчас, но проблема в том, что он читает идентификатор и всегда возвращает ТОЛЬКО первый элемент # в списке.

Код мода, который перечисляет каждую стипендию, следующий: 

 <!-- Trigger the modal with a button -->
 <button type="button" onclick="saveData()" value="<? echo $row['id'];  ?>" 
id="savedata" class="btn btn-info btn-lg" class="saveData" data- 
toggle="modal" data-target="#myModal<? echo $row['id']; ?>">More Information. 
</button>

Я не включил всю информацию для модального, но я уверен, что проблема в кнопочной части кода.

Ajax-часть кода, запускаемая при нажатии кнопки: 

<script>
function saveData(){

  var name=$('#savedata').val();



$.ajax({
   type:"post",
   url:"includes/post_scholarship_count.php",
   data:'name='+name,


});

}
</script>

Проблема в том, что когда вы нажимаете на любую стипендию, вы получаете первое значение стипендии, хотя я вижу, что на странице выдается каждая стипендия с уникальной ценностью. Мое предположение заключается в том, что, поскольку это идентификатор, он будет принимать только первое значение. Как получить переменную в сценарии ajax для чтения из HTML-класса вместо идентификатора?

Я пытался решить эту проблему в течение нескольких дней, поэтому любая помощь будет оценена.

Ответы [ 3 ]

1 голос
/ 15 марта 2019

У вас есть основная проблема и заключается в следующем.Я предполагаю, что у вас есть много стипендий и, следовательно, много кнопок.Атрибут html ID должен называть просто уникальный элемент на странице.Как вы видите выше, вы ссылаетесь: #savedata, который всегда будет ссылаться только на один элемент.

Итак, мой совет следующий, и он включает в себя пару элементов:

  1. Используйте ненавязчивый JavaScript для обработки событий кнопок
  2. Используйте атрибут класса HTML для ссылки на кнопки вместо уникального идентификатора.

Так что давайте объясним это здесь

Используйте ненавязчивый javascript и атрибут html класса для вложения событий

Вместо использования идентификатора #saveData, просто используйте атрибут класса 'saveData' и сделайте что-то вроде этого: 

$(document).ready(function(evt){
    $('.saveData').on('click', function(e){
        var name = $(this).val();
        $.ajax({
            type:"post",
            url:"includes/post_scholarship_count.php",
            data:'name='+name,
        });
    });
});

Этот код подберет все кнопки с классом saveData и прикрепит их к событию для обработки его щелчка.И это будет определять каждую кнопку отдельно.Поскольку к каждой кнопке прикреплен отдельный «прослушиватель щелчков», после нажатия кнопки он будет знать, что делать.

0 голосов
/ 16 марта 2019

Привет, вот подход, использующий сгенерированную таблицу из php: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
  <div class="container" id="exampleDiv">
    <?php
    $arrayName =array(
      array('Firstname' => 'Stan','Lastname' => 'Chacon', 'Middlename' => '', 'Nickname' => 'Zec' ),
      array('Firstname' => 'Annie','Lastname' => 'Smith', 'Middlename' => 'Derav', 'Nickname' => 'AnnieDSmith' ),
      array('Firstname' => 'Winnie','Lastname' => 'Pooh', 'Middlename' => '', 'Nickname' => 'WinnieTPooh' ),
    );
    //append an id to your table also a tbody
    $html="<table id='exampleTable' class='table table-striped' ><tr><th style='border: 2px solid grey;'>Firstname</th>
    <th style='border: 2px solid grey;'>Lastname</th>
    <th style='border: 2px solid grey;'>Middlename</th>
    <th style='border: 2px solid grey;'>Nickname</th>
    <th style='border: 2px solid grey;'>Action</th></tr><tbody>";

    foreach ($arrayName as $key => $value) {
      if (isset($value)) {
        $html.="<tr><td>{$value['Firstname']}</td><td>{$value['Lastname']}</td><td>{$value['Middlename']}</td><td>{$value['Nickname']}</td><td> <button type='button' name='buttonModal'>click me !</button></td></tr>";
      }
    }

    $html.="</tbody></table>";
    echo $html;

    ?>
  </div>

  <!-- The Modal -->
 <div class="modal fade" id="myModal">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">

       <!-- Modal Header -->
       <div class="modal-header">
         <h4 class="modal-title">Modal Heading</h4>
         <button type="button" class="close" data-dismiss="modal">&times;</button>
       </div>

       <!-- Modal body -->
       <div class="modal-body">
       </div>

       <!-- Modal footer -->
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       </div>

     </div>
   </div>
 </div>

  </body>
  <script type="text/javascript">

    $("#exampleTable tbody tr td button").on('click',function(){
    var Firstname = $(this).closest('tr').children('td:first').text();
    var Lastname = $(this).closest('tr').children('td:eq(1)').text();
    var Middlename = $(this).closest('tr').children('td:eq(2)').text();
    var Nickname = $(this).closest('tr').children('td:eq(3)').text();

    if (Firstname != undefined && Lastname != undefined && Middlename != undefined && Nickname !=undefined) {
      $('.modal-body').empty();
      $("#myModal").modal();
      $('.modal-body').append('<p>Hello '+Firstname+' '+ Lastname+' looks like the Nickname '+Nickname+' is already in use!! Pls try to use another one</p>')
    }
    })

  </script>
</html>

Надеюсь, это поможет !!

0 голосов
/ 15 марта 2019

Вы можете достичь элементов по классу в чистом Javascript. 

var name = document.getElementsByClassName("saveData");

Но тогда вы получите массив элементов!Возможно, вам придется перебрать этот массив, чтобы получить ваши значения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...