0

这是对我的结构的解释，以便更好地理解我正在尝试做的事情。

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

当我保存并关闭表单时，我添加了一个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>
4

2 回答 2

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 事件在响应的生命周期内被多次触发。

您只关心 4 的 readyState 和 200 的状态。在此示例中，您的 submit.cfm 以 JSON 响应，以便于解析。

您使用 xmlhttp.send 方法发送名称值。对于多个参数，将每个参数与 & 即 xmlhttp.send('name=bill&age=30') 连接起来。

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

我希望这有帮助。

于 2013-02-05T16:54:08.070 回答
0

你可以试试类似的东西。

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

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

于 2013-02-05T16:30:21.003 回答