jQWidgets Forums

jQuery UI Widgets Forums Grid passing a variable via dataAdapter

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 9 years, 10 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • passing a variable via dataAdapter #72504

    kathys2151
    Participant

    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.

    passing a variable via dataAdapter #72517

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    passing a variable via dataAdapter #72573

    kathys2151
    Participant

    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.

    passing a variable via dataAdapter #72580

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    passing a variable via dataAdapter #72595

    kathys2151
    Participant

    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.

    passing a variable via dataAdapter #72804

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    passing a variable via dataAdapter #73254

    kathys2151
    Participant

    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….

    passing a variable via dataAdapter #73286

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.