470,596 Members | 1,574 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,596 developers. It's quick & easy.

How to refresh div on page after ajax call?

I am displaying the results by iterating the list in div tag say "results" in my case.For refining of search i am using ajax call. But when i am getting response back from this below snippet

Expand|Select|Wrap|Line Numbers
  1. document.getElementById("results").innerHTML=xmlHttp.responseText;
Its showing me content of JSP in which i am refining my list.

I am copying down the code for better understanding
Expand|Select|Wrap|Line Numbers
  1. Result.jsp
  2.  
  3. <div id ="results" style="position: absolute; left: 10px;  width: 540px; z-index: 24;"><%
  4.  
  5. out.print("category_id is " + session.getAttribute("categoryId"));
  6. if(session.getAttribute("list_full_detail_real_estate")!=null){
  7. List<RealEstateVo> list_full_detail_real_estate = (List)session.getAttribute("list_full_detail_real_estate");
  8.  
  9. List<RealEstateVo> list_full_detail_real_estate1 = (List)session.getAttribute("list_full_detail_real_estate");
  10.  
  11. int size =  list_full_detail_real_estate.size();
  12. %><%
  13. for(int j = 0;j<size;j++){
  14. %>
  15.  
  16.         <!-- Start of News Box 4 -->
  17.  
  18.             <div class="newsbox">
  19.  
  20.                 <div class="newsbox_header">
  21.  
  22.                 <!-- News Title -->
  23.                 Summary :&nbsp;<a href="detailsummary.do?summary_id=<%=list_full_detail_real_estate.get(j).getSummaryid()%>" style='color:#009900; font-size:18px;' title = ''><%=list_full_detail_real_estate.get(j).getSummary()%><br></a>
  24.  
  25.  
  26.                 <!-- News Date -->
  27.                 <strong>Date : <%=list_full_detail_real_estate.get(j).getDate()%></strong>
  28.  
  29.                 <div class="clearthis">&nbsp;</div>
  30.                 </div>
  31.  
  32.  
  33.                 <div class="newsbox_content">
  34. <%String swapvalue = list_full_detail_real_estate.get(j).getSwap();
  35.  
  36.             if(swapvalue!=null){ %><br><%}%>
  37.                 <!-- News Text -->
  38.                             <img alt="VERY NICE FLAT AT CHOICE GARDENS,TOC-H ROAD" src=" style="top: 207px; height: 47px; left: 500px; width: 110px;">
  39.                     <br><b>Category: </b><%=list_full_detail_real_estate.get(j).getCategory() %>
  40.                     <br><b>Sub Category: </b><%=list_full_detail_real_estate.get(j).getSubcategory()%>
  41.  
  42.                     <br><b>Type of property: </b><%=list_full_detail_real_estate.get(j).getType() %>
  43.                     <br><b>Price: </b><%=list_full_detail_real_estate.get(j).getBudget() %>
  44.                     <br><b>Area of property: </b><%=list_full_detail_real_estate.get(j).getArea() %>
  45.                     <br><b>No. of rooms: </b><%=list_full_detail_real_estate.get(j).getNoofrooms() %>
  46.                     <br><b>Ownership type: </b><%=list_full_detail_real_estate.get(j).getOwnership() %>
  47.  
  48.  
  49.             <br><b>Name: </b><%=list_full_detail_real_estate.get(j).getUsername() %>
  50.             <br><b>City : </b><%= list_full_detail_real_estate.get(j).getLocation()%><br>
  51.             <b>Sub Location : </b><%=list_full_detail_real_estate.get(j).getSublocation()%>
  52.                 <p>
  53.             Description : <%=list_full_detail_real_estate.get(j).getDescription()%>                 </p>
  54.  
  55.                 <br />
  56.  
  57.                 </div>
refineresult.js

Expand|Select|Wrap|Line Numbers
  1. var xmlHttp
  2.  
  3. function frombudget(str)
  4. {
  5. xmlHttp=GetXmlHttpObject();
  6. if (xmlHttp==null)
  7.   {
  8.   alert ("Your browser does not support AJAX!");
  9.   return;
  10.   }
  11. var frombudget = document.getElementById("frombudgetreal").value;
  12. var tobudget = document.getElementById("tobudgetreal").value;
  13.  
  14. //var category_id = document.getElementById("category_id");
  15.  
  16.     // get selected continent from dropdown list
  17.   //  var selectedContinent = category_id.options[category_id.selectedIndex].value;
  18.     var param = "frombudget=" + frombudget +"&tobudget="+tobudget;
  19.     // url of page that will send xml data back to client browser
  20.     var requestUrl;
  21.     // use the following line if using asp
  22.     requestUrl = "refinerealestateresults.jsp?" + param
  23.  
  24. xmlHttp.onreadystatechange=stateChanged;
  25. xmlHttp.open("GET",requestUrl,true);
  26. xmlHttp.send(null);
  27. }
  28.  
  29. function stateChanged()
  30. {
  31. if (xmlHttp.readyState==4)
  32. {
  33. document.getElementById("results").innerHTML=xmlHttp.responseText;
  34. }
  35. }
  36.  
  37. function GetXmlHttpObject()
  38. {
  39. var xmlHttp=null;
  40. try
  41.   {
  42.   // Firefox, Opera 8.0+, Safari
  43.   xmlHttp=new XMLHttpRequest();
  44.   }
  45. catch (e)
  46.   {
  47.   // Internet Explorer
  48.   try
  49.     {
  50.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  51.     }
  52.   catch (e)
  53.     {
  54.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  55.     }
  56.   }
  57. return xmlHttp;
  58. }
  59.  
refinerealestateresults.jsp - This is the jsp in which i am refining my result list based on certain parameters and again setting it in session. Now ideally i want to get this list back from session in result div in result.jsp(main result page). But i am getting the response of this refinerealestateresults.jsp in div tag of result.jsp. I understand i m getting that because in am adding the response of in div tag by this. document.getElementById("results").innerHTML=xmlHt tp.responseText;
But i don't want to replace the innerHTML of my results div. I just want to my div to get refresh with new refined list.
Expand|Select|Wrap|Line Numbers
  1. refinerealestateresults.jsp
  2. <%@ page language="java" import="java.sql.*,com.project.db.*,java.util.*,com.project.web.*,com.project.vo.*" contentType="text/html; charset=ISO-8859-1"
  3.     pageEncoding="ISO-8859-1"%>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8.  
  9. <script src="refinefilter.js"></script>
  10. </head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  12. <title>Ajax Call Test</title>
  13. <body>
  14. <%
  15.  
  16.     try
  17. {
  18.     String frombudget=request.getParameter("frombudget");
  19.     String tobudget=request.getParameter("tobudget");
  20.  
  21.     out.println("frombudget" + frombudget);
  22.     out.println("tobudget" + tobudget);
  23.  
  24.     List<RealEstateVo> list_full_detail_real_estate = (List)session.getAttribute("list_full_detail_real_estate");
  25.  
  26.     Iterator iterator = list_full_detail_real_estate.iterator();
  27.  
  28.  
  29.     iterator.next();        
  30.     iterator.next();        
  31.     iterator.remove();        
  32.  
  33.     session.setAttribute("new_list_full_detail_real_estate",list_full_detail_real_estate);
  34.  
  35.  
  36. }
  37. catch(Exception e)
  38. {
  39.     out.println("The General Exception: "+e);
  40. } %>
  41.  
  42.  
  43. <br>
  44.  
  45. </body>
  46. </html>
The one solution to my above problem is that i will create same table structure in refinerealestateresults.jsp also so that when i will get response, it will visible to end user with no difference.But that i don't want to do because i need further do pagination and stuff like and this may cause problem there.
I hope you guys understand my problem. Please try to help me out. Thanks in advance.
Feb 7 '11 #1
5 8578
acoder
16,027 Expert Mod 8TB
Either parse the response to only display what you require or change the JSP page to only return data which you can use to populate your lists.
Feb 8 '11 #2
Sir,

Thanks much for replying, I am really stuck in this :(
Tried my best to work this out with the knowledge i had but i am still missing out some where. I am not able to get refined list back to my main result page
Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ page language="java" import="java.sql.*,com.project.db.*,java.util.*,com.project.web.*,com.project.vo.*" contentType="text/html; charset=ISO-8859-1"
  3.     pageEncoding="ISO-8859-1"%>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8.  
  9. <script src="refinefilter.js"></script>
  10.  
  11.         <link href="style.css" rel="stylesheet" type="text/css" media="all" />
  12.  
  13. </head>
  14. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  15. <title>Ajax Call Test</title>
  16. <body>
  17. <%
  18.  
  19.     try
  20. {
  21.     String frombudget=request.getParameter("frombudget");
  22.     int int_frombuget =Integer.parseInt(frombudget);
  23.     String tobudget=request.getParameter("tobudget");
  24.     int int_tobuget =Integer.parseInt(tobudget);
  25.  
  26.  
  27.     out.println("frombudget" + frombudget);
  28.     out.println("tobudget" + tobudget);
  29.  
  30.     List<RealEstateVo> list_full_detail_real_estate = (List)session.getAttribute("list_full_detail_real_estate");
  31.     List<RealEstateVo> refined_list_full_detail_real_estate    = new ArrayList();
  32.  
  33.    out.println("size of old list" + list_full_detail_real_estate.size());
  34.    int size1 =  list_full_detail_real_estate.size();
  35.  
  36.    for(int j = 0;j<size1;j++){
  37.        if(Integer.parseInt((list_full_detail_real_estate.get(j).getBudget()))>int_frombuget && Integer.parseInt((list_full_detail_real_estate.get(j).getBudget()))<int_tobuget){
  38.            refined_list_full_detail_real_estate.add(list_full_detail_real_estate.get(j));
  39.  
  40.        }
  41.  
  42.    }
  43.    out.println("size of refined list" + refined_list_full_detail_real_estate.size());
  44.  
  45.     session.setAttribute("list_full_detail_real_estate",refined_list_full_detail_real_estate);
  46.  
  47. %>
  48.  
  49.  
  50.  
  51.  
  52. <%
  53.  
  54. }
  55. catch(Exception e)
  56. {
  57.     out.println("The General Exception: "+e);
  58. } %>
  59.  
  60.  
  61. <br>
  62.  
  63. </body>
  64. </html>
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
My requirement to get this list_full_detail_real_estate list back when div of my page got refreshed.I will too keep on try this.In the mean time Sir if u got some time, please provide me with more inputs.
Feb 8 '11 #3
acoder
16,027 Expert Mod 8TB
What do you want to do with this list? Your JSP code doesn't seem to output much. Remember that thinking in terms of JavaScript/Ajax, you'll need to output something in your JSP that JavaScript can play with - it won't be able to work with JSP sessions.

Perhaps it may help if you show what the "results" div currently has and what you expect it to be refreshed with.
Feb 10 '11 #4
Thanks much sir for replying.....
The problem is like this - When my search results page loads first time, I iterate the list(Search Result Object) and displays the results in resultsdiv.As i need to do refine search on this list, i have used ajax on change event on price slider which passes these parameters to my js file and then to JSP file something like this
Expand|Select|Wrap|Line Numbers
  1. requestUrl = "refinerealestateresults.jsp?" + param
  2.  
  3. xmlHttp.onreadystatechange=stateChanged;
  4. xmlHttp.open("GET",requestUrl,true);
complete refineresult.js is mentioned in my first post.

As u see above i passed those parameters to refinerealestateresults.jsp where i am reverting my full list(Intial Search Result Obejct) and doing some operations on it based on the parameters i have changed in main search result page.
After refining the list i am again setting this list back in session so that when my results div tag on Original search result page got refreshed.Since at this point of time i have the list which is subset of my original list It will only displays the contents of refined list.


My div tag is as follow
Expand|Select|Wrap|Line Numbers
  1. <div id ="results" style="position: absolute; left: 10px;  width: 540px; z-index: 24;"><%
  2.  
  3. out.print("category_id is " + session.getAttribute("categoryId"));
  4. if(session.getAttribute("list_full_detail_real_estate")!=null){
  5. List<RealEstateVo> list_full_detail_real_estate = (List)session.getAttribute("list_full_detail_real_estate");
  6. int size =  list_full_detail_real_estate.size();
  7. %><%
  8. for(int j = 0;j<size;j++){
  9. %>
  10.  
  11.         <!-- Start of News Box 4 -->
  12.  
  13.             <div class="newsbox">
  14.  
  15.                 <div class="newsbox_header">
  16.  
  17.                 <!-- News Title -->
  18.                 Summary :&nbsp;<a href="detailsummary.do?summary_id=<%=list_full_detail_real_estate.get(j).getSummaryid()%>" style='color:#009900; font-size:18px;' title = ''><%=list_full_detail_real_estate.get(j).getSummary()%><br></a>
  19.  
  20.  
  21.                 <!-- News Date -->
  22.                 <strong>Date : <%=list_full_detail_real_estate.get(j).getDate()%></strong>
  23.  
  24.                 <div class="clearthis">&nbsp;</div>
  25.                 </div>
  26.  
  27.  
  28.                 <div class="newsbox_content">
  29. <%String swapvalue = list_full_detail_real_estate.get(j).getSwap();
  30.  
  31.             if(swapvalue!=null){ %><br><%}%>
  32.                 <!-- News Text -->
  33.                             <img alt="VERY NICE FLAT AT CHOICE GARDENS,TOC-H ROAD" src="" style="top: 207px; height: 47px; left: 500px; width: 110px;">
  34.                     <br><b>Category: </b><%=list_full_detail_real_estate.get(j).getCategory() %>
  35.                     <br><b>Sub Category: </b><%=list_full_detail_real_estate.get(j).getSubcategory()%>
  36.  
  37.                     <br><b>Type of property: </b><%=list_full_detail_real_estate.get(j).getType() %>
  38.                     <br><b>Price: </b><%=list_full_detail_real_estate.get(j).getBudget() %>
  39.                     <br><b>Area of property: </b><%=list_full_detail_real_estate.get(j).getArea() %>
  40.                     <br><b>No. of rooms: </b><%=list_full_detail_real_estate.get(j).getNoofrooms() %>
  41.                     <br><b>Ownership type: </b><%=list_full_detail_real_estate.get(j).getOwnership() %>
  42.  
  43.  
  44.             <br><b>Name: </b><%=list_full_detail_real_estate.get(j).getUsername() %>
  45.             <br><b>City : </b><%= list_full_detail_real_estate.get(j).getLocation()%><br>
  46.             <b>Sub Location : </b><%=list_full_detail_real_estate.get(j).getSublocation()%>
  47.                 <p>
  48.             Description : <%=list_full_detail_real_estate.get(j).getDescription()%>                 </p>
  49.  
  50.                 <br />
  51.  
  52.                 </div>
  53.  
  54.             </div>
  55.  
  56.             <!-- End of News Box 4 -->
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.     <%
  65.     }
  66.     }%>
  67.  
  68.  
  69. </div>
  70.  
Feb 10 '11 #5
acoder
16,027 Expert Mod 8TB
So if I'm following correctly, you're getting a refined list when in fact you want the whole list displayed? That doesn't seem to make sense.

Anyway, you have to understand that once the page had loaded, JSP has finished. When you use Ajax, you only return what you want displayed if you're going to replace the innerHTML. If you don't want to make changes to the JSP file for whatever reason, make sure JavaScript can parse the result. JavaScript doesn't know anything about sessions from the server-side. It deals with text, DOM (via a HTML snippet) or XML.
Feb 11 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Grzegorz Smith | last post: by
1 post views Thread by Chaprasi | last post: by
2 posts views Thread by Zeba | last post: by
8 posts views Thread by Harvey Schmidlapp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.