0

次のコードがあります。これにより、textField 内に入力するテキストフィールドの数が作成されます。

<?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を使用しており、入力したデータをデータベースに保存したいのですが、どうすればこれを達成できるのでしょうか。

ありがとう、アビナイ

4

1 に答える 1

1

Javascript を使用するよりも、バッキング Bean を使用してこれにアプローチする方が適切です。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;
    }
}

ノート

キーアップ イベントに固執したい場合は、これも簡単にバインドでき<h:inputText value="#{bean.noOfFields}" />ます。ただし、キーストロークごとに別の ajax 呼び出しが呼び出されるため、これを行わないことをお勧めします。

于 2013-05-01T15:39:05.927 に答える