• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2153
  • Last Modified:

How can I refresh the part of jsp page using AJAX

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
ramadevimandala
Asked:
ramadevimandala
  • 19
  • 16
1 Solution
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
See the simple example on how to use ajax with jsp

http://www.ics.uci.edu/~cs122b/projects/project5/AJAX-JSPExample.html
0
 
ramadevimandalaAuthor Commented:
yup currently I am not using Ajax, could you tell me how to use xmlhttp object ?
0
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.

 
Gibu GeorgeChief Technology OfficerCommented:
see the example given
0
 
Gibu GeorgeChief Technology OfficerCommented:
If you have any doubt please revert back
0
 
ramadevimandalaAuthor Commented:
I am notable to apply this example code to my scenario
0
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
ramadevimandalaAuthor Commented:
in chart area do you want me to get the html output from FCHTMLRenderer and display the html?
0
 
Gibu GeorgeChief Technology OfficerCommented:
You need to get the HTMl output of what you want to show(in this case chart).
0
 
ramadevimandalaAuthor Commented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
ramadevimandalaAuthor Commented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
You call it in the onChange event of the dropdown
0
 
Gibu GeorgeChief Technology OfficerCommented:
for the first time call it in the body onLoad event
0
 
ramadevimandalaAuthor Commented:
I am getting http.readystate as 1 in handleHttpResponse method
0
 
Gibu GeorgeChief Technology OfficerCommented:
readyState - the code successively changes value from 0 to 4 that means for "ready". wait till it changes to 4
0
 
Gibu GeorgeChief Technology OfficerCommented:
also don't put alerts for the readystate or status
0
 
ramadevimandalaAuthor Commented:
it is not getting changed getting script error : Unspecified Error
0
 
Gibu GeorgeChief Technology OfficerCommented:
is there any error on server side?
0
 
ramadevimandalaAuthor Commented:
no error
0
 
ramadevimandalaAuthor Commented:
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
 
ramadevimandalaAuthor Commented:
please suggest the solution asap
0
 
Gibu GeorgeChief Technology OfficerCommented:
Where is the element chartId3?
0
 
ramadevimandalaAuthor Commented:
it s same as chartId , just given diffrent name
0
 
Gibu GeorgeChief Technology OfficerCommented:
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
 
ramadevimandalaAuthor Commented:
<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
 
ramadevimandalaAuthor Commented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
the ready state changes to for when response comes. There must be something wrong on the server side code debug that
0
 
ramadevimandalaAuthor Commented:
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
 
Gibu GeorgeChief Technology OfficerCommented:
dont include, it
0
 
ramadevimandalaAuthor Commented:
getting Type mismatch script error at
 http.onreadystatechange = handleHttpResponse(chartId2);
0
 
ramadevimandalaAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 19
  • 16
Tackle projects and never again get stuck behind a technical roadblock.
Join Now