Question

我目前有一个包含多个模式的页面（在我的示例中仅显示了一个），但是基本上，用户来到此页面并单击div，该页面使用tinyMCE编辑器显示了一个模式，他们创建了内容，然后点击了提交关闭模式并发送ajax调用以创建内容记录。

这很好用。

问题是，如果用户再次单击div，则会弹出模态及其新创建的内容进行编辑。他们进行编辑，但是提交只会创建一条新记录，这不是我想要的。我需要做的是，如果他们再次单击div，调出模态，当他们再次单击Submit时，它只会更新内容记录。

我知道我可以使用重复的key子句来做到这一点，但是我也不知道该如何从模式中去做。

说用户单击具有#leftHalfForm的第一个div并创建一些内容然后提交。这将创建一个ID为182的内容记录。

现在，当他们再次单击带有#leftHalfForm模式的左div时，我需要它在模式的弹出窗口中知道它包含content_id 182的数据。

模态形式：

<div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <?php include 'widgets.php'; ?>         
            <hr>
            <h3>Create your own content</h3>
            <form id="leftHalfForm" method="post">
              <input type="hidden" name="page_content" id="leftHalfPageContent" value="">
              <input type="hidden" name="panel_type" value="2">
              <input type="hidden" id="page_id" name="page_id">
              <textarea class="original" id="leftHalfTextArea" name="halfLeftText"></textarea>
              <input type="submit" value="Save Content">
            </form>
        </div>
        <div class="modal-footer">
        </div>
   </div>
</div>
</div>

这是我的JS和AJAX，一旦他们做了一些内容并提交了：

<script type="text/javascript">

$("#leftHalfForm").submit(function(e){

    var leftContentVar = tinymce.get("leftHalfTextArea").getContent();

    $(".leftContent").html(leftContentVar);
    $("#leftHalfPageContent").val(leftContentVar);

      var string = $('#leftHalfForm').serialize() + '&page_id=' + page_id;
      console.log(string);

    // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "addPanel.php",
            data: string,
            cache: false,
            success: function(response){
              console.log(JSON.stringify(response));
              console.log(string);


              $('#leftFiftyModal').modal('hide');
              $('.modal-backdrop').remove();
            }
        });

    return false;

});

</script>

ajax将数据发送到此脚本，该脚本插入内容，获取该内容记录的ID，然后创建一个包含该内容ID的面板记录（这是为该内容创建记录以及包含该内容的面板记录。对于后续点击，我只需要更新内容记录）：

$content = $_POST['page_content'];

$addContent = "
    INSERT INTO content(content)
    VALUES('$content');
";

if ($mysqlConn->query($addContent) === TRUE) {
    $cont_id = $mysqlConn->insert_id;
    $data['last_insert_id'] = $cont_id;
    echo json_encode($data);
} else {
    echo "Error: " . $addContent . "<br>" . $mysqlConn->error;
}

$panelID = $_POST['panel_type'];
$pageID = $_POST['page_id'];
$addPanel = "
    INSERT INTO panels(panel_type_id, page_id, cont_id)
    VALUES ('$panelID', '$pageID', '$cont_id');
";
// $mysqlConn->query($addPanel);

if ($mysqlConn->query($addPanel) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $addPanel . "<br>" . $mysqlConn->error;
}

一切正常，但是我该如何更改它，以便他们每次单击该模式进行编辑时，它始终包含该内容记录的ID？

将数据库ID保留为模态，以便模态中的后续编辑将更新

0 个答案: