P
P
parkito2016-10-07 22:15:14
Java
parkito, 2016-10-07 22:15:14

How to arrange page refresh in jsp?

Hello. Help, please, to solve a problem.
There is a jsp page - index.jsp . It consists of two (via jsp include) header.jsp and the direct content of index.jsp. Some number is displayed in header.jsp

<p class="list-group-item-text text-overflow">I spend ${userPayment} RUB per month</p>

In index.jsp, this number can be changed (via a servlet, which in turn writes data to the session, and header.jsp reads this number from the session). But in order for this changed number to be displayed in header.jsp , you need to go to another page, and then return. So it just won't change (the update doesn't help). I think it's because the browser caches header.jsp . How can I disable this caching so that header.jsp is also updated when the page is refreshed ?

UPD

Part of header.jsp

<div class="popover-content">
                    <div class="list-group">
                        <a href="userTariffs" class="list-group-item">
                            <h4 class="list-group-item-heading text-overflow">
                                <i class="fa fa-fw fa-envelope"></i> My scope
                            </h4>
                            <p class="list-group-item-text text-overflow">I spend ${userPayment} RUB per month</p>
                        </a>
                    </div>
                    <div style="padding:10px"><a class="btn btn-success btn-block" href="userTariffs">Show me
                        more...</a></div>
                </div>


ajax

function popBox() {
                                            x = confirm('Are you sure? ');
                                            if (x == true) {
                                                var xhr = new XMLHttpRequest();
                                                xhr.open("POST", "userChangeTariff?sum=" + par1, false);
                                                xhr.send();


Controller

@RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
    public String changeTariff(HttpServletRequest req, Locale locale, Model model,
                               @RequestParam(value = "sum") String sum) {
        req.getSession().setAttribute("userPayment", ++sum);
        return "user/userTariffs";
    }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
sirs, 2016-10-09
@parkito

return "user/userTariffs";It means to send the user to this page, you make an ajax request and the controller does not send the user to any page. In order for the information to be updated on the page as you want, you need to pass this information from the controller on the server to the client browser in the response, the @ResponseBody annotation and on the client use js to update the html page.
You can pass a piece of html, xml, json in the response, you can simply pass a String, the main thing is that the js code that will process the response understands what to expect from the server.
The simplest option for your case:

@RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
@ResponseBody
    public Integer changeTariff(HttpServletRequest req,
                               @RequestParam(value = "sum") Integer sum) {
        final Integer newSum = new Integer(sum+1);
        req.getSession().setAttribute("userPayment", );
        return newSum;
    }

On the client do:
<div class="popover-content">
                    <div class="list-group">
                        <a href="userTariffs" class="list-group-item">
                            <h4 class="list-group-item-heading text-overflow">
                                <i class="fa fa-fw fa-envelope"></i> My scope
                            </h4>
                            <p class="list-group-item-text text-overflow">I spend <span id="user_payment_sum">${userPayment}</span> RUB per month</p>
                        </a>
                    </div>
                    <div style="padding:10px"><a class="btn btn-success btn-block" href="userTariffs">Show me
                        more...</a></div>
                </div>

function popBox() {
             x = confirm('Are you sure? ');
               if (x == true) {
              var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);  //TODO test alert
document.getElementById('user_payment_sum').innerHTML =xhr.responseText;
    }
}
              xhr.open("POST", "userChangeTariff?sum=" + par1, false);
             xhr.send();

Please note that I added <span id="user_payment_sum">, which contains the data that we want to dynamically change on an ajax request to the server, and a section if (xhr.readyState == XMLHttpRequest.DONE) {that waits for a response and performs some actions when the response arrives.
PS My advice to you is to learn the basics: how client-server applications work, how servlet, jsp, session, ajax work, and only then take on frameworks. Just doing according to samples from the Internet - do not learn, one day there will be such a task, an example that will not simply be on the Internet.
PPS I did not run the code, I just wrote it from memory, some errors are possible.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question