PDA

View Full Version : Load JSP response of ajax request into <div> on click of some button



amarbhosale
6 Jun 2012, 5:44 AM
Hi,

I want to load the response of the JSP page of ajax request into div tag, when clicked on some button.
Actions are as follows:
1) User clicks on "save button" and one javascript fucntion gets called
2) Within the function, i send Extjs.Ajax.Request to struts 2 action class.
3) The result of action class is JSP page.
4) When successful response come back, I want to update content of existing div of page.

But, I am not getting the desired result. The response of JSP page [content of JSP page is html + javascript] does not get rendered to div. I can see the source of JSP page into "responseText".

Can anyone help on this ?

My JavaScript function is as below:
function nodeClick(nodeName){
alert('Clicked on node: '+nodeName);

// execute ajax request
Ext.Ajax.request({
url: 'forwardToJSPPage.action',
method: 'POST',
scripts:true,
header: 'Accept: text/html',
params: {
nodeList: nodeName
},
success: function(response){
alert('recieved the response from server');
// process server response here
Ext.fly('wanContainer').update(response);
}
});
}

Thanks,
Amar

mitchellsimoens
11 Jun 2012, 6:00 AM
response is a javascript object, response.responseText is the actual response from the server. That is what you should use in the update method.

amarbhosale
11 Jun 2012, 6:08 AM
But, the result returned from the server is using JSP. the JSP itself include another javascript of FormPanel and other javascript too.
I want those included javascript to get executed/evaluated and should display me the FormPanel. But it does not evaluate those included javascript and does not show FormPanel.

I have a JSP content returning the following response:
<%@ page contentType="text/html; charset=UTF-8"%>


<style type="text/css">
#dr,#pw {
margin-bottom: 30px;
}

#fieldset-1020 .x-fieldset {
border: 1px solid #BBBBBB;
display: block;
margin-bottom: 10px;
padding: 0 10px;
}
</style>


<script type="text/javascript" src="${pageContext.request.contextPath}/xyz/abc.js"></script>


<table width="100%" height="300px">
<tr>
<td>
<div id="wanContainer"></div>
</td>
</tr>
</table>

Any help on this will be appreciated.

But if I use below - then it is working fine
Ext.fly('detailsPane').load({url: 'forwardToJSPPage.action?nodeList='+nodeName, scripts:true});

Thanks

pnagboth
13 Jun 2012, 11:16 AM
I am also facing the same problem.

Ext.fly('testPane').load({url: 'test.action?nodeValue=1', scripts:true}); works fine. But below function does not work.

function test(){
// execute ajax request
Ext.Ajax.request({
url: 'test.action',
scripts:true,
params: {
nodeValue: 1
},
success: function(response){
var text = response.responseText;
Ext.fly('testPane').update(text);
}
});
}

Ext.fly('testPane').update(text); is not working. Any help is appreciated.

Thanks!!!