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

时间：2017-07-17 05:51:00

标签： javascript jsp iframe call spring-tool-suite

我目前正在使用Spring工具套件。我有以下项目结构。

Project Structure

我正在尝试在 veditor.jsp 视图中的属性面板div中显示我在 tableSelectForm.jsp 中创建的表单。我试图通过我在resources / js / taro / Customscripts下的 veditor.js 脚本中通过javascript创建iframe来附加表单，并将链接设置为 tabelSelectForm.jsp < / em>然后将iframe附加到 veditor.jsp 中的div。

tabelSelectForm.jsp

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
...
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" );
    
    }
＆＃13;
＆＃13;
＆＃13;

我目前正在获得如此处所示的输出。在 属性 面板下，我可以在 tableSelectForm.jsp 中显示该表单。

  

我怀疑我遇到此错误是由于我在iframe中设置的错误链接 var link =＆＃34; /tableSelectForm.jsp" 在我的 veditor.js

中

这是我遇到的错误。

Error

这是Project结构以及修改过的veditor.js脚本函数。

Path

我真的很感激改变这条路径的解决方案，以便我可以在属性下显示表单。

提前致谢。

1 个答案:

答案 0 :(得分：1)

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

$( "#result" ).load( "/your_jsp_page_html_conten.jsp" );
相关问题
最新问题