Question

我不确定为什么这个模态没有填充post ajax数据。它实际上应该在成功时更新我的SQL DB中的一行，但我得到的错误是“未捕获的TypeError：无法读取null的属性'值'。”有谁知道为什么会失败？

更新：我为遗漏生成合作伙伴项目的php而道歉。

HTML：

while($row = mysqli_fetch_array($partners)) {
 //   $optionsPartners .="<option>" . $row['Partners'] . "</option>";
      $optionsPartners.="<input type='checkbox' name='Partners[]'  value=".$row['Partners']."> ".$row['Partners']."<br>";
 }

$partnersmenu=

    /*"<select name='Partners' id='Partners'>
      " . $optionsPartners . "
    </select>"*/
    $optionsPartners;

?>
   <div id="id02" class="modal">
  <span onclick="document.getElementById('id02').style.display='none'" 
class="close" title="Close Modal">&times;</span>
  <!-- Modal Content -->
  <form class="modal-content animate" action="modify_records.php" method="post">

    <div class="container">
       <h3>Edit an Existing Project</h3>
          <label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
          <input type="Project_Name" name="Project_Name" id="Project_Name" placeholder="Project Name">
          <br><br>
          <label for="Partners" class="ui-hidden-accessible">Partners:</label>
          <?php
          echo $partnersmenu;
          ?>
          <br><br>
  <input type="button" id="edit_button<?php echo $row['id'];?>" class="btn" value="Submit" data-dismiss="modal"  onclick="edit_row('<?php echo $row['id'];?>');">
          <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
    </div> 
    <div class="container" style="background-color:#f1f1f1">
    </div>
  </form>
</div>

PHP：

if(isset($_POST['edit_row']))

    {
     $row=$_POST['id'];
     $Project_Name=$_POST['Project_Name'];
     $Partners=$_POST['Partners'];

     mysqli_query($conn,"update Project_Detail set Project_Name='$Project_Name',Partners='$Partners' where id=$row");
     echo "success";
     exit();
    }

JS：

   function edit_row(id)//save_row(id)
    {
     //var id=document.getElementById("id"+id).value;
     var id=document.getElementById("id"+id);
     var Project_Name=document.getElementById("Project_Name"+id).value;
     var Partners=document.getElementById("Partners"+id).value;
             $.ajax
     ({
      type:'post',
      url:'modify_records.php',
      data:{
       edit_row:'edit_row',
       id:id,
       Project_Name:Project_Name,
       Partners:Partners,
       },
      success:function(response) {
       if(response=="success")
       {

        //document.getElementById("id"+id).innerHTML=id;   
        document.getElementById("Project_Name"+id).innerHTML=Project_Name;
        document.getElementById("Partners"+id).innerHTML=Partners;
        //document.getElementById("edit_button"+id).style.display="block";
       // document.getElementById("save_button"+id).style.display="none";
       }
      },
      error: function(response) {
         alert("some error");
      }
     });
    }

Answer 1

尝试

var id=document.getElementById("id");

而不是

var id=document.getElementById("id"+id);

Answer 2

我看到了一些问题，它们都与您在javascript中如何称呼元素以及如何在HTML中标记元素有关。

示例：

<input type="Project_Name" name="Project_Name" id="Project_Name" placeholder="Project Name">

应该是这样的：

<input type="text" name="Project_Name" id="Project_Name<?php echo $row['id']; ?>" placeholder="Project Name">

查看所有元素，然后浏览你的js，这样你就可以调用正确的id。

同样在我上面复制的html中，我将类型更改为＆＃34; text＆＃34;。

另外，我没有看到ID为＆＃34;合作伙伴＆＃34;更不用说＆＃34;合作伙伴＆＃34; + id。

希望有所帮助。

模态Ajax无法填充

2 个答案: