?
Solved

How can I refresh the part of jsp page using AJAX

Posted on 2009-05-19
35
Medium Priority
?
2,110 Views
Last Modified: 2012-05-07
My jsp application is to display the dashboard , it has 4 units in page each unit has one drop down box to change the graph type.
When I am trying change the graph type for first unit the entire page is getting refreshed, as I am calling the JS function on
onchange function and submiting the page with the new value.
I found some where that using AJAX we can refresh the part of page and the values will come in request.
Iam new to AJAX , please provide ajax code which I can use in my JSP:

here is my jsp:BasicChart.jsp
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import=" java.io.*" %>
<%@ page import ="oracle.jdbc.OracleTypes" %>
<%@ page import ="oracle.sql.CLOB" %>
<%@ page import ="java.text.*" %>
<%@ page import="oracle.apps.fnd.sso.*" %>
<%@ page import ="javax.servlet.RequestDispatcher" %>
<%String dbName="";%>
<SCRIPT LANGUAGE="JavaScript"> 
 
   function chartGrpFun(){
    window.document.frm.action="/OA_HTML/eisrs/jsp/dashboard/BasicChart.jsp";
    window.document.frm.method="post";
    window.document.frm.submit();
 	}
</script>
 
...code for displaying the units
 
<SELECT NAME="<%=chartId%>" onchange=chartGrpFun('') >
<option value="Select Graph" selected>Select Graph</option>
<option value="Column3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Column3D")){%> selected <%}%>>Single Series Column 3D</option>
<option value="Pie3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Pie3D")){%> selected <%}%>>Single Series Pie 3D</option>
<option value="Line" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Line")){%> selected <%}%>>Single Series Line 2D</option>
<option value="Area2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Area2D")){%> selected <%}%>>Single Series Area 2D</option>
<option value="Bar2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Bar2D")){%> selected <%}%>>Single Series Bar 2D</option>
<option value="Doughnut3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Doughnut3D")){%> selected <%}%>>Single Series Doughnut 3D</option>
</SELECT>
<%
String selectedGraphname=request.getParameter(chartId);
 
try{
if(selectedGraphname!=null && !selectedGraphname.equals("Select Graph")){
       
          par1=par.substring(0,par.length()-2)+"chartSWF="+cPath+selectedGraphname+".swf"+"&chartId="+chartId+"&debugMode=false"+"&strURL="+fPath;
        }
        String jspURL="FCHTMLRenderer.jsp"+par1; 
        %><jsp:include page="<%=jspURL%>" flush="true"></jsp:include><%
      }catch(Exception e){
        out.println("exception in chart rendering "+e);
}
-----

Open in new window

0
Comment
Question by:ramadevimandala
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 19
  • 16
35 Comments
 
LVL 12

Expert Comment

by:Gibu George
ID: 24421240
This is not th way to use ajax, what you are doing is posting the form. You need to uses xmlhttp object to do this.
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24421253
See the simple example on how to use ajax with jsp

http://www.ics.uci.edu/~cs122b/projects/project5/AJAX-JSPExample.html
0
 

Author Comment

by:ramadevimandala
ID: 24421262
yup currently I am not using Ajax, could you tell me how to use xmlhttp object ?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 12

Expert Comment

by:Gibu George
ID: 24421364
see the example given
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24421371
If you have any doubt please revert back
0
 

Author Comment

by:ramadevimandala
ID: 24421897
I am notable to apply this example code to my scenario
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24422084
What you need to do is instead of including the the FCHTMLRenderer.jsp you need to get the output html generated by the FCHTMLRenderer.jsp and put it in a div in the palce of the included jsp.

0
 
LVL 12

Accepted Solution

by:
Gibu George earned 2000 total points
ID: 24422139
Roughly the code will look similar to this, but you need to modify it
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import=" java.io.*" %>
<%@ page import ="oracle.jdbc.OracleTypes" %>
<%@ page import ="oracle.sql.CLOB" %>
<%@ page import ="java.text.*" %>
<%@ page import="oracle.apps.fnd.sso.*" %>
<%@ page import ="javax.servlet.RequestDispatcher" %>
<%String dbName="";%>
<SCRIPT LANGUAGE="JavaScript"> 
 
var http = getHTTPObject(); // We create the XMLHTTPRequest Object 
   function chartGrpFun(){
    window.document.frm.action="/OA_HTML/eisrs/jsp/dashboard/BasicChart.jsp";
    window.document.frm.method="post";
    window.document.frm.submit();
}
 
function getHTTPObject() {
	var xmlhttp;
 
	if (window.XMLHttpRequest) {
	     xmlhttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}	 
 
	return xmlhttp;
}
 
function handleHttpResponse() {
    if (http.readyState == 4) {
        if (http.status == 200) {
            var message = http.responseText;
            document.getElementById('chartArea').innerHTML= message;
            
        } else {
            alert ( "Not able to retrieve name" );
        }
    }    
}
 
function chartGrpFun(chartId) {
    var url="/OA_HTML/eisrs/jsp/dashboard/FCHTMLRenderer.jsp";
	var params="?chartSWF="+chartId+".swf&chartId="+chartId+"&debugMode=false";
    http.open("GET", url+params, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
}
</script>
 
...code for displaying the units
 
<SELECT NAME="<%=chartId%>" onchange=chartGrpFun('') >
<option value="Select Graph" selected>Select Graph</option>
<option value="Column3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Column3D")){%> selected <%}%>>Single Series Column 3D</option>
<option value="Pie3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Pie3D")){%> selected <%}%>>Single Series Pie 3D</option>
<option value="Line" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Line")){%> selected <%}%>>Single Series Line 2D</option>
<option value="Area2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Area2D")){%> selected <%}%>>Single Series Area 2D</option>
<option value="Bar2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Bar2D")){%> selected <%}%>>Single Series Bar 2D</option>
<option value="Doughnut3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Doughnut3D")){%> selected <%}%>>Single Series Doughnut 3D</option>
</SELECT>
 
<div id ="chartArea">
</div>

Open in new window

0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24422149
in the FCHTMLRenderer.jsp you need to build the html string using a stringbuilder or buffer and you need to set it to the response
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24422167
since it is a jsp the output html will be send to the response so I think it will be available when response comes back
0
 

Author Comment

by:ramadevimandala
ID: 24439692
in chart area do you want me to get the html output from FCHTMLRenderer and display the html?
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24439766
You need to get the HTMl output of what you want to show(in this case chart).
0
 

Author Comment

by:ramadevimandala
ID: 24439769
currently I am including the FCHTMLRenderer  jsp and passing the parameters to it, if it is not included here how can i call the jsp and pass the parameters?
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24439773
see the sample code which I have given, you need to add additional parameters if any
var url="/OA_HTML/eisrs/jsp/dashboard/FCHTMLRenderer.jsp";
        var params="?chartSWF="+chartId+".swf&chartId="+chartId+"&debugMode=false";
    http.open("GET", url+params, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);

Open in new window

0
 

Author Comment

by:ramadevimandala
ID: 24439807
hmm yup I got your answer but if I have included the above code in JS first time how can I call the JS function in jsp, second time whenever the graph type changes the graph will be changed by calling the page to render the graph.
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24439872
You call it in the onChange event of the dropdown
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24439875
for the first time call it in the body onLoad event
0
 

Author Comment

by:ramadevimandala
ID: 24440949
I am getting http.readystate as 1 in handleHttpResponse method
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24441003
readyState - the code successively changes value from 0 to 4 that means for "ready". wait till it changes to 4
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24441010
also don't put alerts for the readystate or status
0
 

Author Comment

by:ramadevimandala
ID: 24441019
it is not getting changed getting script error : Unspecified Error
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24441039
is there any error on server side?
0
 

Author Comment

by:ramadevimandala
ID: 24441158
no error
0
 

Author Comment

by:ramadevimandala
ID: 24441516
here is my jsp code

<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import=" java.io.*" %>
<%@ page import ="oracle.jdbc.OracleTypes" %>
<%@ page import ="oracle.sql.CLOB" %>
<%@ page import ="java.text.*" %>
<%@ page import="oracle.apps.fnd.sso.*" %>
<%@ page import ="javax.servlet.RequestDispatcher" %>
<%String dbName="";%>
<HTML>
<HEAD>
<link href="/OA_HTML/eisrs/jsp/js/sortabletable.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/OA_HTML/eisrs/jsp/js/string_functions.js"></script>
<SCRIPT LANGUAGE="Javascript" SRC="/OA_HTML/eisrs/jsp/dashboard/FC/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var http = getHTTPObject(); // We create the XMLHTTPRequest Object 
 
function getHTTPObject() {
        var xmlhttp;
 
        if (window.XMLHttpRequest) {
             xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }        
 
        return xmlhttp;
}
 
function handleHttpResponse(chartId3) {
alert('in handleHttpResponse');
alert(http.readyState);
alert(http.status);
 alert(http.responseText);
    if (http.readyState == 4) {
        if (http.status == 200) {
        alert(http.responseText);
            var message = http.responseText;
            alert('before getElementById'+message);
            document.getElementById(chartId3).innerHTML= message;
            alert('after getElementById');
            
        } else {
            alert ( "Not able to retrieve name" );
        }
    }    
}
 
function chartGrpFun(chartId2) {
alert(chartId2);
    var url="/OA_HTML/eisrs/jsp/dashboard/FCHTMLRenderer.jsp";
    var params="?chartSWF="+chartId2+".swf&chartId="+chartId2+"&debugMode=false";
    http.open("GET", url+params, true);
     //http.open("GET", url, true);
    http.onreadystatechange = handleHttpResponse(chartId2);
    http.send(null);
}
 
</SCRIPT>
<link rel="stylesheet" charset="UTF-8" type="text/css" href="/OA_HTML/eisrs/jsp/js/eis-desktop-custom-windows.css">
 
</HEAD>
<BODY>
 
<%
//commented code.......
	  String chartId="chart_"+dbUnitId;
      String cPath= "/OA_HTML/eisrs/jsp/dashboard/FC/";
%>
<td width=16% >&nbsp;</td>
<td width="<%=width%>" ><h1 class="x18"><u><%=caption%></u></h1>
<BR>
<div id=<%=chartId%>> 
<%if(graphCat.equalsIgnoreCase("Single series graph")){// && dbUnitIdStr.length()==0){%>
<SELECT NAME="<%=chartId%>" onchange=chartGrpFun('<%=chartId%>') >
<option value="Select Graph" selected>Select Graph</option>
<option value="Column3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Column3D")){%> selected <%}%>>Single Series Column 3D</option>
<option value="Pie3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Pie3D")){%> selected <%}%>>Single Series Pie 3D</option>
<option value="Line" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Line")){%> selected <%}%>>Single Series Line 2D</option>
<option value="Area2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Area2D")){%> selected <%}%>>Single Series Area 2D</option>
<option value="Bar2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Bar2D")){%> selected <%}%>>Single Series Bar 2D</option>
<option value="Doughnut3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("Doughnut3D")){%> selected <%}%>>Single Series Doughnut 3D</option>
</SELECT>
<%} //end if
else if(graphCat.equalsIgnoreCase("Multi series graph")){%>
<SELECT NAME="<%=chartId%>" onchange=chartGrpFun('<%=chartId%>') >
<option value="Select Graph" selected>Select Graph</option>
<option value="MSColumn3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("MSColumn3D")){%> selected <%}%> >Multi Series Column 3D</option>
<option value="MSLine" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("MSLine")){%> selected <%}%>>Multi Series Line 2D</option>
<option value="MSArea" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("MSArea")){%> selected <%}%>>Multi Series Area 2D</option>
<option value="MSBar3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("MSBar3D")){%> selected <%}%>>Multi Series Bar 3D</option>
<option value="StackedColumn3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("StackedColumn3D")){%> selected <%}%>>Stacked Column 3D</option>
<option value="StackedBar3D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("StackedBar3D")){%> selected <%}%>>Stacked Bar 3D</option>
<option value="StackedArea2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("StackedArea2D")){%> selected <%}%>>Stacked Area 2D</option>
<option value="ScrollColumn2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("ScrollColumn2D")){%> selected <%}%>>Scroll Column 2D</option>
<option value="ScrollLine2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("ScrollLine2D")){%> selected <%}%>>Scroll Line 2D</option>
<option value="ScrollArea2D" <% if(request.getParameter(chartId)!=null) if(request.getParameter(chartId).equals("ScrollArea2D")){%> selected <%}%>>Scroll Area</option>
</SELECT>
 
<%} //end else%>
 
<BR>
<BR>
 <%   try{
        String selectedGraphname=request.getParameter(chartId);
        fPath="/OA_HTML/eisrs/jsp/dashboard/XMLData/"+xmlFileName;
        
        if(par!=null)
          par1=par.substring(0,par.length()-2)+"chartSWF="+cPath+graphName+".swf"+"&chartId="+chartId+"&debugMode=false"+"&registerWithJS=1"+"&strURL="+fPath;
        if(selectedGraphname!=null && !selectedGraphname.equals("Select Graph")){
              par1=par.substring(0,par.length()-2)+"chartSWF="+cPath+selectedGraphname+".swf"+"&chartId="+chartId+"&debugMode=false"+"&registerWithJS=1"+"&strURL="+fPath;
        }
       
        String jspURL="FCHTMLRenderer.jsp"+par1; 
        %><jsp:include page="<%=jspURL%>"></jsp:include>
        </span>
 
    <BR>
    <BR>
    </td>
 
</table>
</form>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:ramadevimandala
ID: 24441524
please suggest the solution asap
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24441624
Where is the element chartId3?
0
 

Author Comment

by:ramadevimandala
ID: 24441644
it s same as chartId , just given diffrent name
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24441730
which line does the error come.

also i don't see a div tag in you code

if (http.readyState == 4) {
        if (http.status == 200) {
            var message = http.responseText;
            document.getElementById('chartId3').innerHTML= message;
           
        } else {
            alert ( "Not able to retrieve name" );
        }
    }    
<div id="chartId3"></div>
0
 

Author Comment

by:ramadevimandala
ID: 24441854
<div id=<%=chartId%>>
 is defined in the code before select tag

error line no is 35 but this line no will be different here, i am not able to find exactly where it is in jsp
if i see in view source it is coming at
        } else {
            alert ( "Not able to retrieve name" );
        }
which will not make any sense right?

 I guess it is in document.getElementById('chartId3').innerHTML= message;

 alert(http.readyState); giving value 1, after this alert next alert is not coming and script error comes



0
 

Author Comment

by:ramadevimandala
ID: 24441927
after I remove the  alert(http.readyState); in handleHttpResponse the script error is not coming, as the readtstate is 1 the if condition is failing and nothing happening
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24442057
the ready state changes to for when response comes. There must be something wrong on the server side code debug that
0
 

Author Comment

by:ramadevimandala
ID: 24442167
not getting any exception in the server side, one thing here is I didn't convert the FChtmlrenderer jsp to html response , still including the jsp
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24442193
dont include, it
0
 

Author Comment

by:ramadevimandala
ID: 24442403
getting Type mismatch script error at
 http.onreadystatechange = handleHttpResponse(chartId2);
0
 

Author Comment

by:ramadevimandala
ID: 24450052
I have changed
 http.onreadystatechange = handleHttpResponse(chartId2);
to
http.onreadystatechange = handleHttpResponse
with included jsp only my code is working fine
in script function
function chartGrpFun(divId,par,graph) {
    spanId=divId;
    var url="/OA_HTML/eisrs/jsp/dashboard/FCHTMLRenderer.jsp"+par+"&chartSWF=/OA_HTML/eisrs/jsp/dashboard/FC/"+graph+".swf";
    http.open("GET", url, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
  }

then it graph is getting loaded with new graph..

Thank you very much George for your support
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question