Solved

How can I refresh the part of jsp page using AJAX

Posted on 2009-05-19
35
2,082 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
Comment Utility
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
Comment Utility
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
Comment Utility
yup currently I am not using Ajax, could you tell me how to use xmlhttp object ?
0
 
LVL 12

Expert Comment

by:Gibu George
Comment Utility
see the example given
0
 
LVL 12

Expert Comment

by:Gibu George
Comment Utility
If you have any doubt please revert back
0
 

Author Comment

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

Expert Comment

by:Gibu George
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You need to get the HTMl output of what you want to show(in this case chart).
0
 

Author Comment

by:ramadevimandala
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You call it in the onChange event of the dropdown
0
 
LVL 12

Expert Comment

by:Gibu George
Comment Utility
for the first time call it in the body onLoad event
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

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

Expert Comment

by:Gibu George
Comment Utility
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
Comment Utility
also don't put alerts for the readystate or status
0
 

Author Comment

by:ramadevimandala
Comment Utility
it is not getting changed getting script error : Unspecified Error
0
 
LVL 12

Expert Comment

by:Gibu George
Comment Utility
is there any error on server side?
0
 

Author Comment

by:ramadevimandala
Comment Utility
no error
0
 

Author Comment

by:ramadevimandala
Comment Utility
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
Comment Utility
please suggest the solution asap
0
 
LVL 12

Expert Comment

by:Gibu George
Comment Utility
Where is the element chartId3?
0
 

Author Comment

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

Expert Comment

by:Gibu George
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
dont include, it
0
 

Author Comment

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

Author Comment

by:ramadevimandala
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now