java - Need to display my data from database on next tab after ajax post -
hello new ajax , jquery/jquery(ui), have application has 4 tabs (1,2,3,4).
the first tab enabled , last 3 tabs disabled initially. when user clicks on next button in first tab goes second tab. when user clicks button in second tab should go third tab review or display details of information collected in database, user clicks on button in third tab goes tab 4.
the problem:
now clicking on button in 2nd tab, ajax post takes form data tab 1 , tab 2 liferay portlet controller class in collects data , insert database not return data function.
the issue when click on next button in second tab goes third tab shows table header information , not table row data (i.e empty). way shows data when physically click on refresh page browser in goes first tab have go click on tab 1 , tab 2 again see data in table row on tab 3 inserted database.
here code snippets. can please in how resolve issue? suitable way of implementing solution?
<script type="text/javascript"> $(document).ready(function () { var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2,3] }); $("#additem").click(function(e){ //faults var fault = $('#dd1').val(); var child = $('#childfault').val(); //var childfaultval = $('#childfault').val; var how = $('#faultreason').val(); var noteval = $('#note').val(); var occurencedate = $('#datepicker').val(); if (fault == ''){ alert("please select stain or damage"); return false; } if (child == ''){ alert("please select type of "+fault); return false; } if (occurencedate == ''){ alert("please select date "+ fault +" occured "); return false; } if (how == ''){ alert("please select how incident happened"); return false; } $tabs.tabs('enable', 1).tabs("option", "active", 1).tabs('disable', 0); return false; }); /* $('#btn-submit').bind('click', function(){ */ $('#btn-submit').click(function(){ //$('#myform').on('submit', function(e){ //$tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1); //faults var fault = $('#dd1').val(); var childfaultval = $('#childfault').val; var how = $('#faultreason').val(); var noteval = $('#note').val(); var occurencedate = $('#datepicker').val(); //items var itemval = $('#item').val(); var subitemval = $('#subitems').val(); var materialval = $('#material').val(); var locationval = $('#location').val(); var materiallocval = $('#materialloc').val(); if (itemval == ''){ alert("please select item"); return false; } if (subitemval == ''){ alert("please select type of"+itemval); return false; } if (materialval == ''){ alert("please select material of "+itemval); return false; } if (locationval == ''){ alert("please location on "+itemval); return false; } if (materiallocval == ''){ alert("please select material location of the"+itemval); return false; } var form_data = $("form").serialize(); $.ajax({ type: "post", url: "<%=renderresponse.encodeurl(reviewclaimurl.tostring())%>", cache: false, data: form_data, datatype: "text", error: function() { $('#status').text('update failed. try again.').slidedown('slow'); }, success: function(response) { $tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1); }, complete: function() { settimeout(function() { $('#status').slideup('slow'); }, 3000); } }); }); $("#addfault").click(function(){ $tabs.tabs('enable', 0).tabs("option", "active", 0).tabs('disable', 1); return false; }); $("#confirm").click(function(){ $tabs.tabs('enable', 3).tabs("option", "active", 3).tabs('disable', 1); return false; }); }); html code tab 2
<div id="atab2"> <p id="status"></p> <div> <strong> <label>please select item </label></strong> <select name="item" id="item" onchange="<portlet:namespace/>poputlateitemlist(this);" style="width: 200px;"> <option></option> <c:if test="${itemlist != null}"> <c:foreach var="itm" items="${itemlist}"> <option value="${itm.text}"> <c:out value="${itm.text}" /> </option> </c:foreach> </c:if> </select> <div id="<portlet:namespace/>materialtext"></div> <div align="center"> <input type="button" name="btn-submit" class="button" id="btn-submit" value="next" /> </div> </div> </div> </aui:form> html tab3
<div id="atab3"> <div id=someelement> <p> <strong>please review following items selected. add additional faults or select next complete claim</strong> </p> <table id=" tfhover" class="tftable" border="1"> <tr> <th>fault selected</th> <th>item selected</th> <th>incident date</th> <th>action</th> </tr> <c:if test="${newclaimreviewlist != null}"> <c:foreach var="review" items="${newclaimreviewlist}" varstatus="thecount"> <% paragraphid = helper.getparagraphid(); %> <c:set var="mycount">${thecount.count + 100}</c:set> <c:set var="mychildfault">${review.childfault}</c:set> <c:set var="myitem">${review.item}</c:set> <c:set var="myincidentdate">${review.incidentdate}</c:set> <c:set var="myid">${review.id}</c:set> <% string mycountval = (string) pagecontext .getattribute("mycount"); string mychildfault = (string) pagecontext .getattribute("mychildfault"); string myitem = (string) pagecontext.getattribute("myitem"); string myincidentdate = (string) pagecontext .getattribute("myincidentdate"); string myid = (string) pagecontext.getattribute("myid"); string rowname = "my_row_" + mycountval; %> <div class="aui-ctrl-holder" id=<%=paragraphid%>> <liferay-ui:icon-menu> <tr id=<%=rowname%>> <td>${review.childfault}</td> <td>${review.item}</td> <td>${review.incidentdate}</td> <td><liferay-ui:icon-menu> <% string tagliburl = "javascript:" + renderresponse.getnamespace() + "removefault('" + mycountval + "','" + myid + "')"; %> <liferay-ui:icon-delete url="<%=tagliburl.tostring()%>" /> </liferay-ui:icon-menu></td> </tr> </liferay-ui:icon-menu> </div> </c:foreach> </c:if> </table> </div> <br /> <br /> <div align="center"> <button id="addfault">add fault/item</button> <button id="confirm">next</button> </div> </div> /****************************** * * @param actionrequest * @param actionresponse ***********************************/ @suppresswarnings("unchecked") @processaction(name = "reviewclaim") public void postdata(actionrequest actionrequest,actionresponse actionresponse){ actionutil.createreviewclaimdetail(actionrequest,hows,items,claim,policyid); actionresponse.sendredirect(viewcreatenewclaim+"?id="+policyid+"&action=review"); } here code populate html table
fault selected item selected incident date action
<c:if test="${newclaimreviewlist != null}"> <c:foreach var="review" items="${newclaimreviewlist}" varstatus="thecount"> <% paragraphid = helper.getparagraphid(); %> <c:set var="mycount">${thecount.count + 100}</c:set> <c:set var="mychildfault">${review.childfault}</c:set> <c:set var="myitem">${review.item}</c:set> <c:set var="myincidentdate">${review.incidentdate}</c:set> <c:set var="myid">${review.id}</c:set> <% string mycountval = (string) pagecontext .getattribute("mycount"); string mychildfault = (string) pagecontext .getattribute("mychildfault"); string myitem = (string) pagecontext.getattribute("myitem"); string myincidentdate = (string) pagecontext .getattribute("myincidentdate"); string myid = (string) pagecontext.getattribute("myid"); string rowname = "my_row_" + mycountval; %> <div class="aui-ctrl-holder" id=<%=paragraphid%>> <liferay-ui:icon-menu> <tr id=<%=rowname%>> <td>${review.childfault}</td> <td>${review.item}</td> <td>${review.incidentdate}</td> <td><liferay-ui:icon-menu> <% string tagliburl = "javascript:" + renderresponse.getnamespace() + "removefault('" + mycountval + "','" + myid + "')"; %> <liferay-ui:icon-delete url="<%=tagliburl.tostring()%>" /> </liferay-ui:icon-menu></td> </tr> </liferay-ui:icon-menu> </div> </c:foreach> </c:if>
you need make ajax request pull data before enabling/displaying 3 tab or set data in model map(on post call) , retrieve on 3rd tab.
Comments
Post a Comment