CODEWITHSUNDEEP
springjspspring-mvcjstl
ronan
ronan

Reputation: 4672

Persist a value in a local datastructure in Spring MVC

Experts

My requirement is to persists/store values that a user is editing against that field and the edited values should persist next time a user opens the same page for that perticular field.

Currently my page displays the total no of registered users against a field Total Registration. Initially the totalcount data gets from a database against the field Total Registration Im showing the following image to display the data initially enter image description here Now when a user wants to edit the total no of Registration , a user can click the pencil image and can edit the total registration No. Now on click of a floppy image the edited count should be saved locally in a data structure and next time a user visits the page again, enter image description here A user should see the last edited/updated value. My code base is as below 1> DIV to display the total registration value is 

<div class="row-fluid">
        <div class ="span2">

        <label><spring:message code="registration.total"></spring:message>:&nbsp; </label>
        </div>
        <div class = "span3">
        <div class="input-mini">    
            <div class="textVal ">
             <div class = "span3">${regStatusForm.total} </div> 
             </div>
            <div id="pencil" class="span3">
            <img src="/static/img/pencil.png" alt="Edit" >
             </div>
            <div id="save" class="span3">
            <img src="/static/img/save.png" alt="Save" >
            </div>
            <div id="close" class="span3">
            <img src="/static/img/close.png" alt="Close" >
            </div>
        </div>  
        </div>

2> JQuery Code to make it editable is 

  var textValue = "";
    $('#pencil').on('click', function(){
        textValue =  $('.textVal').text();
        $('.textVal').html("<input type='textbox' id='textVal' value='" + textValue + "' />");
        $(this).hide();
        $('#save, #close').show();
    });

$('#save').on('click', function(){
    $('.textVal').text($('#textVal').val());
    $(this).hide();
    $('#close').hide();
    $('#pencil').show();
});

$('#close').on('click', function(){
    $('.textVal').text(textValue);
    $(this).hide();
    $('#save').hide();
    $('#pencil').show();
});

3> CSS code is 

<style type="text/css">
.textbox {
    height:24px;
    width:90px;
    line-height:22px;
    padding:3px

}
#textVal {
    width:35px;
    margin-right:5px
}
.icons {
    float:left;
    width:20px;
    height:20px;
}
#save, #close {
    display:none;
    width:20px;
    height:20px;
    float:left
}
.textVal {
    float:left;
    width:35px;
    height:20px;
    margin-right:5px
}
#pencil {
    display:block
}
</style>

Please suggest a suitable way to achieve this.

Upvotes: 1

Views: 957

Answers (1)

Martin Frey
Martin Frey

Reputation: 10075

You have basically two options. Store it in the server after a form was submitted or store it on the client after the user entered some text and left the field.

In the first case you could create a table storing the input ids and values and populate the fields once you render them. I could imagine that there is a good chance to do this with a servletfilter which modifies the response.

The second one could be simpler to implement with jquery and localstorage. This you can only do if the data can live in one browser only and if another machine is used you will start from scratch. Easier i say because on page load you run a jquery on all inputs and fill them with values from the localstorage.

Upvotes: 1

Related Questions