通過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頁面中的表單

回答

相關問題