通过javascript在另一个JSP页面div中的JSP页面中调用表单
[英]Calling a form in a JSP page in another JSP page div through javascript
问题描述
I am currently working on Spring tool Suite. 
我目前正在研究Spring工具套件。 And I have the following project structure. 我有以下项目结构。
I am trying to display the form that I have created in my tableSelectForm.jsp in a properties panel div that I have in my veditor.jsp view. 我想，以显示我在我的属性面板的div我有我的观点veditor.jsp已tableSelectForm.jsp创建的窗体。 I am trying to append the form by creating an iframe through javascript from the veditor.js script that I have under resources/js/taro/Customscripts and set the link to the tabelSelectForm.jsp and then append the iframe to the div in the veditor.jsp . 我试图通过从我在resources / js / taro / Customscripts下的veditor.js脚本通过javascript创建iframe来附加表单，并将链接设置为tabelSelectForm.jsp ，然后将iframe附加到veditor中的div .jsp 。
tabelSelectForm.jsp tabelSelectForm.jsp
<html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <form class="form-horizontal" id="tabelSelectForm"> <fieldset> </head> <body> <!-- Form Name --> <legend>Table Selection</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-6 control-label"> Select a Table out of the options to start querying from that table</label> <br> <label class="col-md-4 control-label" for="streamSelect">Table</label> <div class="col-md-4"> <select id="streamSelect" name="streamSelect" class="form-control"> <option value="voidopt">Select an option</option> </select> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="tableFormConfirmButton">Confirm</label> <div class="col-md-8"> <button id="tableFormConfirmButton" name="tableFormConfirmButton" class="btn btn-primary">Confirm</button> <button id="tableFormCancelButton" name="tableFormCancelButton" class="btn btn-danger">Cancel</button> </div> </div> </fieldset> </form> </body> </html>
veditor.jsp veditor.jsp
...
<script src="resources/js/taro/Customscripts/veditor.js" type="text/javascript"></script>
...
<!--Container/Canvas-->
<div id="container" class="container">
</div>
<div style="float: left" class="property" id="propertypane">
<h1 class="toolbox-titlex" id="toolbox-titlex">Properties</h1>
<div class="panel" id="lot"></div>
</div>
veditor.js veditor.js
... function callTableForm(newAgent, i, e, mouseTop, mouseLeft,elemType) { $(".property").show(); $(".property").show(); var iframe = document.createElement('iframe'); iframe.frameBorder=0; iframe.width="inherit"; iframe.height="inherit"; iframe.id="randomid"; document.getElementById("lot").appendChild(iframe); $("property").show(); $(".toolbox-titlex").show(); $(".panel").show(); $( "#randomid" ).load( "/tableSelectForm.jsp" ); }
I am currently getting an output as shown here. 我目前正在获得一个输出，如下所示。 Under the properties panel, I showld be able to display the form in tableSelectForm.jsp . 在属性面板下，我可以显示tableSelectForm.jsp中的表单。
I doubt that I am encountering this error due to the incorrect link that I've set in the iframe as var link = "/tableSelectForm.jsp" in my veditor.js
This is the error that I am encountering. 这是我遇到的错误。
And this is the Project structure along with the modified veditor.js script function. 这是Project结构以及修改后的veditor.js脚本功能。
I would really appreciate a solution to change this path so that I could diplay the form under the properties. 我真的很感激可以更改此路径的解决方案，以便可以在属性下显示表单。
Thanks in advance. 提前致谢。
1 个解决方案
解决方案1
1 2017-07-17 05:53:50
这是您需要的jquery.load ，这是比使用iframes更好的解决方案。
$( "#result" ).load( "/your_jsp_page_html_conten.jsp" );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.