Tuesday 2 June 2015

Dynamically loading only div of jsp

Hi
Today in this post I will describe how to load a div only of a jsp page.
In one of my project I have to display a table with out reloading page, so simple idea is to use Ajax call and fetch data from action class and display here.
I wrote Ajax method and hits serveResource method and then fetching user data from user table by passing some value from jsp to action class. In serveResource method I fetched data from user_ table and created one Json array and the returned to jsp page.
Up to here each and every thing is good but complexity arises when I want to set values from success part of Ajax call to my table. For each data I have to create tr and td and then add data inside it.
I can do this but my mam said that don't use this just go to serveResource method and then add data to session and then fetch that data to a div which is already present inside your jsp and just reload that div only. By following describe by mam is help me to avoid to create any Json array and then setting tr and td from my JavaScript function.
Now the time for code.
jsp page
<portlet:resourceURL var="usersToDisplayURL">
    <portlet:param name="<%= Constants.CMD %>" value="fetchingUsersDisplay" />
</portlet:resourceURL>


1. User userLists = (User)portletSession.getAttribute("usersValueFromActionClass");
2.  portletSession.removeAttribute("usersValueFromActionClass");
3. <a onclick="usersFunc(<%= userLists.getUserId() %>)">Press Here</a>
4. <div id="outerDiv" style="display:none">
    <div id="innerDiv"  style="display:none">
        <table id="<portlet:namespace />Table1">
            <thead>
                <tr>
                    <th>User€™s name</th>
                    <th>email</th>
                    <th>user create date</th>
                    <th>Age</th>
                    <th>Job title</th>

                </tr>
            </thead>
            <tbody>
                <%    
                      List<User> users = (List<User>)portletSession.getAttribute("activeListUser");
                      if(Validator.isNotNull(users)){
                          for(int k=0;k<users.size();k++){
                              User usr = (User)users.get(k);
                                  %>
                                  <tr>
                                    <td><%= k+1 %></td>
                                    <td><%= usr.getFullName() %></td>
                                    <td><%= usr.getEmailAddress() %></td>
                                    <td><%= usr.getCreateDate() %></td>                             
                                    <td><%= gender %></td>  
                                    <td><%= usr.getJobTitle() %></td>
                                  </tr>
                              <%
                          }
                      }
                  %>
            </tbody>
        </table>
    </div>
</div>


<aui:script>
function displayDatatable() {
        var table = $('#userListTable').dataTable({
            "bLengthChange": true,
            "iDisplayLength": 10,
            "bFilter":          false,
            "pagingType": "simple",
           
        });
    }


function usersFunc(num){      
         AUI().use('aui-base','aui-io-request-deprecated', function(A){
                A.io.request('<%= usersToDisplayURL %>',{
                                dataType: 'json',
                                method: 'GET',
                                data: { usersId: num },
                                on: {
                                         success: function() {
                                             $("#outerDiv").show();
                                             jQuery("#outerDiv").load(location.href+" #innerDiv", function(){
                                                    displayDatatable();
                                                $("#innerDiv").show();
                                                });
                                         },
                                         error: function(data){
                                               console.log("error");
                                           }
                                    }
                     });
              });   
     }

</aui:script>

my java class

@SuppressWarnings("unchecked")
    public void fetchingUsersDisplay(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
    throws PortalException, SystemException{
        HttpServletRequest httpReq = PortalUtil.getHttpServletRequest(resourceRequest);
        String usersIndex = PortalUtil.getOriginalServletRequest(httpReq).getParameter("usersId");
        PortletSession portletSession = resourceRequest.getPortletSession();
        List<User> users = (List<User>)portletSession.getAttribute("usersListVal"+usersIndex);
        portletSession.setAttribute("activeListUser", users);
       
    }


My requirement was to display total users on different conditions and in different different ways. I am setting this values by using session on different variables. Here I don't want to mention all these conditions. So getting userid from first list is just to make my code considerable and succinct.
I am setting in session and then reload only div which is already there but hidden.

Thanks









No comments:

Post a Comment