Обновление Ajax в цикле While — JQuery

Я пытаюсь выполнить обновление Ajax в цикле While, которое извлекает информацию из базы данных. Обновление запускается событием onclick кнопки рядом с полем ввода формы, существующим в каждой строке.

Полагаю, мне нужно передать 2 переменные - идентификатор строки и новый текст из ввода. Затем, когда успех: мне нужно обновить ввод с новым значением и обновить столбец B (статический html).

HTML

  <table id='movies'>
  <thead>
  <tr>
  <th>COLUMN A</th>
  <th>COLUMN B</th>
  <th>MOVIE ID</th>
  </tr>
  </thead>
  <tbody>

  while ($row = oci_fetch_array($ajaxmovies, OCI_ASSOC+OCI_RETURN_NULLS)) {

  <td> . $row['MOVIENAME'] . </td>
  <td> . $row['MOVIEID'] . </td>
  <td> 

   echo "<input type='text' id='mov' name='movie' maxlength='8' pattern='[0-9]{8}' value='" . $row['MOVIEID'] . "'>";

   echo "<button class='button_save' data-id='" . $row['MOVIEID'] . "'>Save</button>";

  </td>
  </tr>

  }

  </tbody>
  </table>

Итак, вот сценарий Ajax, который терпит неудачу, и, надеюсь, ищет решение с объяснением. Благодарю.

  <script>

  $('.button_save').click(function() { // onclick handler to each of the buttons

  var val1 = $('#mov').val(); // value from input of each row
  var val2 = $(this).attr("data-id");  // Get the ID of the button that was clicked on

   $.ajax({ // AJAX request
       type: 'POST',
       url: 'mov_update.php',
       data: { text1: val1, text2: val2 },

       success: function(response) {
          // $('#result').html(response);
          $('#mov').val(val1); // updates input new value
    }
  });
});

  </script>

а вот обновление БД mov_update.php

  // DB Connection

  $text1 = $_POST['text1'];
  $id = $_POST['text2'];

  $sql = "UPDATE SCHEMA.MOVIEW SET MOVIE=:mov
                               WHERE ID=:id";

  $objParse = oci_parse($conn, $sql); 

  oci_bind_by_name($objParse, ':id', $id);
  oci_bind_by_name($objParse, ':mov', $text1);

  $objExecute = oci_execute($objParse, OCI_DEFAULT);

  if ($objExecute) {

      oci_commit($conn); 

      echo $text1 . $id;
  }

идентификаторы должны быть уникальными, вы используете один и тот же идентификатор для ввода текста в операторе foreach, что означает, что у вас есть несколько полей ввода с одним и тем же идентификатором.

ahmad 19.03.2019 15:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
443
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элемент с idДолжно быть уникальным на странице. Итак, создание десятков <input type='text' id='mov' /> — это не верно. Вместо этого вы должны использовать «динамические» идентификаторы, например:

echo "<input type='text' id='mov-" . $row['MOVIEID'] . "' name='movie' maxlength='8' pattern='[0-9]{8}' value='" . $row['MOVIEID'] . "'>";
echo "<button class='button_save' data-id='" . $row['MOVIEID'] . "'>Save</button>";

Я полагаю, ваш $row['MOVIEID'] хранит значения уникальный. И из-за этого, id='mov-" . $row['MOVIEID'] . "' — это такие строки, как mov-2, mov-3, mov-10 и т. д.

Теперь в вашем js вы можете:

var val2 = $(this).attr("data-id");  // Get the ID of the button that was clicked on
var val1 = $('#mov-' + val2).val();  // value from `input` which is connected the clicked button

$.ajax({ // AJAX request
  type: 'POST',
  url: 'mov_update.php',
  data: { text1: val1, text2: val2 },
  success: function(response) {
      // $('#result').html(response);
      //$('#mov').val(val1); // updates input new value
      // not sure what this is for, as field value is already `val1`
      $('#mov-' + val2).val(val1);
   }
});

Лично я бы использовал парные атрибуты data-, а не семантические идентификаторы, но принцип тот же.

freedomn-m 19.03.2019 15:30

У меня это работает сейчас, кроме как обновить COLUMN B с новым обновленным идентификатором фильма после обновлений БД? Он по-прежнему отображает старое значение, когда я хочу отобразить новое обновленное значение из БД? Предполагая, что это происходит в функции успеха.

Ronald 19.03.2019 17:20

Что такое столбец Б?

u_mulder 19.03.2019 17:43

Столбец B просто отображает статический идентификатор фильма из БД, но показывает старое значение после его обновления - мне нужен ajax для обновления этой ячейки

Ronald 19.03.2019 17:56

Повторите некоторые данные в php-скрипте, и они будут в переменной ответа в success().

u_mulder 19.03.2019 21:14

Другие вопросы по теме