2017-08-10 21 views
0

JSP和JavaScript的新手,但熟悉Spring MVC和Hibernate。 我想在用戶點擊創建按鈕後,使用彈出窗口向數據庫插入值。 步驟: 1.用戶點擊創建按鈕 2.打開一個彈出窗口,用文本框輸入值(如姓名,年齡) 3.兩個按鈕在彈出窗口中保存和取消。點擊保存後,它會轉到控制器並保存到數據庫。取消是返回到上一頁。如何在使用JSP,Spring MVC,Hibernate的彈出窗口中發送參數

能夠做到這一點與彈出窗口,但我希望它與彈出窗口的工作。謝謝。

代碼片段在下面....當我點擊創建按鈕時,它不會顯示彈出窗口。

我的jsp中:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 
<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<script type="text/javascript"> 
     function showPopupWindow() { 
      document.getElementById('popupWindow').style.display = 'block'; 

     } 
     </script> 
<title>Insert title here</title> 
</head> 
<body> 

<button onclick="showPopupWindow()">create</button> 
<button class="sendBtn" onclick="closePopupWindow()">Cancel</button> 
<div id="popupWindow"> 
<form:form commandName="person" action="createP" method="post" name="myForm" class="form-horizontal"> 
          <div class="form-group"> 
           <label class="col-sm-2 control-label" for="name">name</label> 
           <div class="col-xs-4"> 
            <form:input type="text" id ="name" path="name" class="form-control"/> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-sm-2 control-label" for="age">age</label> 
           <div class="col-xs-4"> 
            <form:input type="text" id ="age" path="age" class="form-control"/> 
           </div> 
          </div> 


          <div class="form-group"> 
           <div class="col-lg-offset-2 col-lg-10"> 
            <input type="submit" id ="buttonUpdate" value="save" class="btn btn-default"/> 
           </div> 
          </div> 



         </form:form> 
</div> 
</body> 
</html> 
+0

瀏覽器控制檯中的任何錯誤? – derp

+0

一個選擇是使用引導程序作爲你的CSS框架,去這個鏈接看到一些模式窗口和其他UI控件的例子:http://getbootstrap.com/javascript/#modals –

回答

0

關於你的代碼的DIV總是shownup因爲你對div樣式是不是沒有

<div id="popupWindow" style="display:none;"> 

爲什麼不使用jQuery,而不是默認的JavaScript? 它已經有對話框功能,查看您的div作爲對話框

$("#popupWindow").dialog(); 
//After that you can send your form in an ajax request 
$.ajax({ 
    url:url, 
    data:$(form).serialize(), 
    success:function(data) { 
     //dosomething(); 
    } 
});