CODEWITHSUNDEEP
hibernatejspstruts2struts
adarksun
adarksun

Reputation: 369

How to add dynamic row and insert values in JSP page using struts2 and JSP?

I am able to display all table's ("Products(id, name)") data using Struts2 and Hibernate in a JSP page. But I want to add a feature. There should be a button (like "Add new row") and by clicking that button a new row will be added at the end of the table and it will provide option to add values to save.

To do this, I tried to the jsp page like this:

<table>
    <tr>
        <th>Name</th>
        <th>EntryDate</th>
    </tr>

    <s:iterator value="productList">        
    <tr>
        <td> <s:textfield name="Name" /></td>
        <td> <sj:datepicker name="EntryDate" displayFormat="ymmdd" maxlength="6" /> </td> 
    </tr>   
    </s:iterator>
    <tr>
        <td><button type="button" onclick="addNewRow(this.parentNode);">Add new row </button> </td>
    </tr>
</table>

I tried to implement this using javascript. But I failed. Can anybody have any suggestion how to do this.

Upvotes: 2

Views: 8718

Answers (3)

Divya
Divya

Reputation: 1485

when you are calling onclick u will go to a js method ,that means a button is presed ..in that case create a row using js and show a button that says "save values" and then when the control tranfers back to that button and when the control tranfers back to button check for the value of that save values button and if it is pressed submit it using document.forms['id']...

Upvotes: 0

Colm Ryan
Colm Ryan

Reputation: 1208

You could implement addNewRow as an AJAX action method . In the method add a newly instantiated Product object and return to the page. Your iterate will handle the display of the relevant input fields.

Upvotes: 0

J888
J888

Reputation: 1964

Use the following code

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="functions.js"></script>
</head>
<body>
    <button id="btnAddd”>New</button>
    <table id="tblData">         
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>


function Add(){
    $("#tblData tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><img src='images/disk.png' class='btnSave'><img src='images/delete.png' class='btnDelete'/></td>"+
        "</tr>");

        $(".btnSave").bind("click", Save);     
        $(".btnDelete").bind("click", Delete);
};


$(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

Source and have a look at Link

Upvotes: 1

Related Questions