Question

这是对我的结构的解释，以便更好地理解我想要做的事情。

我有一个初始表单，您可以在其中选择一个项目。提交初始表单后，您会得到一个包含多行和多列的表，最后还有三个按钮。其中一个按钮用另一个表单打开一个模态窗口，您可以在其中编辑表格的某些值。

当我保存并关闭表单时，我添加了window.parent.location.reload();来刷新父页面并显示新的编辑内容。不幸的是，这会问我如果我想在父页面上重新提交表单，那可能很烦人！我需要一种方法来刷新父窗体的结果而不是整个页面，而不是一直得到对话框。此外，chrome会从父表单中清除所有以前的数据，只需将父页面重新加载到其初始状态。

初始表格

<form class="form-horizontal" action="surveyCategories.cfm" method="post">
        <input type="hidden" name="post" value="1">
            <select name="survey" class="span3">
                <option value="">Select a Survey to Edit</option>
                <cfloop query="surveys">
                <option value="#id#">#name#</option>
                </cfloop>
            </select>
            <input type="submit" class="btn btn-primary" value="Submit">
        </form>

带按钮的结果表:(这是关闭模态后我需要刷新的表格）

     <form name="list" method="post" action="surveyCategories.cfm" > 
     <input type="hidden" name="listFormPost" value="1">
      <table class="table table-hover">  
      <tr>
        <th>Select</th><th>Survey Name</th><th>Category</th><th>Category Weight</th>
      </tr>


        <cfloop query="categories">
            <tr>
                <td><input class="checkbox" type="checkbox" name="mark" value="#recID#"></td>
                <td>#name#</td>
                <td>#categoryname#</td>
                <td>#cweight#</td>
           </tr>    
        </cfloop>
       </table> 

<hr />

<div class="pull-left">
<a href="##addCategory" role="button" class="btn btn-success" data-toggle="modal">Add Category</a>

<a href="##update" role="button" class="btn btn-warning" data-toggle="modal">Update</a>

<button class="btn btn-danger" type="button" onClick="dlte(mark); window.parent.location.reload();" >Delete</button>
</div>
</form>

模态窗口：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Update</h3>
    <div id="results"></div>
  </div>
  <div class="modal-body">
     <form name="update" action="updateSCpair.cfm" method="post">
        <input type="hidden" name="post2" value="1">
        <input type="hidden" name="surveyid" value="#categories.surveyid#" >

        <input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />

        <select name="categories" onChange="handleCategoryChange();">
            <option value="" selected >Select a Category</option>
            <cfloop query="ratingCat">
              <option value="#ratingCat.categoryid#"  >#ratingCat.categoryName#</option>
            </cfloop>
        </select>
        <br />
        <input id="score"  name="score" class="span3" type="text"  required >

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true" onClick="window.parent.location.reload();">Close</button>
    <button class="btn btn-primary" type="button" onClick="upd();" >Save changes</button>

    </div>
</form>

Answer 1

您将要使用AJAX。

<!DOCTYPE html>
<html>
   <head>
   <script>
     function showModal(){ /*code to show modal*/}
     function hideModel(){ /*code to hide modal*/}

     function updateParentForm(jsonObject){
       var parentFormNameInput = document.getElementById('parent_form_name');
       parentFormNameInput.value = jsonObject.name;
     }

     function submitForm() {
       var xmlhttp;
       if (window.XMLHttpRequest){
         // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
       } else {
         // code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

       xmlhttp.onreadystatechange=function readyStateChange(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
           // Lets assume you're responding back with a JSON string:
           // { "name": "submitted name" }
           var jsonObject = JSON.parse(xmlhttp.responseText);
           updateParentForm(jsonObject);
           hideModal();
         }
       }
       xmlhttp.open("POST","submit.cfm",true);
       xmlhttp.send("name=" + document.getElementById('modal_name').value);
  }
</script>
</head>
<body>

  <div id="myDiv"><h2>Let's submit a form!</h2></div>

  <!-- HERE IS OUR BUTTON TO DISPLAY THE MODAL -->
  <button type="button" onclick="showModal()">Show Modal Form</button>

  <!-- 
    Our modal HTML might look like this:
    <form>
      <input name="modal_name" id="modal_name" />
      <button type="button" onclick="submitForm()">Submit</button>
    </form>
  -->

  <form>
    <input name="name" id="parent_form_name" />
  </form>

</body>
</html>

submitForm方法负责跨浏览器兼容性。 onreadystatechange事件在响应的生命周期中多次触发。

你关心的是readyState of 4和200的状态。在这个例子中，你的submit.cfm用JSON响应，以便于解析。

使用xmlhttp.send方法发送名称值。对于多个参数，将每个参数与＆amp;即xmlhttp.send（'name = bill＆amp; age = 30'）。

代码借鉴自：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

我希望这会有所帮助。

Answer 2

你可以尝试类似的东西。

window.location = 'http://yourlocation';

如果这不起作用，那么您可以通过AJAX提交表单。请参阅here或者您使用的是jQuery，然后here

刷新表单结果而不刷新页面

2 个答案: