POST Method multiple calls | First regular "Submi" | Second ajax{ type: 'POST',

Question

Hi folks I need some help I have created a web page having a

div#formsContent – This has the form and the action is controlled via RequestWorkListController.java

div#newReqDiv – These are results of submit from above, has a table of 5 rows static one time pull from DB

div#pendReqDiv – same as above.

div#cmplReqDiv – This div is tricky the first the submit button is clicked it goes fetches 10 rows, has clickable page numbers and 10 row display, I am using $.ajax( for second post, which works fine only the problem the the new set of 10 rows do not replace the old set of 10 rows.

SelLocCdReqCmplDao cmplDao = new SelLocCdReqCmplDao(jdbcTemplate);

int pg = ServletRequestUtils.getIntParameter(request, "pg", 1);

List<SelLocCdReqCmplModel> cmplRows = null;
cmplRows = cmplDao.execute(pg, pageSize);
int count = cmplRows.size()*10;
model.addAttribute("cmplRows", cmplRows);
model.addAttribute("pageNav", 
    pageNav.buildPageNav("#", count, pg, pageSize, pageNavTrail));

And here is the requestWorkList.jsp -- Script only

<script type="text/javascript">
    $(document).ready(function() {
        $("#form").submit(function() {
            $.post($(this).attr("action"), $(this)
                .serialize(), function(html) {
                $("#formsContent").replaceWith(html);
                $('html, body').animate({
                    scrollTop : $("#message").offset().top
                }, 500);
            });
            return false;
        });
        $('.page_nav a').click(function(e) {
            //alert($(this).text());
            //$('#cmplReqDiv').empty();
            $.ajax({
                type: 'POST',
                url: '<%=request.getContextPath()%>/requestWorkList?pg='
                     + $(this).text(),
                success: function(html) {
                    var showVar = '<c:out value="${cmplRows}"/>';
                    alert("The variable show is " + showVar);
                },
            });

            e.preventDefault();
        });
    });
</script>

Answer 1

Well after playing for a while I managed to refresh data in child table. I am posting the changed java script only.

<script type="text/javascript">
    $(document).ready(function() {
        $("#form").submit(function() {
            $.post($(this).attr("action"), $(this)
                .serialize(), function(html) {
                $("#formsContent").replaceWith(html);
                $('html, body').animate({
                    scrollTop : $("#message").offset().top
                }, 500);
            });
            return false;
        });
        $('.page_nav a').click(function(e) {
            $('#cmplReqDiv').empty();
            $.ajax({
                type: 'POST',
                serialize: $("#form").serialize(),
                url: '<%=request.getContextPath()%>/requestWorkList?pg='
                     + $(this).text(),
                success: function(html) {
                    //var showVar = '<c:out value="${cmplRows}"/>';
                    //alert("The variable show is " + showVar);
                    $("#formsContent").replaceWith(html);
                },
            });

            e.preventDefault();
        });
    });
</script>