将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

回答

相关问题