I have following json-data, after an ajax call to struts2 action-class:
{"jsonData":[{"age":1,"name":"Aifa"},{"age":2,"name":"Afraa"},{"age":27,"name":"Zafar"}],"searchId":0,"searchName":""}
function setAjaxOutput() {
if(httpObject.readyState == 4) {
document.getElementById('intValueDiv').innerHTML = httpObject.responseText;
var jsonString = httpObject.responseText;
alert(jsonString);
var jsonString2 = JSON.parse(jsonString);
alert(jsonString2.jsonData[2].name);
}
}
The json data will be in httpObject.responseText.
Now using jqgrid, it looks like, the above code is not required but I could not yet figure out how to make ajax call using jqgrid, recevie json data, and display in table.
I'm trying to display, only jsonData-array, returned from action-class, in grid-format, using jqgrid. The code is below.
[{"age":1,"name":"A"},{"age":2,"name":"Ab"},{"age":3,"name":"abc"}]
I can call click(), but would like to call, 'jQuery("#list2").jqGrid().
Could you please let me know, how am I suppose to make changes, so I could :
1) send ajax request with :
url: 'callAJax.action?start=1&t='+Math.random()+ 'testFlag=1'
Should single quotes be replaced with double quotes? Please let me know.
Also, how do I find, whether divId1 or divId2, is clicked below.
var $target = $(event.target);
if( $target.is("div") ) { // div is tag, how to check for id.
testFlag=1/2;
}
2) And, when json data is displayed in grid, I'd like to add button, to each row, which when clicked, I'd like to, read row data, and do an Ajax call to action-class url.
Please let me know, how can this be achieved.
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX JSP PAGE</title>
<link rel="stylesheet" href="styles/jqx.base.css"
type="text/css" />
<link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxscrollbar.js"></script>
<script type="text/javascript" src="jqxmenu.js"></script>
<script type="text/javascript" src="jqxgrid.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>
<script type="text/javascript">
var start = 0;
var idAndName = "";
var rowId = 0;
var searchId = 0;
var searchName = "";
$(document)
.ready(function () {
alert("document loaded.");
$("#editgrid")
.jqGrid({
url: 'callAJax.action?t=1',
datatype: "json",
myType: 'GET',
colNames: ['name', 'age'],
colModel: [
{
name: 'name',
index: 'name',
width: 80,
editable: true,
editoptions: {
size: 10
}
},
{
name: 'age',
index: 'age',
width: 90,
editable: true,
editoptions: {
size: 25
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "index.jsp"
});
$("#bedata")
.click(function (event) {
alert("Inside click function.");
jQuery("#editgrid")
.jqGrid('getGridParam', 'selrow');
});
});
</script>
</head>
<body>
<center>
<h1>
Use Ajax in Struts2
</h1>
<br/>
<br/>
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
</center>
<br/>
</body>
</html>
Whats is happening, when I run?
Answer:
When I remove $("#editgrid")..jqGrid({}) completely, I see, message 'document loaded'.
When I click button, I see, message 'Inside click function'.
But, when I add partially or completely, the $("#editgrid")..jqGrid({}) block, I only see 'document loaded', but on button click, message 'Inside click function' isn't showing up.
Please let me know, if you would like to have, more information. As always, Thank you!!
