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

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"&nbsp;&nbsp;data-value="'.$row['title'].'" href="Controller/CourseController.php">edit</button>&nbsp; &nbsp; <!--^added this-->&nbsp;现在，单击edit按钮，您将在 中打开模态jquery，在模态下的字段中获取data-value您的标题，input即：您的 jquery 将如下所示：$('#edit').on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; var url = $(this).attr('href');&nbsp; &nbsp; &nbsp; &nbsp; var text = $('.autofiller');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var title=$(this).attr("data-value");//getting title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var id=$(this).attr("data-id"); //getting id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".title").val(title); //assiging value of title to your input under modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //opening modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#myModal").modal('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if save button click&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".btn-primary").on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //getting title if made change&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var new_title=$(".title").val();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "GET",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id': id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title':title //<--sending new title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#myModal').modal('hide');//<--hiding modal&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var name = JSON.parse(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".autofiller").val(name.name);// Try this&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;});&nbsp; });只需在您的模式中添加一个输入字段class =title：即：你的模态：&nbsp; &nbsp;<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; ..&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--added input box to edit data -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Title : <input type="title" class="title"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>在您的 php 文件中，只需使用$_GET并在您的Update查询中传递相同的标题和 ID 。