Question

当使用提交的表单值提交editForm-1或editForm-2时，我想更新#contentRight的内容。

我可以从updateDB.php文件中获取响应输出，并在

中查看

alert("Data: " + theResponse + "\nStatus: " + status);

但是，它不会使用以下两行之一更新div内容。

$("#contentRight").html(theResponse);
document.getElementById("contentRight") = theResponse;

[EDIT -------------]

我添加了一些样式来查看哪个元素占用了什么空间。如果单击#saveEdit-1（具有蓝色边框的元素），脚本将按预期工作。单击#saveEdit-1 button元素（箭头）时，div不会更新。为什么？

Here is the working example

如果我将点击监听器更改为

$("#saveEdit-1 button").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2 button").click(function(){ performAjaxSubmission(2); });

它仍然不起作用。 Working Example

[/ EDIT -------------]

任何帮助都会受到极大关注。

以下是文件。

<?php   require_once("includes/functions.php"); ?>

<!DOCTYPE html>
<html>
    <head>
        <style>
            #editForm-1, #editForm-2 {
                border:1px solid red;   
            }
            #saveEdit-1, #saveEdit-2 {
                border:2px solid blue;  
            }
            #saveEdit-1 button, #saveEdit-2 button {
                border:3px solid green; 
            }
        </style>

        <link href="/test/stylesheets/_appStyleAdmin.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="javascripts/jQuery-UI/jquery-ui.min.js"></script>


        <script type="text/javascript">
            function performAjaxSubmission(formID) {
                // alert(formID);
                var page = "edit-Test";
                var URL = "http://310it.com/test/updateDB.php?page=" + page;
                var formData = $("#editForm-" + formID).serialize();
                // alert(formData);
                $.post(URL , formData, function(theResponse){
                    alert("Data: " + theResponse + "\nStatus: " + status);
                    $("#contentRight").html(theResponse);
                    // $("#contentRight").text(theResponse);
                    //  document.getElementById("contentRight") = theResponse;
                    //  document.getElementById("contentRight").innerHTML(theResponse);
                });                                                              
            }                                 
        </script>

        <script type="text/javascript">
            $(document).ready(function(){ 

                $("#saveEdit-1").click(function(){ performAjaxSubmission(1); });
                $("#saveEdit-2").click(function(){ performAjaxSubmission(2); });

            }); 
        </script>

    </head>

    <body>

        <div id="contentRight">
            <p>AJAX Response will be displayed here.</p>
            <p>&nbsp;</p>
            <span></span>
        </div><!-- endof contentRight -->

        <form id="editForm-1" name="editForm-1" method="post" action="">
            <input type="hidden" name="action" id="action" value="edit">
            <input type="hidden" name="formID" id="formID" value="1">
            <div class="addNewItem-InputField">
                <p>Edit Test - 1</p>
                <label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
            </div><!-- endof addNewItem-InputField -->
            <div id="saveEdit-1" name="saveEdit-1" class="submitButton">
                <button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
            </div><!-- endof submitButton -->
        </form>

        <p>&nbsp</p>

        <form id="editForm-2" name="editForm-2" method="post" action="">
            <input type="hidden" name="action" id="action" value="edit">
            <input type="hidden" name="formID" id="formID" value="2">
            <div class="addNewItem-InputField">
                <p>Edit Test - 2</p>
                <label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
            </div><!-- endof addNewItem-InputField -->
            <div id="saveEdit-2" name="saveEdit-1" class="submitButton">
                <button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
            </div><!-- endof submitButton -->
        </form>

    </body>
</html>


<?php 
/************************************
           updateDB.php
************************************/

if (isset ($_GET['page'])) {
    $currentPage = $_GET['page'];
} else {
    $currentPage = NULL;
}
    showVarPre ($_POST);
    showVarMed ($currentPage);      // Shows the current page passed from JS

if  ($currentPage == 'test2') {
    $currentTable = 'records';
} elseif ( $currentPage == 'court-types') {
    $currentTable = 'ota_court_types';
}



$action                 = ($_POST['action']); 
echo "<h3>" . $action . "</h3>";

if ($action == "updateRecordsListings"){

/*
    $listingCounter = 1;
    foreach ($updateRecordsArray as $recordIDValue) {
        $query = "UPDATE " . $currentTable . " SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
        mysql_query($query) or die('Error, insert query failed');
        $listingCounter = $listingCounter + 1;  
    }
*/

    echo '<pre>';
    echo '</pre>';
    echo 'If you refresh the page, you will see that records will stay just as you modified.';

}
?>

Answer 1

document.getElementById("contentRight").innerHTML(theResponse);

Answer 2

您是否期待来自回复的HTML或文字？如果是前者，请使用：

$("#contentRight").html(theResponse);

如果是后者，请使用：

$("#contentRight").text(theResponse);

更新：表单提交导致整页刷新。这是默认行为。您需要捕获事件并阻止默认行为。

        `$(document).ready(function(){ 
            $("#editForm-1").submit(function(e){ 
                e.preventDefault();
                performAjaxSubmission(1);
            });
            $("#editForm-2").submit(function(e){ 
                e.preventDefault();
                performAjaxSubmission(2);
            });`

Answer 3

问题是使用输入类型作为图像而不是使用带图像的按钮。我仍然不知道或理解为什么，here is the related link

如何使用javaScript提交表单时更新div的内容

3 个答案: