CODEWITHSUNDEEP
javajavascriptjqueryjsppagination
marknorkin
marknorkin

Reputation: 4074

Pagination: how to load first page with AJAX

I'm writing online shopping application using Struts 2.

In front-end I'm using jsp, twitter bootstrap, jquery, moustache.js template, twbs pagination plugin and some javascript.

I have Product entity and I want to display the list of products to the user in jsp page.

The way I'm doing it is async loading page with fix number(20) of products in json format and then obtaining them using mustache template.

All my code works except the time when user the first time sees this jsp page - first 20 products are not displaying. So when I'm moving from page to page it loads info, but as twbs plugin works through firing events it means that event is not triggered after jsp page loaded the first time.

So my question is whats the truly good way to fix this ?

Should I fire an event once or use $(document).ready() or $(document).onload() ?

I'm not an expert in javascript, so please be patient

<html>
<%@ include file="/WEB-INF/jspf/head.jspf"%>
<body>
    <%@ include file="/WEB-INF/jspf/menu.jspf"%>
    <div class="container">
        <ul class="sync-pagination pagination"></ul>
        <div id="products" style="width: 50%"></div>
        <ul class="sync-pagination pagination"></ul>
    </div>

    <script type="text/javascript"
        src="webjars/mustachejs/0.8.2/mustache.js"></script>
    <script id="products-template" type="text/mustache-template">
<ul class="list-group">
{{#.}}
  <li class="list-group-item">
        <label for="{{name}}">Name: /label> {{name}}
</br>
        <label for="{{price}}">Price: </label> {{price}}
</br>
<a href="product/view?id={{id}}">Full description...</a>
  </li>
{{/.}}
</ul>
    </script>

    <script type="text/javascript"
        src="script/jquery.twbsPagination.min.js"></script>
    <script type="text/javascript">
        var records = "${requestScope.records}";
        var recordsPerPage = 20;
        var pages = Math.ceil(records / recordsPerPage);
        $('.sync-pagination').twbsPagination({
            totalPages : pages,
            visiblePages : 7,
            onPageClick : function(event, page) {
                $('#products').html(changePage(page));
            }
        });

        function changePage(page) {
            pnumber = page || 1;

            $.ajax({
                type : 'GET',
                dataType : 'json',
                url : 'product/upload_products?page=' + pnumber,
                success : function(products) {
                    var template = $('#products-template').html();
                    var info = Mustache.render(template, products);
                    $('#products').html(info);
                }
            })
        }
    </script>
</body>
</html>

Upvotes: 1

Views: 2941

Answers (1)

honerlawd
honerlawd

Reputation: 1509

You need to call changePage(); on the initial load. You might also want to call this when the page finishes loading everything by using $(document).ready();

<script type="text/javascript">
        var records = "${requestScope.records}";
        var recordsPerPage = 20;
        var pages = Math.ceil(records / recordsPerPage);
        $('.sync-pagination').twbsPagination({
            totalPages : pages,
            visiblePages : 7,
            onPageClick : function(event, page) {
                $('#products').html(changePage(page));
            }
        });

        function changePage(page) {
            pnumber = page || 1;

            $.ajax({
                type : 'GET',
                dataType : 'json',
                url : 'product/upload_products?page=' + pnumber,
                success : function(products) {
                    var template = $('#products-template').html();
                    var info = Mustache.render(template, products);
                    $('#products').html(info);
                }
            })
        }
  
        //Add this in here
        changePage();
    </script>

Upvotes: 2

Related Questions