通过javascript在另一个JSP页面div中调用JSP页面中的表单

我目前正在使用Spring工具套件。我有以下项目结构。通过javascript在另一个JSP页面div中调用JSP页面中的表单

我想显示我在tableSelectForm.jsp在属性面板的div我有我的veditor.jsp视图中创建窗体。我尝试通过在veditor.js脚本中创建iframe来通过javascript创建一个iframe，然后将其链接到tabelSelectForm.jsp，然后将iframe附加到div在veditor.jsp。

tabelSelectForm.jsp

<html> 
 
<head> 
 

 
\t <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t 
 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
\t 
 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
\t 
 
\t <form class="form-horizontal" id="tabelSelectForm"> 
 
\t <fieldset> 
 

 
</head> 
 

 
<body> 
 
\t <!-- Form Name --> 
 
\t <legend>Table Selection</legend> 
 
\t 
 
\t <!-- Select Basic --> 
 
\t <div class="form-group"> 
 
\t <label class="col-md-6 control-label"> Select a Table out of the options to start querying from that table</label> 
 
\t <br> 
 
\t <label class="col-md-4 control-label" for="streamSelect">Table</label> 
 
\t <div class="col-md-4"> 
 
\t  <select id="streamSelect" name="streamSelect" class="form-control"> 
 
\t  <option value="voidopt">Select an option</option> 
 
\t  </select> 
 
\t </div> 
 
\t </div> 
 
\t 
 
\t <!-- Button (Double) --> 
 
\t <div class="form-group"> 
 
\t <label class="col-md-4 control-label" for="tableFormConfirmButton">Confirm</label> 
 
\t <div class="col-md-8"> 
 
\t  <button id="tableFormConfirmButton" name="tableFormConfirmButton" class="btn btn-primary">Confirm</button> 
 
\t  <button id="tableFormCancelButton" name="tableFormCancelButton" class="btn btn-danger">Cancel</button> 
 
\t </div> 
 
\t </div> 
 
\t 
 
\t </fieldset> 
 
\t </form> 
 
</body> 
 

 
</html>

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

... 
 
function callTableForm(newAgent, i, e, mouseTop, mouseLeft,elemType) 
 
    { 
 
    \t $(".property").show(); 
 
    \t 
 
    \t $(".property").show(); 
 
\t  \t 
 
\t  var iframe = document.createElement('iframe'); 
 
\t  iframe.frameBorder=0; 
 
\t  iframe.width="inherit"; 
 
\t  iframe.height="inherit"; 
 
\t  iframe.id="randomid"; 
 
\t  document.getElementById("lot").appendChild(iframe); \t    
 
    
 
\t  $("property").show(); 
 
\t  $(".toolbox-titlex").show(); 
 
     $(".panel").show(); 
 
\t  $("#randomid").load("/tableSelectForm.jsp"); 
 
    
 
    }

我目前得到的输出如下所示。在属性面板上，我可以在tableSelectForm.jsp中显示表格。

我怀疑我遇到这个错误是由于我已经在iframe在我veditor.js设置为VAR链接=“/tableSelectForm.jsp”不正确的链接

这是我遇到的错误。

这是修改后的veditor.js脚本函数沿项目结构。

我会很感激的解决方案来改变这条道路，这样我就能属性下diplay形式。

在此先感谢。

来源

2017-07-17 Nayantara Jeyaraj

这是你需要jquery.load，这是比使用iframe更好的解决方案。

$("#result").load("/your_jsp_page_html_conten.jsp");

来源

2017-07-17 05:53:50

我修改了你刚刚提到的页面，但没有加载。我真诚地怀疑我提供的路径会不断影响这一点。你能否建议我从javascript调用jsp页面的正确路径。 [Javascript和项目结构]（http://i.imgur.com/a9zAPRC.png）。这是我得到的错误 - > [错误]（http://i.imgur.com/5kVHlqL.png） –

对不起，但这只是一个演示，我不是为你编码。 –

通过javascript在另一个JSP页面div中调用JSP页面中的表单

回答

相关问题