Question

这里我展示了4个文件，用于通过从数据库中获取数据来编辑表格行。

第一个文件是DataAdministration.php。加载此文件时应显示#loading_Page7，点击#EditForms后我需要显示#loading_Page8 div。在第一次显示时，我需要将DisplayData.php加载到＃Loading_Page8 div中。为了支持我使用了Update.js文件。加载DisplayData.php后，我需要通过单击编辑链接来编辑选定的行。然后，可编辑的输入框需要显示在相关的FormName列中。我没有把它们写在同一个文件中，而是需要像我在这里使用的那样使用单独的文件。但是在单击编辑链接后，ajax请求不会发送到UpdateData.php文件。

我正在使用这项工作很多天但尚无法修复它。这是一个很长的问题。但请有人善意地表明我的错误。

<html>
    <head>
        <script type='text/javascript' src='Update.js'></script>

        <script src="jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#Loading_Page8").hide();

                $("#EditForms").click(function(){
                    $("#Loading_Page7").hide();
                    $("#Loading_Page8").show();
                    ABC();
                    C();
                    return false;
                });
            });
        </script>
    </head>
    <body>          
        <div id="Loading_Page7" >
            <div id="EditForms" class="AddUser">
                <li><a href=""><span>Edit/Delete Forms</span> </li></a>
            </div>
        </div>

        <div id="Loading_Page8">
            <div class="User" style="color:#0B173B">Forms_Available_to_Collect_Pubic_Health_Information </div>

            <div id="DisplayFormDetails" style="position:absolute; top:100px; width:1000px;"> 
            </div>
        </div>
    </body>
</html>

这是Update.js文件

function ABC(){
    $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "DisplayData.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#DisplayFormDetails").html(response); 
            //alert(response);
        }
    });
    C();
}

function C() {
    $(".FormEdit").click(function(){
        var B=$(this).attr('id');//ID comming is FormEdit3. And now B==4
        var NumericValue=B.replace("FormEdit","");

        $.ajax({
            type:"POST",
            url:"UpdateData.php",
            data:{ NumericValue : NumericValue },
            success:function(data){
                $("#FormName"+NumericValue).html(data);
            },
            error: function (err){ 
                alert(err.responseText)
            }
        });
    });
}

这是DisplayData.php

<?php
    include 'connectionPHP.php';

    $result=mysqli_query($con,"SELECT * FROM Form");
    echo "<table border='1' >
        <tr style='background-color:#D0A9F5;' height='40px;'>
            <th width='100px;'>Form ID</th>
            <th width='420px;'>Form Name</th>
            <th width='70px;'>Edit</th>
        </tr>";

    $i=1;
    while($row = mysqli_fetch_array($result)) {         
        $w=$row['Form_ID'];
        echo "<tr height='25px;'>";
        echo "<td name='FormID' id='FormID ".$i."' align=center>$row[Form_ID] </td>";
        echo "<td name='FormName' id='FormName".$i."' align=left>$row[Form_Name]</td>";
        echo "<td class='FormEdit' id='FormEdit".$i."' align=center><a href='' align=left>Edit</a></td>";

        echo "</tr>";
        $i++;
    }

    echo "</table>";                
?>

最后是UpdateData.php文件。

<?php
    include 'connectionPHP.php';

    if(isset($_POST['NumericValue'])) {
        $uid = $_POST['NumericValue'];

        echo $uid;

        $query ="SELECT * FROM Form WHERE Form_ID='$uid' ";
        $FetchResults=mysqli_query($con,$query);
        while($row=mysqli_fetch_array($FetchResults)) {
            $FormName=$row['Form_Name'];
            echo '<input type="text" value="$FormName"></input>';
        }       
    }
?>

Answer 1

在位于click内的function C(){..}处理程序内调用UpdateData.php。只需点击C()致电#EditForms即可。

另外，我认为.FormEdit在任何地方都没有使用。

编辑：

function C() {
  var NumericValue = $("#DisplayFormDetails table tr").length;
  $.ajax({

    type: "POST",
    url: "UpdateData.php",
    data: {
      "NumericValue": NumericValue
    },
    success: function (data) {
      $("#FormName" + NumericValue).html(data);

    },
    error: function (err) {
      alert(err.responseText)
    }
  });

}

使用Ajax请求编辑行

1 个答案: