Блог

Я пытаюсь выполнить обновление 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;
  }
  

Элемент с 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);
   }
});