473,323 Members | 1,589 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

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 8751
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

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

Similar topics

1
by: Grzegorz Smith | last post by:
Hi everyone. Does anyone know is it possible to check if ajax call was redirect? i mean I connect by Ajax to one URL but I'm redirected to other url. Is there a way to check that my request was...
1
by: Chaprasi | last post by:
Hi, I was wondering how I can achieve to display a 'Please wait loading...' message only if the ajax call is taking more than a second. The message should only appear if the Ajax call is...
2
by: Ben | last post by:
Hi, One ASP.NET transactional page conducts a long transaction in a button click function. I want to display the transaction progress info in label control without refreshing page. It is...
0
by: ravi | last post by:
Hi, I am getting problem on refreshing page, when i close child window ..here i am not using button to close window just clicking on top of the page above cross singn to close window .
2
by: Zeba | last post by:
Hi guys! I'm new to JS / Ajax; I've been trying to do an Ajax call to my Webservice ( I'm using C# for code-behind). I'm not using any of the libraries available. I am sending my CustID to the...
2
by: shivendravikramsingh | last post by:
hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if...
3
by: wendallsan | last post by:
Hi All, I've stumped myself writing an app that uses Prototype and a bit of PHP. Here is what I have: I have a custom class named Default_county_init_data that, upon initialization makes...
5
RamananKalirajan
by: RamananKalirajan | last post by:
Hi guys, I am having a problem in Prototypejs AJAX, I am triggering the AJAX call and in the option i am using like the folowing code: new Ajax.Request(connection.url, { method:...
8
by: Harvey Schmidlapp | last post by:
I have a fairly complex form (generated by means of an ASP 3 page). The form is used to define a query against a database. After running a query, the user hits their browser's back button and goes...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.