Различные области текста для каждой строки

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

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

Это работает только с 1 строкой, когда я использую этот скрипт

Это мой сценарий:

<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE mytalbename SET details='$_POST[textarea]' WHERE id=44");
}
?>

Моя проблема заключается в том, как распространить эту концепцию на все строки таким образом, что каждая строка имеет кнопку. Каждая кнопка ведет к модальному всплывающему окну с текстовой областью. Из каждой текстовой области я могу изменить столбец «details», относящийся к этой конкретной строке.

И это код текстовой области в форму

<div class="modal-body">
    <form action="" method="post" name="savechanges">
        <textarea name="textarea"></textarea>
        <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
    </form>
</div>

Здесь я показываю кнопку:

<a class='btn btn-primary btn-sm get_info2' data-toggle='modal' data-target='#myModal2' name='job_id' value='[$job_id]'>Add Details</a>
<a class='btn btn-primary btn-sm get_info3' data-toggle='modal' data-target='#myModal3' name='job_id' value='[$job_id]'>View Details</a>

Прикрепляю картинку:

Таблица

[Модальное всплывающее окно с textarea][2]

—- Обновление 1 —-

$results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='$_POST[hidden]'" );

и

<div class="modal-body">
    <form action="" method="post" name="savechanges">
        <textarea name="textarea"></textarea>
        <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
        <input type="hidden" name="hidden" value=" . $row['id'] . ">
    </form>
</div>

———— Обновление 2—————

  <?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {

    $results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='44'" );

}

?>

—————- Обновление 3———————

          <div class="modal-body info_data2">
                <form action="" method="post" name="savechanges">
                   <textarea name="textarea">    </textarea>
                   <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
                   <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">                                           
                </form>
                </div>

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

<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>

————— ОБНОВЛЕНИЕ 4 ———— ВЕСЬ КОД

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' }); tinyMCE.activeEditor.getContent();</script>
</head> 
<body>
  <!--  ------SCRIPT that fetch data from database and show table-->
       <?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');}
if (isset($_POST['update'])) {
$results = $link->query("UPDATE customer SET status='$_POST[status]' WHERE id='$_POST[hidden]'");

}           

$sql = "SELECT * from job";
if (!$result = $link->query($sql)) {
die('There was an error running the query [' . $link->error . ']');}
echo "
    <table class='table'>
    <thead>
    <tr>";
    /* Get field information for all columns */
    while ($finfo = $result->fetch_field()) {
    echo "
    <th>" . $finfo->name . "</th>"; }
    echo " </tr>
    </thead> 
    <tbody>";
while ($row = $result->fetch_assoc()) {
        $job_id = $row['id'];
    echo "<form action='' method=post>";
    echo "<tr class='info'>
                <input type=hidden name=hidden value=" . $row['id'] . ">
                <td>" . $row['id'] . "</td> 
                <td>" . $row['device'] . "</td>
                <td>" . $row['model'] . "</td> 
                <td>" . $row['problem'] . "</td>
                <td>
                <select class='form-control col-sm-10' id='status' name='status'>
                    <option value='new' ". ($row['status'] == 'new'? 'selected ': '') .">New</option>
                    <option value='progress' ". ($row['status'] == 'progress'? 'selected ': '') .">Progress</option>
                    <option  value='wait' ". ($row['status'] == 'wait'? 'selected ': '') .">Wait</option>
                    <option value='done' ". ($row['status'] == 'done'? 'selected ': '') .">Done</option>
                    <option value='close' ". ($row['status'] == 'close'? 'selected ': '') .">Close</option>
                </select>
                </td>                                                                                                                     
                <td>  
                    <button type='submit' class='btn btn-primary btn-sm' name='update'>Update</button>
                </td>
                <td> 
                <a class='btn btn-primary btn-sm get_info'  data-toggle='modal' data-target='#myModal' name='job_id'  value= '[$job_id]'>Customer Info</a>
                <a class='btn btn-primary btn-sm get_info2'  data-toggle='modal' data-target='#myModal2' name='job_id'  value= '[$job_id]'>Add Details</a>
                </td> 
                </tr>"; 
                echo "</form>";  }
                echo " 
                </tbody>
                </table>";
                ?>

<!--  ------SCRIPT FOR BUTTON "CUSTOMER INFO"-->

    <script>
    $(document).ready(function(){
      $('.get_info').click(function(){
        var job_id = $(this).parent().siblings('input[name=hidden]').val();
        $.ajax({
          url: 'responses.php',
          data: 'job_id=' + job_id,
          type: 'POST',
          success: function(data){
            // console.log(data);
            $('.info_data').html(data);
          }
        });
      });
    });
  </script>

  <!-- MODAL THAT SHOW UP AFTER CLICKING ON "CUSTOMER INFO"-->
  <div class="container">
                  <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog modal-lg">

                      <div class="modal-content">
                      <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Customer Information</h4>
                      </div>                       
                     <div class="modal-body info_data">
                      </div>
                     <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

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

<!--  ---SCRIPT FOR BUTTON  "ADD DETAILS"  -->

    <script>
    $(document).ready(function(){
      $('.get_info2').click(function(){
        var job_id = $(this).parent().siblings('input[name=hidden]').val();
        $.ajax({
          url: 'responses2.php',
          data: 'job_id=' + job_id,
          type: 'POST',
          success: function(data){
            // console.log(data);
            $('.info_data2').html(data);
          }
        });
      });
    });
  </script>

 <!-- MODAL THAT SHOW UP AFTER CLICKING BUTTON  "ADD DETAILS" 
which allow you to send data to database through the text area -->      
<div class="container"> 
                <div class="modal fade" id="myModal2" role="dialog">
                 <div class="modal-dialog modal-lg">

                <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Add Job Details</h4>
                </div>

                <div class="modal-body info_data2">
                <form action="" method="post" name="savechanges">
                   <textarea name="textarea">    </textarea>
                   <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
                   <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">

                </form>
                </div>

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

<!--  SCRIPT THAT SHOULD be able to send what is written in the text area to the database,-->


<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>

  </body>
</html>

——————— Обновление 5 ——————

Раздел 1

PHP-код, извлекающий данные из задания таблицы
и показать для каждой строки 3 кнопки:

  • кнопка Обновить для обновления статуса и приоритета
  • кнопка Информация о клиенте (выборка данных из таблицы » клиент»)
  • кнопка add details (отправить информацию с помощью модального всплывающего окна с wusiwug в колонку » details of the table JOB»)
  • кнопка Просмотр сведений: получение данных из столбца » сведения о задании таблицы»

Раздел 2:

СКРИПТ ДЛЯ КНОПКИ » ИНФОРМАЦИЯ О КЛИЕНТЕ»

Раздел 3:

МОДАЛЬНЫЕ, КОТОРЫЕ ПОЯВЛЯЮТСЯ ПОСЛЕ НАЖАТИЯ НА » ИНФОРМАЦИЯ О КЛИЕНТЕ»

Раздел 3:

СКРИПТ ДЛЯ КНОПКИ » ДОБАВИТЬ ДЕТАЛИ»

Раздел 4:
МОДАЛЬНЫЕ, КОТОРЫЕ ПОЯВЛЯЮТСЯ ПОСЛЕ НАЖАТИЯ КНОПКИ » ДОБАВИТЬ ДЕТАЛИ»
которые позволяют отправлять данные в базу данных через текстовую область

Раздел 5:
Скрипт, который должен быть в состоянии отправить то, что написано в текстовой области в базу данных

ОБЗОР

1 ответ

  1. Хорошо, если все работает, и вам просто нужно изменить его, чтобы работать для любой записи, вам просто нужно изменить 44 в вашем php-коде с помощью $_POST['hidden']

    Таким образом, ваш html и php будут чем-то вроде этого:

    HTML

    <div class="modal-body">
        <form action="" method="post" name="savechanges">
            <textarea name="textarea"></textarea>
            <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
            <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">
        </form>
    </div>
    

    РНР

    <?php
    include("connection.php");
    if ($link->connect_errno > 0) {
        die('Unable to connect to database [' . $link->connect_error . ']');
    }
    
    if (isset($_POST['savechanges'])) {
        $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
    }
    ?>
    

    Но я рекомендую вам практиковать mysqli параметризованный запрос и не использовать переменные непосредственно в ваших запросах…


    ОБНОВЛЕНИЕ

    Так как ваш код действительно трудно понять, я просто обновлю свой ответ, чтобы добавить некоторые предположения, на всякий случай они правы!

    Я не знаю, как вы показываете <div>с титулом <h4 class="modal-title">Add Job Details</h4>. Так что давайте предположим, что $('.info_data2').html(data);это делает то, что вы хотите сделать!

    Таким образом, в вашем JavaScript у вас есть:

    <script>
    $(document).ready(function(){
        $('.get_info2').click(function(){
            var job_id = $(this).parent().siblings('input[name=hidden]').val();
            $.ajax({
                url: 'responses2.php',
                data: 'job_id=' + job_id,
                type: 'POST',
                success: function(data){
                    // console.log(data);
                    $('.info_data2').html(data);
                }
            });
        });
    });
    </script>
    

    Здесь вы просто передаете job_idкак параметр, так и в responses2.php у вас две проблемы:
    1-Вы должны изменить $_POST['hidden']на $_POST['job_id']
    2-у вас нет никаких параметров для textarea!

    Затем вы должны изменить свой JavaScript на что-то вроде этого:

    <script>
    $(document).ready(function(){
        $('.get_info2').click(function(){
            var job_id = $(this).parent().siblings('input[name=hidden]').val();
            var textarea = $(this).parent().siblings('[name=textarea]').val();
            $.ajax({
                url: 'responses2.php',
                data: { "job_id": job_id, "textarea" : textarea} ,
                type: 'POST',
                success: function(data){
                    // console.log(data);
                    $('.info_data2').html(data);
                }
            });
        });
    });
    </script>
    

    Помните, так как ваш HTML-код действительно запутан, вы должны работать над тем, как получить правильное значение job_idand textarea. с помощью этого кода я уверен, что они не возвращают правильные значения. это просто пример того, как вы делаете то, что вы хотите сделать, и просто поставить вас на правильный путь!!!

    как вы можете видеть, я добавил эту строку: var textarea = $(this).parent().siblings('name=textarea').val();а также изменил dataстроку на это: data: { "job_id": job_id, "textarea" : textarea} ,чтобы иметь возможность отправлять textareaзначение responses2.php файл…

    Затем в responses2.php вы должны изменить его, как это:

    <?php
    include("connection.php");
    if ($link->connect_errno > 0) {
        die('Unable to connect to database [' . $link->connect_error . ']');
    }
    
    if (isset($_POST['savechanges'])) {
        $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['job_id']);
    }
    ?>