mercredi 1 juillet 2015

How do I update a c:forEach(table) using Ajax success data in Spring project?

The am currently working on e-commerce project where i need to update the item in of jstl iterator on a particular ajax call so the content of the page can change dynamically. The jstl code in the HTML is show below.

<div id="categorydiv" style="display: block;">
                    <!-- Start category -->
                    <c:forEach var="item1" items="${shoppingCart.categories}">
                    <div class="items-board-container popular">
                        <div class="infinite-scrolling items-board unstyled">
                            <div class="item-header">
                                <h4>
                                    <a href="#" onclick="dispProductCategoryWise('${item1.name}','${item1.id}','${item1.id}','${shoppingCart.retailer.id}')" class="department">${item1.name}</a>
                                    <a href="#" onclick="dispProductCategoryWise('${item1.name}','${item1.id}','${item1.id}','${shoppingCart.retailer.id}')">View More</a>
                                </h4>
                            </div>
                            <ul class="items-list unstyled">
                            <fmt:parseNumber var="i" type="number" value="${item1.id}" />
                            <c:forEach var="item2" items="${shoppingCart.subcategories}">
                                        <c:if test="${item2.parentCategory.id==i}">
                                <li class="aisle_337 department_42 has-details item" data-item-id="42275" data-department-id="42" data-aisle-id="337">
                                    <div class="media">
                                        <img onclick="dispProductCategoryWise('${item2.name}','${item2.id}','${item1.id}','${shoppingCart.retailer.id}')"
                                            src="${pageContext.request.contextPath}${item2.image}"
                                            alt="${item.name}" style="">
                                    </div>
                                    <div class="item-info">
                                        <div class="item-name item-row">
                                            <span class="full-item-name">${item2.name}</span>
                                        </div>
                                    </div>
                                </li>
                                </c:if>
                            </c:forEach>

                            </ul>
                        </div>
                    </div>
                    </c:forEach>
                    <!-- End Category -->
                </div>

On a particular action in the HTML page the following function is been called:

function getCategoryDiv(categoryTypeId){
            var rootUrl = document.getElementById("url").value;
            $.ajax({
                url:rootUrl+"/customer/getCategoriesList.shx",
                data: 'categoryTypeId='+categoryTypeId,
                success:function(data){
                    var jObj = jQuery.parseJSON(data);
                },
                error:function(data,status,err){
                    alert("Error occured in buildCategoryDiv() function");
                }
            });
        }

Based on the AJAX call it will hit the controller as follows:

@RequestMapping(value = "/customer/getCategoriesList.shx", method = RequestMethod.GET)
    public ModelAndView getRetailerProducts(Model model, HttpSession session,
            @ModelAttribute("shoppingCart") ShoppingCart shoppingCart,
            @RequestParam("categoryType") String categoryType) throws IOException{
        System.out.println("Inside getRetailerProducts() method");
        shoppingCart.setCategoryType(categoryType);
        shoppingCart.setCategories(categoryDao.getAllCategoryByType(shoppingCart.getCategoryType()));


        shoppingCart.setSubcategories(categoryDao.getCategories());
        //set all the category type
        shoppingCart.setCategoryTypes(categoryTypeDao.getCategoryType());
        model.addAttribute("shoppingCart", shoppingCart);
        String json =  JSONUtil.createJsonString(shoppingCart);
        return new Model("shoppingCart", shoppingCart);
    }

Is the code correct and how can i updated the returned Model from the controller in my JSTL's tag?

Aucun commentaire:

Enregistrer un commentaire