Solved

How can I refresh the part of jsp page using AJAX

Posted on 2009-05-19
35
2,097 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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

733 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