Ag-Grid 9 server side pagination - javascript

I would like to do server side pagination with Ag-Grid, but I can't make next button enabled. I used the same method in a previous project and there it worked well, but with the new grid version it doesn't work.
My grid options look like this:
gridOptions = {
columnDefs: columnDefs,
datasource: datasource,
pagination: true,
paginationPageSize: 8,
rowModelType: 'pagination'
};
And my datasource is this:
datasource = {
rowCount: -1,
getRows: function (params) {
var request = $.ajax({
url: apiUrl,
type: "post",
data: params
});
request.done(function (response, textStatus, jqXHR) {
params.successCallback(response.Values, response.Count);
});
request.fail(function (jqXHR, textStatus, errorThrown) {
params.failCallback();
});
}
};
I debugged my code many times, response.Count is 15 (I even tried to hardcode it, but it didn't help either) right now but I can't navigate to the 2nd page.
By the way if I comment out line rowModelType: 'pagination' then even the first page doesn't appear.
I read through the new documentation, but I couldn't find any solution for this.
Ps.: I just tried with version 7.2.2 and there this code works like a charm

Related

Twitter typeahead.js not initializing / working as expected using remote data source

Twitter typeahead not working as expected, when I comment out code in the library I do get a non-styled drop down of suggestions.
jQuery('input#test').typeahead(
{
hint: true,
highlight: true,
limit:25, //still using 5 which is default in the library
minLength: 3
},
{
name: 'customLookup',
source: function(query, result) {
return jQuery.ajax({
url: url, //my dynamic url, returns custom json array that needs to be mapped
data: 'shop_name=' + query + "&limit=25", //custom limit against backend api
dataType: "json",
type: "post",
success: function(data, textStatus, xhr) {
var suggestions = [];
jQuery.map(data.data, function(item){
suggestions.push(item.name + " - " + item.address);
});
result(suggestions); //stepping in, it just skips because syncCalled already = true? Then remove that code and it gives me back a list of 5 that isn't styled...
console.log(suggestions); //has array of strings as expected
},
error: function (request, status, error) {
alert(error);
}
});
}
});
So are there options or updates I've missed capturing when configuring? Using a back end custom data source that needs JSON mapped to an array for typeahead.
Just ended up modifying the library directly and having our own copy, not sure the issue but seems to work fine with that approach and using custom CSS to style.

After jQuery Ajax invocation call , the application Fails to navigate to the ASP.NET MVC view that I want to show

I'm using jquery DataTables to show some tabular data, and I also placed an edit link for each row in said jquery DataTables so that the user can edit data associated with a particular row if needed. ( Also, I have No clue how to use ASP.NET MVC Html helpers within jQuery DataTables so that is why I am using the html link in the following code )
jquery DataTable javascript:
$("#resultCodeTable").dataTable({
"processing": true,
"serverSide": false,
"destroy": shouldDestroy,
"ajax": {
"url": "../Admin/LoadResultCodes",
"type": "GET",
"datatype": "json",
"data": function (data) {
data.actionCodeIDArg = actionCodeIDInQuestion;
}
},
....................................
............................
..............
columnDefs: [
{
{
targets: 1,
searchable: false,
orderable: false,
name: "EditResultCodeInQuestionReasonForArrears",
"data": "ID",
render: function (data, type, full, meta) {
if (type === 'display') {
data = '<a class="editResultCodeInQuestionReasonForArrears" href="javascript:void(0)" data-id="' + full.ID + '">Edit RFAs</a>'
}
return data;
}
},
....................................
............................
..............
Clicking on the aforementioned link will ensure that the point of execution reaches the following jQuery Event Handler method:
jQuery Event handler method/ function Javascript
$('#resultCodeTable').on('click', '.editResultCodeInQuestionReasonForArrears', function () {
console.log(this.value);
navigateToAParticularResultCodeAssociatedReasonForArrearsList($(this).data('id'));
});
The jQuery Ajax call successfully invokes the C# Controller's action because I see the Visual Studio's Debugger's point of execution reach said Controller's action, however, it fail to navigate to the view that I want to show.
jquery / javascript:
function navigateToAParticularResultCodeAssociatedReasonForArrearsList(resultCodeTable_ID) {
console.log(resultCodeTable_ID);
$.ajax({
url: '../Admin/NavigateToAParticularResultCodeAssociatedReasonForArrearsList',
type: 'POST',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: "{'" + "resultCodeTable_IDArg':'" + resultCodeTable_ID + "'}",
cache: false,
}).done(function (response, status, jqxhr) {
})
.fail(function (jqxhr, status, error) {
// this is the ""error"" callback
});
}
C#: ( in my AdminController.cs )
public ActionResult NavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
{
AParticularResultCodeAssociatedReasonForArrearsListViewModel aParticularResultCodeAssociatedReasonForArrearsListViewModel = new AParticularResultCodeAssociatedReasonForArrearsListViewModel();
aParticularResultCodeAssociatedReasonForArrearsListViewModel.ResultCodeTable_ID = resultCodeTable_IDArg;
return View("~/Areas/Admin/Views/Admin/AdminModules/Auxiliaries/AParticularResultCodeAssociatedReasonForArrearsList.cshtml", aParticularResultCodeAssociatedReasonForArrearsListViewModel);
}
Razor / Html: (In my \Areas\Admin\Views\Admin\AdminModules\Auxiliaries\AParticularResultCodeAssociatedReasonForArrearsList.cshtml view )
#model Trilogy.Areas.Admin.ViewModels.Auxiliaries.AParticularResultCodeAssociatedReasonForArrearsListViewModel
#{
ViewBag.Title = "AParticularResultCodeAssociatedReasonForArrearsList";
}
<h2>AParticularResultCodeAssociatedReasonForArrearsList</h2>
Could someone please tell me how I can change the code so that the view shows up after the jquery Ajax invocation?
May be on .done function you will get the view in the response, you need to take that response and bind it to your control
You call the controller via AJAX, and sure it hits the controller action method, and the controller returns a view but this is your code that deals with whatever is returned from the AJAX call (from the controller):
.done(function (response, status, jqxhr) {})
You are doing absolutely nothing, so why would it navigate anywhere.
A better question you need to ask yourself, instead of fixing this, is why would you use AJAX and then navigate to another page. If you are navigating to a whole new page, new URL, then simply submit a form regularly (without AJAX) or do it via a link (which the user will click). Use AJAX post if you want to stay on the same page and refresh the page's contents.
#yas-ikeda , #codingyoshi , #code-first Thank you for your suggestions.
Here are the modifications that I had to make to resolve the problem(please feel free to suggest improvements):
Basically, I had to end up creating 2 separate Action methods to resolve the problem.
In the jquery/Javascript code below, it is important to note the first action method '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList'
function navigateToAParticularResultCodeAssociatedReasonForArrearsList(resultCodeTable_ID) {
console.log(resultCodeTable_ID);
$.ajax({
url: '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList',
type: 'POST',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: "{'" + "resultCodeTable_IDArg':'" + resultCodeTable_ID + "'}",
cache: false,
}).done(function (response, status, jqxhr) {
window.location.href = response.Url;
})
.fail(function (jqxhr, status, error) {
// this is the ""error"" callback
});
}
The purpose of the 1st action method called '../Admin/RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList' is to retrieve a url within a Json object.
[HttpPost]
public ActionResult RedirectToNavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
{
var redirectUrl = new UrlHelper(Request.RequestContext).Action("NavigateToAParticularResultCodeAssociatedReasonForArrearsList", "Admin", new { resultCodeTable_IDArg = resultCodeTable_IDArg });
return Json(new { Url = redirectUrl });
}
The purpose of the 2nd action method is to ultimately navigate to the ASP.NET MVC View that I want to show.
public ActionResult NavigateToAParticularResultCodeAssociatedReasonForArrearsList(int resultCodeTable_IDArg)
{
AParticularResultCodeAssociatedReasonForArrearsListViewModel aParticularResultCodeAssociatedReasonForArrearsListViewModel = new AParticularResultCodeAssociatedReasonForArrearsListViewModel();
aParticularResultCodeAssociatedReasonForArrearsListViewModel.ResultCodeTable_ID = resultCodeTable_IDArg;
aParticularResultCodeAssociatedReasonForArrearsListViewModel.RFACodeList = actionCodeResultCodeBusinessService.GetSpecificResultCodeRFACodeList(resultCodeTable_IDArg);
return View("~/Areas/Admin/Views/Admin/AdminModules/Auxiliaries/AParticularResultCodeAssociatedReasonForArrearsList.cshtml", aParticularResultCodeAssociatedReasonForArrearsListViewModel);
}
However, I Dislike the fact that I have to use 2 action methods to navigate to the desired asp.net mvc view, therefore, please feel free to suggest improvements or even a totally different better solution.

Maplacejs is duplicating controls when updated

I am using a jQuery plugin called Maplacejs (https://maplacejs.com/) to make Google Maps manipulation easier for me (I am new with this subject).
I first create a variable to set (initialize) Maplace:
var maplace = new Maplace({
map_div: '#mappanel',
controls_type: 'dropdown',
controls_title: 'Select a point:',
controls_position: google.maps.ControlPosition.TOP_LEFT
});
Then I create a function to load the locations in Maplace using ajax, when a certain date is selected in a dropdown menu:
function loadMap() {
$.ajax({
url: 'includes/ajax_getmap.php',
type: 'POST',
cache: false,
timeout: 5000,
data: { date: $('#dateselect').val() },
dataType: 'json',
success: function(data) {
maplace.SetLocations(data.locations, true);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown)
}
});
}
Here is an example of the locations array loaded with ajax:
{"locations":[
{"lat":52.1,"lon":11.3,"title":"Title 1","html":"<h3>Content 1</h3>","zoom":8},
{"lat":51.2,"lon":22.2,"title":"Title 2","html":"<h3>Content 2</h3>","zoom":8},
{"lat":49.4,"lon":35.9,"title":"Title 3","html":"<h3>Content 3</h3>","zoom":8},
{"lat":47.8,"lon":15.6,"title":"Title 4","html":"<h3>Content D2</h3>","zoom":8}
]}
And here is the code used to "call" the function (list of dates):
$('#dateselect').selectmenu({
style: 'dropdown',
change: function(event, data) {
loadMap();
}
});
The problem is: everytime this function is called, controls get duplicated in the map. Here is an example image after I call the function 3 times:
I already tried to create the maplace variable inside the ajax "sucess" event, and even set the variable to "null" or "undefined", but without sucess :(
Please, can you help me?
For whom have the same problem, it was an issue and was fixed by latest version 0.2.8 (March 2017). Download last version here.

Error with javascript 500 Internal Server Error

I am getting this error when I look at the javascript console
POST (url of website) GetUserPass 500 (Internal Server Error).
A popup also says that there is an unexpected token >
I am guessing that these two things are related so does anyone know anything about them or have they seen this before?
Here is the javascript code. The project is built in visual studio 2013.
<script type="text/javascript" src="../assets/plugins/data-tables/jquery.dataTables.datesorting.js"></script>
<script type="text/javascript">
var mvData = null;
var mvTable;
function GetDataSuccess(data, textStatus, XMLHttpRequest) {
$("#divMessage").html("").hide();
$("#userPassTable").show();
mvData = data.d;
mvTable.fnClearTable();
mvTable.fnAddData(data.d);
}
function GetDataError(XMLHttpRequest, textStatus, errorThrown) {
try {
var obj = jQuery.parseJSON(XMLHttpRequest.responseText);
$("#divMessage").html("An error occured: " + obj.Message + "<br>Exception Type: " + obj.ExceptionType).show();
}
catch (ex) { alert(ex.message); }
}
function logBodyOnLoad() {
$.ajax({
type: "POST",
url: "UserPass.aspx/GetUserPass",
data: JSON.stringify({}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: GetDataSuccess,
error: GetDataError
});
mvTable = $('#userPassTable').dataTable(
{
"fnDrawCallback": function (oSettings) {
/* Need to redo the counters if filtered or sorted */
// if (oSettings.bSorted || oSettings.bFiltered) {
// for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
// $('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
// }
// }
},
"aoColumns":
[
{ "sTitle": "Vendor", sClass: "left_align" },
{ "sTitle": "Username", sClass: "left_align" },
{ "sTitle": "Password", sClass: "left_align" }
],
"iDisplayLength": 1000,
"aaData": [["", "", ""]],
bPaginate: false,
bFilter: true,
bSort: false,
bJQueryUI: true,
bAutoWidth: false
});
}
$(document).ready(logBodyOnLoad);
</script>
I am wondering if the "....aspx/GetUserPass" the slashed portion is causing this problem - sure it should not be a query string value?
This is a server-side error, which means you need to check your error logs on the server to see what is going on. If you don't have logging enabled (recommend ELMAH, very easy to plug in via NuGet) then two ways you can see what is going on:
1 - If you don't have additional data you are posting to the page, then the easiest is to just browse to the page by itself, localhost:xxx/UserPass.aspx/GetUserPass
2 - If you do have unique data you are posting and need to see the results with that specific data, then use Chrome - open the debugger tools (F12) take a look at the Network tab and it will show the request to the server, select it and click the "response" tab to see the detail it spits out. Should be the ASP.NET error HTML when you can parse through and hopefully help figure out what is going on.
Hope this helps get you further down the road!

jqGrid: Load JSON data after local data already in table

I have a very specific problem: I have a small form with four options. You may fill them out or not, and when you click 'Ok', I load a jqGrid with data depending on those options. But since I do not know what my columns look like, I let my servlet generate the column model and column name; thus I have to make an AJAX request to load the data and then fill it in jqGrid as "local" data. I would like to use pagination though.
Thus my question: How may I load more data into a jqGrid after it is already established through local data?
here's the code:
$.ajax({
type : 'GET',
url : 'data.jsp',
data : reqData,
dataType : 'json',
error: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
success : function(result) {
jQuery("#results").jqGrid({
data : result.rows,
datatype : "local",
colNames : result.columnNames,
colModel : result.columnModel,
pager : $('#pager'),
rowNum : 1000,
scroll : true,
viewrecords : true,
sortname : 'TITEL',
width : window.innerWidth - 30,
height : window.innerHeight - 190,
altRows : true,
loadError: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
loadComplete: function() {
$("#ajax-loader").css("display", "none");
}
}).jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: false,
search: true,
refresh: false
}).jqGrid("gridResize");
}
});
/edit: I've tried to do the following, but that still doesn't solve the problem that the grid doesn't know how many total pages there actually are (actually, at that point, I don't even know), and also, after loading, it thinks it only gets local data. Is there maybe an onScroll event or something? I haven't found one.
datatype : !json ? "local" : function(postdata) {
$.ajax({
type: 'GET',
url: 'data.jsp',
data: $.merge(postdata, reqData),
dataType: 'json',
success: function(data, status, jqXHR) {
var mygrid = jQuery("#results")[0];
var myjsongrid = eval("("+jqXHR.responseText+")");
mygrid.addJSONData(myjsongrid);
}
});
},
Can you not do something like this...get the grid, clear the data, define the url to get the data from (it may change depending on what option your user selected) and then change the dataformat to json instead of local.
var grid = $('#TargetGridID');
grid.clearGridData();
grid.setGridParam({ url: '../controller/action?datatype=Option1' });
grid.setGridParam({ datatype: 'json' });
grid.trigger('reloadGrid');
We use this methodology and it works great...use this with stored procedures capable of paging and the grids are blazing fast! I know a 20,000 row grid takes us roughly 700ms with a page count of 500 rows.
If you are using SQL for your data I can upload a sample on how to support paging in a SQL Stored Proc, very useful stuff.

Categories