从 Bootstrap 模态更新数据并加载数据而不关闭模态答案

【问题标题】：Update data from Bootstrap Modal and load data without closing the modal从 Bootstrap 模态更新数据并加载数据而不关闭模态
【发布时间】：2018-02-22 16:16:18
【问题描述】：

我正在创建一个网页，如何使用 AJAX 将 Bootstrap Modal 中的一些数据更新到 SQL 数据库中。我已经用 PHP 和 SQL Query 更新了它。我对 AJAX 完全陌生，我想从模式中的文本区域更新数据，提交到数据库后数据应该出现在模式中，提交/保存后模式不应该关闭。我已经被这两天震撼了。请提供任何帮助。提前致谢。

在此处输入图片说明

Button to Trigger Modal

Comments Modal

Update.Php

我的代码现在看起来像这样：

$(document).ready(function(){
var comment;
$('#saveComments').on("click", function(){
    comment = $('#commentsModal').val();
});

$.ajax({
    url: 'update.php',
    data: { commentsModal: comment },
    type: 'POST',
    success: function(data) {
        /* $("#success-alert").show();
            setTimeout(function() { $("#success-alert").hide(); }, 5000); */
    },
});

});

和 PHP 代码：

<?php

包括“connect.php”；

    $comments = $_POST['commentsModal']; 

    $commentQuery = "UPDATE new_project SET Comments = CONCAT(new_project.Comments, '<br>', '$comments', '<br>', '$date') WHERE new_project.ID = $id";

    mysql_query($commentQuery);
        if($conn->query($commentQuery) === TRUE){
            echo 'Added' ;
        }else{
            echo "Error:" . $commentQuery . "<br>" . $conn->error;
        } 

    $conn->close();

【问题讨论】：

发布您的代码，以便我们帮助您并跟踪您的错误。没有代码就很难提供帮助，因为没有人知道你现在的位置。
你好乔纳斯！我附上了代码的图片。提前致谢。

标签： php mysql ajax

【解决方案1】：

你抓住了按钮的点击

$("#saveComments").on("click, function({

你得到了textarea的值
```
comment = $("#commentsModal").val();
```

你通过 AJAX 将它发送到你的 php

 $.ajax({

 url: 'update.php',

 data: {
  commentsModal: comment
 }
 success: function(data) {

 },
 type: 'POST'
 });

在上述 ajax 函数的成功部分中，您可以将您的评论添加到 div 或任何您想拥有他的地方。

【讨论】：

您好乔纳斯，感谢您的回答。我试过了，它什么也没做。我需要对 SQL 部分进行任何更改吗？
显示你的代码现在的样子（请不要像图片那样）。并调试，尝试通过打印您的 $_POST 数组来确定数据是否到达 update.php。并在浏览器的控制台中检查请求和响应。

【解决方案2】：

挂钩提交事件并运行您的自定义 js 代码，例如。

$('form#update').submit(function(){
  $.post('add.php', $(this).serialize(), function(resultData){
    //resultData - data from you php script.

  })
  return false
})

【讨论】：

【解决方案3】：

非常感谢您的帮助。我找到了解决我的问题的方法。我使用contenteditable="true" 将整个表格更改为可编辑表格，并且它可以工作。使用contenteditable，您可以将数据从网页发布到数据库，而无需重新加载页面。而且我正在模态框内展示我的整个表格，效果很好。

index.php

  <table class="table table-bordered" id="myTable">
    <thead>
      <tr>
        <th class="fixed-column"><strong> Issues </strong></th>
        <th class="text-align"><strong> Test Object </strong></th>
        <th class="text-align"><strong> HW and SW Delivery Issues </strong></th>
        <th class="text-align"><strong> Status at Previous MRD </strong></th>
        <th class="text-align"><strong> Recommendation Previous CRB </strong></th>
        <th class="text-align"><strong> Functional Implementation on Status </strong></th>
        <th class="text-align"><strong> Issues for Upcoming Activities </strong></th>
        <th class="text-align"><strong> System Verification Status </strong></th>
        <th class="text-align"><strong> Next Check Point </strong></th>
        <th class="text-align"><strong> Last Updated </strong></th>
        <th class="text-align"><strong> Comments </strong></th>
        <th class="text-align"><strong> Action Point </strong></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['Issues']; ?>" onBlur="saveInLineEdit(this, 'Issues', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['Issues']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['testObject']; ?>" onBlur="saveInLineEdit(this, 'testObject', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['testObject']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['deliveryIssues']; ?>" onBlur="saveInLineEdit(this, 'deliveryIssues', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['deliveryIssues']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['prevMRD']; ?>" onBlur="saveInLineEdit(this, 'prevMRD', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['prevMRD']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['prevCRB']; ?>" onBlur="saveInLineEdit(this, 'prevCRB', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['prevCRB']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['Func_Imple']; ?>" onBlur="saveInLineEdit(this, 'Func_Imple', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['Func_Imple']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['upcomingIssues']; ?>" onBlur="saveInLineEdit(this, 'upcomingIssues', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['upcomingIssues']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['statusVerify']; ?>" onBlur="saveInLineEdit(this, 'statusVerify', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['statusVerify']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['nextChkPoint']; ?>" onBlur="saveInLineEdit(this, 'nextChkPoint', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['nextChkPoint']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['lastUpdated']; ?>" onBlur="saveInLineEdit(this, 'lastUpdated', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['lastUpdated']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['Comments']; ?>" onBlur="saveInLineEdit(this, 'Comments', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['Comments']; ?></td>
        <td class="text-align" contenteditable="true" data-old_value="<?php echo $item['actionPoint']; ?>" onBlur="saveInLineEdit(this, 'actionPoint', '<?php echo $row_id; ?>')" onClick="highlightEdit(this);"><?php echo $item['actionPoint']; ?></td>
      </tr>
    </tbody>
  </table>

函数.js

function highlightEdit(editableObj) {
  $(editableObj).css("background","#FFF");
}

function saveInLineEdit(editableObj,column,id) {
   // no change change made then return false
   if($(editableObj).attr('data-old_value') === editableObj.innerHTML)
   return false;
   // send ajax to update value
   $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
   $.ajax({
      url: "saveInlineEdit.php",
      cache: false,
      data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
      success: function(response)  {
         console.log(response);
         // set updated value as old value
         $(editableObj).attr('data-old_value',editableObj.innerHTML);
         $(editableObj).css("background","#FDFDFD");            
    }          
  });
}

更新.php

<?php
  include "connect.php";

  $sql = "UPDATE new_project SET ".$_REQUEST["column"]." = '".$_REQUEST["value"]."' WHERE id= $id ";

  mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));

?>

【讨论】：