Update data on submit button and stay on the same page

nahid picture nahid · Feb 2, 2015 · Viewed 14.1k times · Source

I have the following jsp page in which there is a table populated with data from arraylist in java code. I put table rows in input tag to be able to edit them. what I want to do now is to save data after editing them and still stay on the same page. I think I can use either javascript/jquery or ajax call and I've read about some solutions using them, but don't know actually how to use it to make it work! Any hints or suggestions would be appreciated alot!

        <stripes:form beanclass="SaveStudent.action">
          <table>
                <c:forEach var="array" items="${actionBean.importExcel }">
                    <tr>
                        <td><input type="text" value="${array.getStudent().getPersonalNumber() }" name="pnr"/></td>
                        <td><input type="text" value="${array.getStudent().getEmail() }" name="email"/></td>
                    </tr>
                </c:forEach>
            </table>

            <p>
                <stripes:submit name="saveExcel" value="save"/>
            </p>

        </stripes:form>

Edited version: I have an array in java which I passed to jsp to be displayed as a table to user. when user change a value in the page, I need that value get updated(done by Ajax call(answered already, see following!)) and then shown to the user and at the same time get updated in the array in java code. My problem now is that how to pass variable from JQuery to jstl/jsp. I tried following, but not working, I don't know what I'm doing wrong!

<script>        
   $(document).ready(function() {
     $("#click").click(function(){
        var pnr = $("#pnr").val();
        $.ajax({
            type:"POST",
            url:"newImport.jsp",
            data: pnr,
            success:function(data){
              $("#pnr").html(data);
              alert('Update success!');
            },
            failure: function(data){
               alert('Update Failed!');
            }
        });
    });
});             
</script>

<% 
    String pnr = request.getParameter("pnr");
    out.println(pnr);//For test
%>
<table>
<c:forEach var="array" items="${actionBean.importExcel }">
    <tr>
    <c:choose>
        <c:when test="${request.getParameter('pnr')=='null'}">
            <td><input type="text" value="${array.getStudent().getPersonalNumber() }" id="pnr" name="pnr"/>
            </td>
        </c:when>
        <c:otherwise>
            <td><input type="text" value="${request.getParameter('pnr') }" id="pnr" name="pnr"/>
            </td>
        </c:otherwise>
    </c:choose>
    </tr>
</c:forEach>
</table>

Answer

The Coder picture The Coder · Feb 2, 2015

I dont know about stripes, but I know how to do it in ajax.

<form>
    <input type="text" id="phoneNumber" name="phoneNumber"/><br>
    <input type="text" id="email" name="email"/><br>
    <button type="button" id="submit">Submit</button>
<form>

<script type="text/javascript">
    $("#submit").click(function() {
        var phoneNo = $("#phoneNumber").val();
        var email = $("#email").val();
        $.ajax({
            url: 'yourActionPath',
            type: 'POST',
            data: {
                phoneNo: phoneNo,
                email: email
            },
            success: function(data) {
                alert('Update Success');
            },
            failure: function(data) {
                alert('Update Failed');
            }
        });
    )};
</script>

You can get the phoneNo and email by using request.getParameter("phoneNo") and request.getParameter("email").

Make changes in this code according to your technology.