Форум

Reken · #1 (**permalink**) 05.05.2021, 09:45

Подскажите пожалуйста. Я через цикл вывожу таблицу из БД построчно при помощи массива. Следующий код у меня дублируется 100 раз, так как в таблице из БД 100 строк:

<td><input type='text' value=$row[ZN1] id='ZN1' name='ZN1'></td>
<td><input type=button id='btn' value='Изменить'></td>

Далее скрипт ajax который отправляет значения в обработчик:

$(document).on('click', '#btn', function(){

           var ZN1 = $('#ZN1').val();
          
$.ajax({  
                url:"update.php",  
                method:"POST",  
                data:{ZN1:ZN1},
                dataType:"text",  
                success:function(data)  
                {  
                     alert(data);  
                     fetch_data();  
                }  
           })

Так как у меня используется цикл, то все мои 100 значений AJAX видит под одним ID. В следствии чего, в обработчик уходят данные только из первой строчки таблицы, даже если кнопка "Изменить" была нажата в 7-ой строке таблицы.
Подскажите, как изменить код что бы, значения уходили в обработчик, согласно строке, в которой была нажата кнопка изменить...

рони · #2 (**permalink**) 05.05.2021, 10:13

Reken,
выкинуть id, заменить на class.
и тогда

$(document).on('click', '.btn', function(){
           var tr = this.closest('tr');
           var ZN1 = $('.ZN1', tr).val();

voraa · #3 (**permalink**) 05.05.2021, 10:24

id - должен быть уникальным. Нельзя давать нескольким элементам одинаковый id. Отсюда и возникают такие проблемы.

Либо назначайте элементам разные id, либо используйте делегирование - обработчик click вешайте на таблицу, затем через target берете элемент на котором нажали, если это кнопка, определяете родительскую строку, и берете input из этой строки

<table>
...
<tr>
<td><input type='text' value=$row[ZN1] name='ZN1'></td>
<td><input type=button value='Изменить'></td>
</tr>
...
</table>

document.querySelector('table').addEventListener('click', (ev) =>{
   const et = ev.target;
   if (el.type === 'button') {
      const rw = el.closest('tr');
      const inp = rw.querySelector ('[type="text"]') // элемент input type=text
     const val = inp.value
    // далее ajax с этим значением
      
   }
})

Reken · #4 (**permalink**) 05.05.2021, 10:56

А как можно используя php цикл while, в каждую строчку назначить персональный ID? И далее в Ajax получить этот ID?

while($row = mysqli_fetch_array($result)) {
echo <<<HTML
<form>
<tr>
<td><input type='text' value=$row[ZN1] id='ZN1' name='ZN1'></td>
<td><input type=button id='btn' value='Изменить'></td>
</tr>
</form>
HTML;

}

Как в коде выше можно присвоить персональный ID каждому значению? Если эта строка будет дублироваться, пока не выведет весь массив...

Reken · #5 (**permalink**) 05.05.2021, 14:22

Всё, получилось. Заменил ID на class и всё завелось... Всем спасибо

Reken · #6 (**permalink**) 11.05.2021, 12:02

А можете пожалуйста ещё подсказать? Теперь хочу понять, как можно кнопку button заменить, на нажатие клавиши enter...То есть ввести цифру в ячейку, и нажать клавишу enter для передачи информации в обработчик.
Я так понимаю, это нужно отслеживать нажатие клавиши enter в текстовом поле...Наверное как то через

$(document).ready(function(){
                $('input').keydown(function(e) {
                       if(e.keyCode === 13) {

Но не могу понять как именно, это прикрутить к моему коду. Сможете подсказать?

рони · #7 (**permalink**) 11.05.2021, 15:29

Reken,

$(function() {// это вместо ready
    $('input.ZN1').keydown(function(e) {
        if (e.keyCode === 13) {
            var ZN1 = this.value;
            $.ajax({
                url: "update.php",
                method: "POST",
                data: { ZN1 },
                dataType: "text",
                success: function(data) {
                    alert(data);
                    fetch_data();
                }
            })
        }
    })
});

Reken · #8 (**permalink**) 12.05.2021, 08:48

Спасибо, работает. Но после того как я немного усложнил код, перестало работать...Можете пожалуйста подсказать, где я допустил ошибку...

<script>  
$(document).ready(function(){  

      function fetch_data()  
      {  
           $.ajax({  
                url:"select.php",  
                method:"POST",  
                success:function(data){  
                     $('#live_data').html(data);  
                }  
           });  
      } 
      fetch_data();  

	    $('input').keydown(function(e) {
	        if (e.keyCode === 13) {



                 var tr = this.closest('tr');
           var ID = $('.ID', tr).val();    
           
           var tr = this.closest('tr');
           var ZN2 = $('.ZN2', tr).val();
           
           var tr = this.closest('tr');
           var ZN1 = $('.ZN1', tr).val();


                     
$.ajax({  
                url:"update.php",  
                method:"POST",  
                data:{ID:ID, ZN1:ZN1, ZN2:ZN2},
                dataType:"text",  
                success:function(data)  
                {  
                      
                     fetch_data();  
                }  


           })  
}

      });  

 });  

 </script>

рони · #9 (**permalink**) 12.05.2021, 09:58

Reken,
смотрите ошибки в консоли

рони · #10 (**permalink**) 12.05.2021, 10:01

Reken,
могу только погадать, что нет инпутов на момент работы скрипта, и строку 16 надо перенести в строку 11.

Форум

Справочник

Discord чат

Курсы javascript