Ask Questions and Find Answers

<% int pageNumber = 1; %>

<script>
    AUI().ready('aui-base', function(A) {
        A.one('#nextPage').on('click', function() {
            <% pageNumber++; %>
            alert(<%= pageNumber %>);
            addSomething();
        });
    });
</script>

What I want to do is increment the pageNumber when I click "Next Page", and I will get my data according to this pageNumber. The problem is that doing like this, the pageNumber is not incrementing. The alert keep showing me the pageNumber = 1. How should I increment my java variable on javascript?

It doesn't work this way. While the JSP is processed server side, it's generating output. Once that's done, you'll get HTML code that translates roughly to this:

<script>
    AUI().ready('aui-base', function(A) {
        A.one('#nextPage').on('click', function() {
            alert(1);
            addSomething();
        });
    });
</script>

During evaluation of your Javascript function, there's no communication between the server and the browser, and all the code limited by <% %> has already been evaluated, and the code in <%= %> has been embedded in the generated HTML output. Thus, the browser never ever sees your java variable and couldn't care less how the page was generated (look at the generated HTML code: There's no trace left.
Depending on what actually happens, you'll (most likely) need to initialize your pageNumber to some value derived from a HTTP parameter, rather than always to 1. Or use a different approach - e.g. fully in Java or fully in Javascript.

Hi Olaf,

Ok, I understood. I modified my code a bit:

&lt;% List<datasource> dataSources = (List<datasource>) request.getAttribute("dataSources"); %&gt;
<portlet:resourceurl var="changePageURL" />

<aui:container cssclass="data-sources-container">
&nbsp; &nbsp; &lt;% for (int i = 0; i &lt; dataSources.size(); i++) { %&gt;
&nbsp; &nbsp; &nbsp; &nbsp; // populate according to my dataSources&nbsp; &nbsp; 
    &lt;% } %&gt;
</aui:container>

<aui:container cssclass="pagination-container">
&nbsp;&nbsp; &nbsp;<button type="button" onclick="nextPage()"> <liferay-ui:message key="next.page" /> </button>
</aui:container>

<script>
    var pageNumber = 0;

    function nextPage() {
        pageNumber++;
     
        AUI().use('aui-io-request', function(A){
            A.io.request('${changePageURL}', {
                method: 'post',
                data: {
                    <portlet:namespace />pageAction: 'next',
                    <portlet:namespace />pageNumber: pageNumber
                }
            });
        });
    }
</script></datasource></datasource>

And in my Java class:

@Override
public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException { 
    int pageNumber = ParamUtil.getInteger(resourceRequest, "pageNumber");
    
    for (int i = pageNumber * 16 + 1; i <= pageNumber * 16 + 16; i++) 
        dataSources.add(new DataSource(i));
        
    resourceRequest.setAttribute("dataSources", dataSources);
    super.serveResource(resourceRequest, resourceResponse);
}

Ok, now I can get the pageNumber on my Java class and create new objects and set it as attribute.

Now, can I somehow refresh the container of my view.jsp to populate with those new dataSources? Maybe refresh the attribute on my view.jsp and recreate only the dataSources container.