In jqgrid I use this part of code to get all data from my jqgrid table:
var allRowsInGrid = $('#table_outgoing_calls_report').jqGrid('getGridParam','data');
When I console.log allRowsInGrid it shows all data and shows actual length of table data count. But then I try to use this array (allRowsInGrid) it show only data that I see on the screen. Furthermore, if I try to console.log allRowsInGrid.length it shows length of data that I see.
I use json datatype and loadonce: true. Tried everything but nothing works.
This piece of code:
var allRowsInGrid = $('#table_outgoing_calls_report').jqGrid('getGridParam','data');
console.log(allRowsInGrid);
console.log(allRowsInGrid.length);
shows this:
Does anyone know how it can be possible?
The problem is not what you do, but when and where you use 'getGridParam','data'. You can use data after the data are loaded first from the server. You can use there for example inside of loadComplete or inside of beforeProcessing callback. I'd recommend you to read the old answer additionally, which describes the differences between loadComplete and gridComplete. In the most cases gridComplete isn't the good choice.
Moreover, loadComplete will be called not only after the first loading from the server. It will be called later on every local sorting, paging and filtering/searching. If one needs to make some actions once after loading the data from the server then beforeProcessing callback is good. It contains full data returned from the server before the data will be processed by jqGrid. One can for example modify or extend the data inside of beforeProcessing callback and jqGrid will see the modified data as if it was returned so from the server.
One more option - to place some code in loadComplete inside of if ($(this).jqGrid("getGridParam", "datatype") !== "local") { ... }. It allows to do some action after the data loaded from the server have processed and the first page was displayed.
Related
I am making my first app using Parse.com for database storage, and I am using the Parse JavaScript SDK to make use of this database.
I am trying to populate a list of items from one of my database tables, and this table contains a field which is a pointer to an object of another class/table. I need to retrieve a field from this object in order to display the information properly.
However, Parse seems to require me to request each of these objects separately from my main query on the table. Anyway, so I make the request and have a success callback which uses jquery's .html() to set the contents of a div which is id'd by the id of the retreived object.
The problem is, after the work is done, the div is rendered empty. Although, oddly, I tried using calls to alert to get the contents of each div within the success callback, and the contents was not only correct after I had called .html() but also before I called it. Though, that's probably down to JavaScripts asynchronous function calls.
Here is the function in question:
function updateBudgets() {
var Budget = Parse.Object.extend("Budget");
var query = new Parse.Query(Budget);
query.equalTo("User", Parse.User.current());
//query.include(["Budget.Category"]); //I tried this to include the category object with the query response, but it didn't seem to work
query.find({
success: function(result) {
var opt = "<h2>Budgets</h2>";
var category, id;
for(var i = 0; i < result.length; i++) {
category = result[i].get("Category");
category.fetch({
success: function(cat) {
alert($('#' + cat.id).html());
$('#' + cat.id).text(cat.get("Name"));
alert($('#' + cat.id).html());
}
});
opt += makeBudget(category.id, parseFloat(result[i].get("Amount")/100), result[i].get("Balance"), result[i].id);
}
$('#budgets').html(opt);
}
});
}
I tried what the documentation seemed to suggest was the equivalent of an SQL JOIN operation using the .include() function on my query, but it didn't seem to work at all.
So, what I would like to know is either how I can debug my JavaScript such that I can get around this strange behaviour with .html() or how I can properly do this JOIN style operation with Parse. What Documentation I have found doesn't really go into a whole lot of detail.
I would be very grateful for any help.
Please consider the following "test guide" more as comment than an answer, because it just contains some console.log statements instead of an actual answer for your problem.
Anyway below are some issues I'd try to checkout:
do you receive an answer from the server following query.find
check is data fetched (inner query) from the server
check if category data is received successfully following fetch query
check if element with category id is found
error handling added for fetch and query
Also I noticed that you are using .text() method for setting the value. I think it'll work fine as long as the element in question is not a form input element. If that's the case, you probably have to you use .val() method.
The console.log test print outs that I added can be found at this Fiddle for updateBudgets() function. (Fiddle updated) I hope this helps :-)
Is it possible to load from server via ajax JQGrid structure(columns) together with data ?
If possible, could you please show an example ?
There's no reason why not, you just ned to do things (asynchronously) in the correct order, something like this (forgive the psuedo code)
var jqGridOptions = {
/* various options here */
}
$.ajax({
url: jqGridStructureUrl
}).success(function(jqGridColumns){
// Add the col model to the other options
jqGridOptions.colModel = jqGridColumns.colModel
jqGridOptions.colNames = jqGridColumns.colNames
// set up the jqGrid
$j("#gridId").jqGrid(jqGridOptions)
})
This will get you part of the way there. I guess you'll also be wanting to load Data via Ajax in which case you can set the "Data" option on the jqGrid settings to a callback function (this is not very well documented) - OR you could fire off TWO ajax calls, one for data and one for structure and then when they're BOTH back munge the two together and instantiate your grid object
You can create jqGrid with all hidden columns. You need create grid with large enough number of columns. The names of the columns (in colModel) can have some generic values like "c1", "c2", "c3" ... The response from the server can contains colModel information together with the data. Inside of beforeProcessing callback you can change colModel and set new column headers. The answer demonstrates setting of column headers dynamically. The code column be simplified by usage setLabel method. Another answer demonstrates how to use setColProp to set the most settings of colModel full dynamically. If you would combine the solution with the usage of setColWidth method which I posted in the answer (see here too) then you could create perfect solution.
I have a primefaces datatable.
I need to know the current page number on page change event using client side API.
I am using,
<p:ajax event="page" oncomplete="myFunction(usersWidget);"/>
Inside myFunction() i have
debugger;
console.log(usersWidget.paginator.getCurrentPage());
The problem is, callbacks inside oncomplete of page event are called before the new page is set (PrimeFaces.widget.Paginator.setPage) on the paginator. I traced this with the debugger.
That being said, i would get the previous page number i was on and not the current page number, inside oncomplete callback.
If i could get a callback after the page is set after i click the page link, i would know the current page.
EDIT: Docs say that its a callback called after ajax completion and after DOM is UPDATED.
then what could be potentially wrong?
Pointers please?
Its strange , cause oncomplete being called after the page was updated...
How about calling oncomplete="myFunction();" without passing the parameter ?
You might be passing the old object (with outdated information) that way... the usersWidget is global variable anyway... ans should be present in your js file
Since it seems that client side api is not synced with the right values
As a workaround you could try to pass the page value from server like this
DataTable dataTable = (DataTable)
FacesContext
.getCurrentInstance()
.getViewRoot()
.findComponent("someOformID:someTableId");
or try, instead of the line above,
PageEvent.getPage(); //PageEvent is an argument to you listener
myPageHolder = dataTable.getPage();
Than place this value to bean property and put it inside some hidden value in xhtml , than update that hidden value with p:ajax update and access it from within js
Can I add javascript code that logs every time the user is executing an AJAX call or changing the URL(exiting my page)
I want this piece of code to identify the ajax call automatically, I don't want to do it manually wherever there is an ajax call
if you are willing to use jQuery than try this one:
create a common function for all ajax requests
function ajxCall(url,data,method)
{
$('#logDiv').html(url+'<br>'); // Placing all request URLs in a debug div
$.ajax({url : url,
method : method ,
data : data , // data will be a jason object or you can set it by changing dataType
dataType:'JSON'})
}
function someEvent() // assign this handler to your event
{
ajaxCall('http::localhost/login.php',
{username:'my_user',password:my_password,
'POST'});
}
You can also create it with out jQuery. I have just described the idea. Hope It helps :) regards.
I"m trying to create an additional function for jqGrid to simplify adding JSON data to a grid that uses local data. The following attempt works except for one line, which causes it to fail.
$.fn.myrows = function(data) {
$(this).clearGridData();
$(this).jqGrid("setGridParam", {datatype: "json", loadonce: true});
$("#" + (this).selector)[0].addJSONData(data); // PROBLEMATIC LINE
$(this).jqGrid("setGridParam", {datatype: "local", loadonce: true});
};
This function is then called as $("#myGrid").myrows(jsonDataObject);.
Note that these lines work when they are not inside this function.
Any ideas? Thanks!
In the answer on your previous question I tried to explain how to extend jqGrid to support new method. To tell the truth, I don't see what real advantage you will have from the jqGrid extending. Why not just define your function as
var myrows = function(grid,data) {
// function body
};
and use it in the way:
myrows($("#myGrid"),jsonDataObject);
Much more important thing in my opinion is the implementation of what you need. Your current code have many disadvantages. If the grid has datatype: "local" then the local data paging can be used. The method addJSONData add all the data in the grid, so the page size can be broken.
If you have datatype: "local" and want to fill it with the data then the most effective way will be to set data parameter of the grid with respect of setGridParam and then just call $("#myGrid").trigger('reloadGrid',[{page:1}]) (see here).
Alternative you can use many other existing methods like addRowData which allows to add many rows of data at one method call.
If you get the JSON data from the server and thy to fill the grid with addJSONData method it will be really bad way. The versions of jqGrid starting with the version 3.5 has rich ways to customize the ajax request used. So it is strictly recommended that you don't use addJSONData in the case. See here for details.
You have a typo, do this on the line:
$("#" + $(this).selector)[0].addJSONData(data); // PROBLEMATIC LINE
The $ was missing before this