如何以模态编辑数据并将其保存到数据库中？

Question

我正在建立一个学校数据库网站，我想添加一个“编辑”按钮。我想在模态框中编辑和保存元素。我写了一些代码，第一步（当你点击元素模态框时）正在工作。但是在模态框内我看不到被点击的元素，当我点击编辑按钮时，被点击元素的内容被删除。如何在模态框内调用被点击的元素？另外，你能解释一下如何在编辑后保存它吗？非常感谢。$(document).ready(function () {    //// CHECK INPUT FIELD: Not empty    notEmpty();    /* START: Get List on Pageload */    function getList() {        var data = {'action': 'getList'};        $.ajax({            url: 'Controller/CourseController.php',            data: data, // action = getList muss dem Controller ,            type: 'post',            success: function (data) {                $('#lecture-result').html(data);                //ajax is finished!            }        });    }    /* END: Get List on Pageload*/    // Also cut leading and trailing whitespace    $('body').on('keydown', '.lecture-name-field', function (e) {        console.log();        if (e.which === 32 && e.target.selectionStart === 0) {            return false;        }    });    /* START: Add a new Lecture */    $('body').on('submit', '#add-lecture-form', function (e) {        e.preventDefault();        //// CHECK INPUT FIELD: Not empty        notEmpty();        var postData = $(this).serialize();        var url = $(this).attr('action');        var type = $(this).attr('method');        $.ajax({            url: url,            data: postData,            type: type,            success: function (data) {                $("#lecture-result").html(data);                console.log('new lecture added');            }        });        //clean the input field after click        $('#add-lecture-form')[0].reset();    });    /* END: Add a new Lecture */    function notEmpty() {        $('#save').attr('disabled', 'disabled');        $('.lecture-name-field').keyup(function () {            if ($(this).val() !== '') {                $('#save').removeAttr('disabled');            } else {                $('#save').attr('disabled', 'disabled');            }        });    }

Answer 1

您可以将需要编辑的数据放入您的<button>.Suppose 您需要编辑title来自数据库的数据，即：

<button type="button" id="edit" class="btn btn-primary action-button" data-id="' . $row['id'] . '" data-action="edit" 

 data-value="'.$row['title'].'" href="Controller/CourseController.php">edit</button>

    <!--^added this--> 

现在，单击edit按钮，您将在 中打开模态jquery，在模态下的字段中获取data-value您的标题，input即：

您的 jquery 将如下所示：

$('#edit').on('click', function () {

        var url = $(this).attr('href');

        var text = $('.autofiller');

         var title=$(this).attr("data-value");//getting title

         var id=$(this).attr("data-id"); //getting id

          $(".title").val(title); //assiging value of title to your input under modal

            //opening modal

           $("#myModal").modal('show');

          //if save button click

          $(".btn-primary").on("click", function() {

          //getting title if made change

         var new_title=$(".title").val(); 

        $.ajax({

            url: url,

            method: "GET",

            data: {

                'id': id,

                'title':title //<--sending new title

            },

            success: function (data) {

                $('#myModal').modal('hide');//<--hiding modal 

                var name = JSON.parse(data);

                $(".autofiller").val(name.name);// Try this 

            }

        });

     });

  });

只需在您的模式中添加一个输入字段class =title：即：

你的模态：

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        ..

            <div class="modal-body">

          <!--added input box to edit data -->

            Title : <input type="title" class="title"/>

              </div>

            ...

        </div>

    </div>

</div>

在您的 php 文件中，只需使用$_GET并在您的Update查询中传递相同的标题和 ID 。