This is my ajax request code. After adding new record my datatable functions sorting,paging,searching is not working for new record. I guess Datatable is not loading new Record
$.ajax({
url : 'RoleServlet',
type: 'POST',
data : {
action:"get"
},
success : function(responseText) {
$('#role-data-table tbody').empty();
for(x in responseText){
$("#role-data").append("<tr><td>"+responseText[x].role+"</td>
</tr>");
}
$('#role-data-table').DataTable();
}
});
Related
I am looking for something like onchange listener for radiobutton in JSP. I am using like this example:
https://www.tutorialspoint.com/springmvc/springmvc_radiobutton.htm
Anyone know how to catch the event of the radiobutton on the controller ??
There does not exist a default way to do this in Spring. Why exactly do you want to do this?
You basically would use an AJAX call to send the data of the selected button to the Rest Controller. Something similar to this pseudo-code.
jQuery(document).ready(function($) {
$("#your-buttons").change(function(event) {
event.preventDefault();
var data = formname.your-buttons.value;
$.ajax({
type : "POST",
contentType : "application/json",
url : "your/api/url",
data : JSON.stringify(data),
dataType : 'json',
success : function(data) {
display(data);
},
error : function(e) {
display(e);
}
});
});
});
Then on your Rest Controller you would simply have to handle it like any other event.
#RequestMapping(value = "/your/api/url", method = RequestMethod.POST)
public String whatever(.....) {
// ...
}
I've been trying to post data to jquery Data Tables but i couldn't. I have a web method in server side which returns data as object array. I need to get data with ajax post. But i can't. So i need some help.
Here is my c# web method:
[WebMethod]
public static object[] Questions()
{
table = new DataTable();
List<object> questionList = new List<object>();
table = RunSelectCommand("SELECT QUESTION_ID,QUESTION_TEXT,QUESTION_GROUP FROM QUESTIONS WHERE QUESTION_ACTIVE='Y'");
for(int i=0 ; i<table.Rows.Count ; i++)
{
questionList.Add(new
{
q_id = table.Rows[i]["QUESTION_ID"].ToString(),
q_text = table.Rows[i]["QUESTION_TEXT"].ToString(),
q_group = table.Rows[i]["QUESTION_GROUP"].ToString()
});
}
return questionList.ToArray();
}
And jquery:
$(document).ready(function () {
$('#questTable').DataTable({
processing: true,
serverSide:true,
ajax: {
url: 'Question.aspx/Questions',
type:'POST'
},
columns: [
{ data: 'q_id' },
{ data: 'q_text' },
{ data: 'q_group' }
]
});
});
But i debuged it with break point and i noticed that web method doesn't work. And here is the error that i get: DataTables warning: table id=questTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
Thanks in advance.
Problem solved. It was about my web method returns object array and data tables doesn't accept it. That's why i got Invalid JSON response. error. So i change my js structure. I post data as usual then i use data tables data property for post. It works:
function GetData()
{
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Question.aspx/Questions',
data: '{}',
success: function (result) {
$('#questTable').DataTable({
data:result.d,
columns: [
{ data: 'q_id' },
{ data: 'q_text' },
{ data: 'q_group' }
]
});}
}
I am new in MVC. I have a DropDown in index view and i want to show entire table basis on selected item from dropdown. I fire ajax on onChange function of dropdown using jQuery.
$(document).ready(function () {
$("#ddlUser").change(function () {
$("#ddl2").empty();
$.ajax({
type: "POST",
url: '#Url.Action("getState")',
dataType: "json",
data: { id: $("#ddlUser").val() },
success: function (city) {
},
error: function (ex) {
alert('failed to retrieve' + ex);
}
})
});
return false;
});
and i get data from database using this code
public JsonResult getState(int id)
{
MvcDemo9Feb.Models.ModelData MD = new Models.ModelData(); //MD is object of model and dt is DataTable type property
MD.dt = obDB.getCity(id);//obDB is class and getCity is method of it that return datatable
return Json(MD);
}
here i don't know how to bind data of model object MD to table on view. Please suggest something
I'm new in jqgrid.
I want to pass multi rows edited in jqgrid to pass MVC server controller.
controller expects json string type of data.
how my jsp pass all rows to controller?
jQuery("#save").click( function(){
alert("enter save fn");
var gridData=jQuery("#gridList").jqGrid('getGridParam','data');
jQuery.ajax({
url : '/uip/web/p2/saveEmployeeList.dev'
,type : 'POST'
,cache : false
,data : JSON.stringify(gridData)
,contentType : 'application/json; charset=utf-8'
,dataType : 'json'
})
});
I print out HttpServletRequest in controller. there is one row exist.
even little clue would be helpful.
If I understand you correctly you want to save all edited rows by one Ajax action instead of a Ajax request after any row is edited?
If so, this might be the solution. Instead of Ajax you use the 'clientArray' option in your configuration as your URL parameter. This causes jqGrid to save every edited row internally in JavaScript and post nothing to your server.
With a onclick on a save button you could do something as follows:
var changedRows = [];
//changedRows is a global array
if($('#save-rows').length) {
$('#save-rows').click(function() {
var postData = {}
$.each(changedRows, function(key) {
postData[key] = $('#paymentsgrid').jqGrid('getRowData', this);
});
$.post(baseUrl + '/controller/action', {
'data' : postData
}, function(response) {
$('<div></div>').html(response.content).dialog({
'title' : 'Message',
'modal' : true,
'width' : 800,
'height' : 400,
'buttons' : {
'OK' : function() {
$(this).dialog('close');
}
}
});
if(response.reload) {
$('#grid').trigger('reloadGrid');
}
}, 'json');
});
}
Also important is to specify a save event in your grid:
$('#paymentsgrid').jqGrid('saveRow', paymentController.lastsel, null, 'clientArray', null, function(rowId) {
changedRows.push(rowId);
});
You might should modify or optimize some things but in the basic, this should work or give you an idea how to accomplish what you want.
I have a GridPanel that is backed by a DataStore (ExtJS 4). OK, so when the user selects a row and clicks a delete button, I send a POST request to the server with the ID of the selected record, delete the record, and then on return, re-load the data store.
The record is deleted successfully, the server returns a status code of OK. But, if the user selects THE LAST ROW of the GridPanel, I get the following error:
Uncaught TypeError: Cannot read property 'id' of undefined
I have no other events on the Grid Panel or DataStore.
Here is my delete code:
function deleteTEDetailExceptions() {
try {
if(tedetailExceptionsEditorGrid.getSelectionModel().selected.length < 1) {
statusMessage("Please select an exception first", true);
return;
}
var record = tedetailExceptionsEditorGrid.getSelectionModel().selected.items[0];
currentTEDetailExceptionKey = record.data["tedetailExceptionKey"];
// send the delete request
Ext.Ajax.request({
url: '/timesheets/action.do',
method: 'POST',
params:{
tedetailExceptionKey : currentTEDetailExceptionKey,
type : "tedetailExceptions",
"delete" : "true"
},
success: function(response) {
if(response.statusText == "OK") {
tedetailExceptionsEditorGrid.getSelectionModel().clearSelections();
TEDetailExceptionsStore.remove(record);
// reload the store
Ext.Function.defer((function(){
TEDetailExceptionsStore.load({
params:{
timeEntryDetailKey : timeEntryDetailKey,
type : "tedetailExceptions"
}
});
}),250);
}
}
});
}
catch(e) {
console.log(e);
}
}
What am I doing wrong?
EDIT
I managed to solve the problem with the following code. It was pretty stupid of me to reload the data store when I didn't need to!!
function deleteTEDetailExceptions() {
try {
if(tedetailExceptionsEditorGrid.getSelectionModel().selected.length < 1) {
statusMessage("Please select an exception first", true);
return;
}
var record = tedetailExceptionsEditorGrid.getSelectionModel().selected.items[0];
tedetailExceptionsEditorGrid.getView().refresh();
currentTEDetailExceptionKey = record.data["tedetailExceptionKey"];
// send the delete request
Ext.Ajax.request({
url: '/timesheets/action.do',
method: 'POST',
params:{
tedetailExceptionKey : currentTEDetailExceptionKey,
type : "tedetailExceptions",
"delete" : "true"
},
success: function(response) {
if(response.statusText == "OK") {
TEDetailExceptionsStore.remove(record);
}
}
});
}
catch(e) {
// console.log(e);
}
}
I'm not sure why you're reloading the data after you've deleted a record. Are you using a paging toolbar as well?
ExtJs obviously thinks that there is a record in the last row and seeing as you're reloading all the data anyways have you tried calling TEDetailExceptionsStore.removeAll() before you reload the data store.
Another possibility might be to refresh the grid view after you remove the record from the store. You can do this with grid.getView().refresh() This might force ExtJS into recognizing that the last row does not contain a record