jQWidgets Forums
jQuery UI Widgets › Forums › Grid › passing a variable via dataAdapter
Tagged: data, data adapter, dataadapter, grid, jqxDataAdapter, jqxgrid, passing data, server, source, variable
This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.
-
Author
-
I have a grid composed of project names. I use the linkrenderer function to make each project name a link, so when the user clicks on a project, the data for that project is shown in a new grid on another page. My problem is in passing the value of the project the user clicks on to my php file. Here is my source code for my new grid which displays info about the project the user has chosen:
var source = { datatype:json, datafields: [ name: 'project', type: 'string', sortable: 'true'}, name: 'projectId', type: 'string', hidden: 'true'}, .......... more field here ......... ], url: 'gridByProject2.php', data: { pn: projectId }, ........... more data here ....
If I hardcode data in the pn field, I get the correct data for my new grid:
data: { pn: '1' },
How do I get the variable of pn passed, which is whatever is the projectId the user has chosen? I have looked at all the examples of this, but they show passing hard coded data, not the value of a variable.
Hello kathys2151,
When the value of projectId is changed, update the source data property:
source.data = { pn: projectId };
The correct data should be passed after that.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I end up getting an error that projectId is not defined, even though I’ve defined it in the grid.
$("#jqxgrid").jqxGrid ({ source: dataAdapter, ....... columns: [ [ text: 'Project Id', datafield: 'projectId', width: 20 }, ........
$("#jqxgrid").on ('cellclick', function(event) { var args = event.args; var value = args.value; source.data = { pn: projectId };
I am using this selection from the user to grab data from a mysql database and show another grid. I have a linkrenderer function set up that assembles the url which includes the projectId, but I need to be able to pass the user’s selection to search the db and build the next grid.
Hi kathys2151,
projectId, which you try to pass to the source data property is a variable. As far as I can see, it is undefined. On the other hand, ‘projectId’ is the name of a datafield. These two are different things. Perhaps you wish to pass the value of the cell in the “Project Id” column? If so, you can try the following:
$("#jqxgrid").on('cellclick', function(event) { var args = event.args; var rowBoundIndex = args.rowindex; var projectIdValue = $('#jqxgrid').jqxGrid('getcellvalue', rowBoundIndex, "projectId"); source.data = { pn: projectIdValue }; ...
You may also find the grid demo Master-Details helpful. There is a PHP version of it in the jQWidgets download package under
phpdemos\grid_master_details
.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Makes sense. I’m almost there. I ended up with the code below, but I cannot figure out how to load the new grid (located in newGrid.php):
$("#jqxgrid").on ('cellclick', function(event) { var args = event.args; var rowBoundIndex = args.rowindex; var value = $('#jqxgrid').jqxGrid('getcellvalue', rowBoundIndex, "projectId"); $.ajax({ dataType: 'json' url: 'newGrid.php', data: (pn:value}, success: function (data, status, xhr) { $('#byProjectGrid').load('newGrid.php'); .......
newGrid.php grabs the pn (which is correct as I output that to an error log), does the mysql search and returns the correct data. Except I never move off the first page. I can see in Firebug the newGrid.php page and the JSON data, but can’t get it to load into the new grid.
Hi kathys2151,
First, you have a syntax error:
(pn:value}
has to be{pn:value}
. As for loading the second grid – if its data is received in the success callback’s data parameter, you can try the following:$("#jqxgrid").on('cellclick', function(event) { var args = event.args; var rowBoundIndex = args.rowindex; var value = $('#jqxgrid').jqxGrid('getcellvalue', rowBoundIndex, "projectId"); $.ajax({ dataType: 'json' url: 'newGrid.php', data: (pn: value }, success: function(data, status, xhr) { // $('#byProjectGrid').load('newGrid.php'); var source = { datatype: 'json', datafields: [ ... ], localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); $('#secondGrid').jqxGrid({ source: dataAdapter }); } }); });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I fixed my typo, so here is what I have:
$("#jqxgrid").on('cellclick', function(event) { var args = event.args; var rowBoundIndex = args.rowindex; var value = $('#jqxgrid').jqxGrid('getcellvalue', rowBoundIndex, "projectId"); $.ajax({ dataType: 'json' url: 'newGrid.php', data: {pn: value}, success: function(data, status, xhr) { $('#jqxgrid').load('newGrid.php'); }; }); });
Then in newGrid.php I lay out the html containing a div with id “byProjectGrid”. In newGrid.php I do a Get on “pn”, and use this variable to get specific data from a mysql db. I also load newGrid.js. In this file I have:
var source = { datatype: "json", datafields: [ ............. ] }........ $("#jqxgrid").jqxGrid ( ............. )
The new grid itself is displayed (newGrid.php), and when I check the output in Firebug I am getting the correct JSON data returned, but I cannot get it to display in the new grid. Are you able to help me figure out why this data is not appearing? I’m sure I’m missing something simple….
Hi kathys2151,
You also need to create a data adapter instance which is passed the source object and populates the grid, i.e.:
var source = { datatype: "json", datafields: [.............] }........ var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function(data) { alert('No errors. The data is loaded.'); }, loadError: function(xhr, status, error) { alert('Error. The data is not loaded.'); } }); $("#jqxgrid").jqxGrid({ source: dataAdapter, ... });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.