Question

我正在创建一个网页，如何使用AJAX将一些数据从Bootstrap模式更新到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

包括＆＃34; connect.php＆＃34 ;;

    $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();

＆GT？;

Answer 1

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

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

Answer 2

您点击了按钮

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

您获得textarea的值
```
comment = $("#commentsModal").val();
```

您通过AJAX将其发送到您的php

 $.ajax({

 url: 'update.php',

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

 },
 type: 'POST'
 });

在上述ajax功能的成功部分，您可以将您的评论添加到div或您希望拥有的任何地方。

Answer 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>

function.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");            
    }          
  });
}

update.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));

?>

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

3 个答案: