Switch form listview to gridView Servlet Jsp Ajax

Question

I want to change listview to gridview on jsp page. I use for each tag. Below are the extract path of the content that i want to switch and the two link for click to switch the display. I have grid view content

        <c:forEach items="${itemList}" var="item">
          <div class="col-md-6">
            <div id="item_row_cotainer">
                <div class="row">
                    <div class="col-md-5 col-xs-6">
                        <div class="image-list">
                            <a href="<c:url value="/checkItem?item_code=${item.item_code}"/>"><img src="<c:url value="/getItemImage?item_code=${item.item_code}"/>" alt="${item.item_name}" /></a>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-6">
                                <div class="item_title">
                                    <h4><a href="check_item.jsp">${item.item_name}</a></h4>
                                    <p>${item.summary}</p>   
                                    <h1>$US ${item.price}</h1>
                                </div>
                        <div id="left_align">
                            <a href="success_add_cart.jsp" class="btn btn-success btn-md" role="button">
                                <span class="glyphicon glyphicon-shopping-cart"></span>  Add to cart
                            </a>   
                        </div>      
                    </div>    
                </div> 
            </div>  
        </div> <!--end--item-->             
        </c:forEach>

and list view

                <c:forEach items="${itemList}" var="item">

                <div id="item_row_cotainer" class="col-md-12">
                <div class="row">
                   <!-- grid col-md-5 col-xs-6 -->
                    <div class="col-md-2 col-xs-6">
                        <div class="image-list">
                            <a href="<c:url value="/checkItem?item_code=${item.item_code}"/>"><img src="<c:url value="/getItemImage?item_code=${item.item_code}"/>" alt="${item.item_name}" /></a>
                        </div>
                    </div>
                   <!--  grid col-md-7 col-xs-6 -->
                    <div class="col-md-10 col-xs-6">
                        <!-- grid remove -->
                        <div class="row">
                        <!-- grid remove -->
                            <div class="col-md-8">
                                <div class="item_title">
                                    <h4><a href="check_item.jsp">${item.item_name}</a></h4>
                                    <p>${item.summary}</p>   
                                    <h1>$US ${item.price}</h1>
                                </div>
                            </div>  
                             <div class="col-md-4">
                                <div class="add_cart">
                                    <a href="success_add_cart.jsp" class="btn btn-success btn-md" role="button">
                                        <span class="glyphicon glyphicon-shopping-cart"></span>  Add to cart
                                    </a>   
                                </div>
                            </div>
                        </div>
                    </div>

                </div>   
            </div><!--end item-->

        </c:forEach> 

and here is the switch

            <div class="view-style">
                <a href="<c:url value="/ShowMenuItem?category_code=${category_code}&amp;category_name=${category_name}&amp;view=grid"/>"><span class="glyphicon glyphicon-th"></span></a>
                <a href="<c:url value="/ShowMenuItem?category_code=${category_code}&amp;category_name=${category_name}"/>" ><span class="glyphicon glyphicon-th-list"></span></a> 
            </div>

I want to know how to make these two content change dynamically without refreshing page. Actual I use this in two different jsp file . So can ajax help this out? can you help me?

Answer 1

Yes, you can. You can use jquery, perform $.get or $.post. On content received, set the inner html of a div. It will something look like below.

$(document).ready(function(){
  $("#p1").click(function(){
      $.post("/ShowMenuItem?category_code=${category_code}&category_name=${category_name}&view=grid", function(data){
        $("#content").html(data);
      });
  });
  
  $("#p2").click(function(){
      $.post("/ShowMenuItem?category_code=${category_code}&category_name=${category_name}, function(data){
        $("#content").html(data);
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="p1">Page 1</div>
<div id="p2">Page 2</div>
<div id="content">
  Content Here
</div>