0

これは、私がやろうとしていることをよりよく理解するための私の構造の説明です。

アイテムを選択できる初期フォームがあります。最初のフォームを送信すると、複数の行と列があり、最後に 3 つのボタンがあるテーブルが表示されます。ボタンの 1 つでモーダル ウィンドウが開き、テーブルの値を編集できる別のフォームが表示されます。

フォームを保存して閉じるときにwindow.parent.location.reload();、親ページを更新して新しい編集を表示するために を追加しました。残念ながら、親ページでフォームを再送信するかどうかを尋ねられますが、面倒です! ダイアログボックスを常に表示することなく、ページ全体ではなく、親フォームの結果を更新する方法が必要です。また、クロムは親フォームから以前のデータをすべて消去し、親ページを初期状態にリロードします。

初期フォーム

<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 メソッドを使用して name 値を送信します。複数のパラメータについては、各パラメータを & ie 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 に答える