如何在容器中添加包含表单数据的对话框?

时间:2014-08-04 21:08:35

标签: javascript html iframe dojo

如果我删除了我的dijit / Dialog,我可以检索当前的用户和密钥。但我还想给用户一个添加新用户的选项。所以,我实现了一个上传名称和文件的表单(我用这种方式使用iframe,因为xhr和dojo的iframe不会这样做!*叹气 - 基本上,它让我感到高兴在这个页面上(AJAX))。我想我差不多了,但在这里需要帮助。

我是小提琴手,因为某些原因我的网格没有显示:http://jsfiddle.net/ysabz/5WB4M/

  <body class="claro" style="background-color: #686868;">

  <h1 style= "width: 350px; color:#000000; margin: 20px auto;">USER/KEY 
  ADMINISTRATION</h1>

<div data-dojo-type="dijit/layout/TabContainer" id="tabContainer" style="width: 900px; 
height: 400px; margin: 20px auto;">

<div data-dojo-type="dijit/layout/ContentPane" title="Users" data-dojo-
 id="usersPane"data-dojo-props="selected:true">  

 <div id="usersNode" style="width: 100%; height: 80%;"></div>      
  <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" 
 onClick="myFormDialog.show();">
   Add User!
  </button>
  </div>


<div data-dojo-type="dijit/layout/ContentPane" title="Keys" data-dojo-id="keysPane">

<div id="keysNode" style="width: 100%; height: 100%;"></div>
</div> 

**********对话呼叫**********************

 <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" 
            style="display: none">
  <iframe id="uploadTrg" name="uploadTrg" height="0" width="0"></iframe>
  <form id="myForm" encType="multipart/form-data" action="addUser" method="post" 
            target="uploadTrg">

  <p>First Name: <input type="text" name="fname" size="30"/> </p>

 <p>Last Name: <input type="text" name="lname" size="30" /> </p>

 <div class="dijitDialogPaneActionBar">
    <button data-dojo-type="dijit/form/Button" type="submit" onClick="return 
     myFormDialog.isValid();">
        OK
    </button>
    <button data-dojo-type="dijit/form/Button" type="button"   
    onClick="myFormDialog.hide()">
        Cancel
    </button>
</div>
</form>
</div>
</body>

1 个答案:

答案 0 :(得分:0)

解决了!:这是正确的方法。轻微的变化。我有三个对话框,这里有一个:

      <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Add User" 
       style="display: none">

    <form data-dojo-type="dijit/form/Form" id="myForm" encType="multipart/form-data" 
    action="addUser" method="post" target="uploadTrg">
        <p>First Name:
            <input data-dojo-type="dijit/form/TextBox" type="text" name="fname" 
     size="30" />
        </p>
        <p>Last Name:
            <input data-dojo-type="dijit/form/TextBox" type="text" name="lname" 
      size="30" />
        </p>
        <p>Upload Cert: 
            <input type="file" name="fileName" /> 
        </p>

        <div class="dijitDialogPaneActionBar">

        <button data-dojo-type="dijit/form/Button" type="submit" onclick="return 
         myFunction();">Add</button>
        <button data-dojo-type="dijit/form/Button" type="button" onclick="return 
         myFormDialog.hide();">Cancel</button>


        </div>     
        </form>

        </div>

********************* 致电Dialog ***************** ***

       <script>

       myFormDialog.show();
       </script>