Update data on submit button and stay on the same page

Question

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>

Solution 1

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.

Solution 2

Use jquery .post method to send data asynchronously.

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

data refers your post data from form, like your pnr or email.

See demo here:

http://jsfiddle.net/52jb3xLk/

Comments

[nahid]

thanks for your answer, it works for me now, but I wonder when I get the parameter ex. 'email' whith request.getPrameter("email"), how could I have its value replaced with the old email value. I mean I nead the old value get updated with new one, I tested the new value by printing it out, so it's changing to new one but cann't have it in the old place!

[The Coder]

Why do need the old value? You only need the new values but you need to use primary key as base for updating it in database. If you need the primary key too, then store the primary key in form as <input type="hidden"> and do the same process like suggested in answer

[nahid]

I don't need the old value. I actually want to replace (update) it with new one. I just need to find out how to do it in jsp with jstl and jquery. Since the value is in an array and I need to update the array value, I'm struggling with syntaxes in jstl and jquery. I need to get the new value request.getPrameter("email") and replace it with array element(the table data in my jsp file mentioned in the question)

[The Coder]

I can't understand what you're saying.. where do you want the values to be updated? java or jsp?

[The Coder]

you've entered "newImport.jsp" as url in the ajax call, but you entered the type as "POST".. It'll not even go to java. It'll simply go to newImport.jsp page.Assuming you've updated the array in java, the problem in jsp that, you're using if else by JSTL tag, and depending upon that, the value will be printed, so you've to use the ajax success data to be used in the if else condition.

[nahid]

That's right and I want it this way! since I need to show changes in jsp first. I think I have three steps to do: 1)pass the array from java to jsp (done) 2)update the array from jsp and show it in jsp (halfly done! updated but not displayed[I can display it in same jsp, but I want to display it in same table cell ]) 3)pass the updated variable from jsp to the array in java(have no idea how to do it yet!)