將javascript創建的動態文本字段綁定到bean

我有以下代碼，這會創建我在textField中輸入的文本字段的數量。將javascript創建的動態文本字段綁定到bean

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"  
     xmlns:h="http://java.sun.com/jsf/html"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Dashboard | BlueWhale Admin</title> 
    <link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="../css/text.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="../css/layout.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="../css/nav.css" media="screen" /> 

<script type="text/javascript"> 
//<![CDATA[ 
      function BuildFormFields($amount) 
      { 
       var 
        $container = document.getElementById('FormFields'), 
        $item, $field, $i; 

       $container.innerHTML = ''; 
       for ($i = 0; $i < $amount; $i++) { 
        $item = document.createElement('div'); 
        $item.style.margin = '3px'; 

        $field = document.createElement('span'); 
        $field.innerHTML = '<hr>'+'News '+ ($i+1) +    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; 
        $field.style.marginRight = '10px'; 
        $item.appendChild($field); 

        $field = document.createElement('input'); 
        $field.name = 'Design[' + $i + ']'; 
        $field.id = 'Design[' + $i + ']'; 
        $field.type = 'text'; 
        $field.className = 'error'; 
        $field.style.width = '500px'; 
        $item.appendChild($field); 


        $container.appendChild($item); 
       } 
      } 

     function saveNews() 
     { 
      var value=document.getElementById("noOfNews").value; 

      if(value==="") 
      { 
       alert("Please Enter Some Data"); 
      } 
      else 
      { 
       var $no = parseInt(value),$i; 
       for($i=0;$i < $no; $i++) 
       { 
        var value1=document.getElementById('Design[' + $i + ']').value; 


        if(value1==="") 
        { 
        alert("Please enter Data"); 
        break; 
        } 
       } 
       if($no===$i) 
       { 
        alert("Data Saved !!!"); 
       } 
     } 
    } 
     //]]> 
     </script> 
     </head> 
<body> 
Number Of News Item To be Displayed <input id="noOfNews" type="text" onkeyup="BuildFormFields(parseInt(this.value, 10));" /> 

      <div id="FormFields" style="margin: 20px 0px;"></div> 
<button class="btn btn-blue" onclick="saveNews()">Save</button> 
</body> 
</html>

我使用JSF 2.0，並希望將輸入的數據保存到數據庫中，任何想法我如何能做到這一點。

感謝，阿希奈

來源

2013-05-01 ItachiUchiha

你有沒有試圖獲取你的serverside bean中的數據？如果你不知道如何完成這個，請考慮一個'JSF Hello World'示例。 – Aquillo 2013-05-01 11:32:49

我試圖給用戶一個選擇，儘可能多地添加新聞。一旦他完成了新聞的寫作，我希望他們能夠存儲在某個數據庫中，然後在主頁上顯示它。這是管理頁面的一部分 – ItachiUchiha 2013-05-01 15:01:38

您可以更好地與一個backing bean不要使用Javascript處理這個。使用ajax你不需要任何頁面刷新。沿此線的東西：

HTML

<h:form> 
    <p> 
     <h:inputText value="#{bean.noOfFields}" /> 
     <h:commandButton value="Create fields"> 
      <f:ajax execute="@form" render="@form" /> 
     </h:commandButton> 
    </p> 

    <hr /> 

    <p> 
     <c:forEach items=#{bean.values} varStatus="counter"> 
      Field no. #{counter.index} <h:inputText value="#{bean.values[counter.index}" /><br /> 
     </c:forEach> 

     <h:commandButton action="#{bean.submit}" value="Save" /> 
    </p> 
</h:form>

Bean.java

@ManagedBean 
@ViewScoped 
public class Bean { 
    private String noOfFields = 1; 
    private String[] values = new String[1]; 

    public void submit() { 
     // save values in database 
    } 

    public String getNoOfFields() { 
     return noOfFields; 
    } 

    public void setNoOfFields(String noOfFields) { 
     try { 
      values = new String[Integer.valueOf(noOfFields)]; 
      this.noOfFields = noOfFields; 
     catch(NumberFormatException ex) { 
      values = new String[1]; 
      noOfFields = "1"; 
     } 
    } 

    public String[] getValues() { 
     return values; 
    } 
}

注意

如果你要堅持到keyup事件，你可以很容易地將其綁定到<h:inputText value="#{bean.noOfFields}" />也是。雖然我建議不要這樣做，因爲每個按鍵都會調用另一個Ajax調用。

來源

2013-05-01 15:39:05 Aquillo

嗨，對不起，延遲，但我試圖用你的方法ñ它不斷給出以下錯誤。 javax.servlet.ServletException：無法創建託管bean消息。發現以下問題： - 無法找到託管bean消息的Bean或屬性類String []。 – ItachiUchiha 2013-05-10 16:32:24

你可以在PasteBin（bean和相關的HTML）上分享你的代碼嗎？我要看看它;） – Aquillo 2013-05-10 16:37:23

請找代碼在這裏 http://pastebin.com/BkV9P04M – ItachiUchiha 2013-05-10 16:45:53

將javascript創建的動態文本字段綁定到bean

回答

相關問題