Coldfusion cfc call not working

[larksys]

I have a page that renders a PQgrid but it's empty. Dev tools does not show the call to the cfc function to get the data. There are no errors.

<script type="text/javascript">
   $(document).ready(function() {
    ListUsers=function(em) {
        var emid = em.title;
        //$('#userslistdiv').html('id-' + emid);
        $('#userslistdiv').show();

        //var obj = { width:700, height:400, title:"List of Emailer Individuals" };
        var colM = [
            { title: "IndivID", width: 100, dataType: "integer" },
            { title: "Lastname", width: 150, dataType: "string" },
            { title: "Firstname", width: 150, dataType: "string" }
        ];
        var dataM = {dataType: "JSON",
            location: "remote",
            recIndx: "IndivID",
            url: "/cfc/basic.cfc?method=getIndivs&EmID=" + emid +"&queryFormat=column",
            getData: function (response) {
                    return { data: response.DATA };
                }
            }
        $("#userslistdiv").pqGrid({ width:700, height:400, title:"List of Emailer Individuals", dataModel: dataM, colModel: colM });
            //alert("it worked-" + emid);
    };

});

</script>

[paramvir]

url is not a direct parameter of dataModel in base version.

You have to use getUrl parameter as shown in this tutorial http://paramquery.com/tutorial/php

Reference:

http://paramquery.com/api#option-dataModel-getUrl

[larksys]

That fixed that.  Thank you.  Now I'm getting; TypeError: x is undefined in the pqgrid.js and the "loading" icon stays on the grid.

[paramvir]

use pqgrid.dev.js instead of pqgrid.min.js to check the stack trace of the error. That would help you locate the cause of error.

post your implementation or create a jsfiddle.

[larksys]

TypeError: rowData is undefined

The part of pqgrid_dev.js where the problem is;

        do {
            var rowObj = data[row],
                    rowData = rowObj,
                    rowIndx = row,
                    hidden = rowData.hidden,
                    row_str = "";
            if (hidden) {
                if (row == finalRow) {
                    break;
                }
                row++;
                continue;
            }
            if (this.offsetRow == null && rowIndx != null) {
                this.offsetRow = (row - rowIndx);
            }
            this._generateRow(rowData, rowIndx, thisColModel, noColumns, hidearrHS1, offset, const_cls, buffer, objP);
            if (SM.scrollTillLastRow) {
            }
            else {
                if (row == finalRow) {
                    break;
                }
                row++;
            }
        }


The implementation is pretty simple. I have a button that has onclick="listusers();

Then pqgrid is rendered in a div named userslistdiv.

Fiddle is not an option because of the included script and css that's only available for download ( no Google API lib).

[larksys]

json returned by cfc call is attached

[paramvir]

have you mentioned dataType in dataModel

http://paramquery.com/api#option-dataModel-dataType

Example:

http://paramquery.com/demos/sorting_remote

[larksys]

Sorry, this is the current code;

<script type="text/javascript">
   $(document).ready(function() {
    ListUsers=function(em) {
        var emid = em.title;
        //$('#userslistdiv').html('id-' + emid);
        $('#userslistdiv').show();

        //var obj = { width:700, height:400, title:"List of Emailer Individuals" };
        var colM = [
            { title: "IndivID", width: 100, dataType: "integer" },
            { title: "Lastname", width: 150, dataType: "string" },
            { title: "Firstname", width: 150, dataType: "string" }
        ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            getUrl : function () {
                return { url: 'cfc/basic.cfc?method=getIndivs&EmID=' + emid};
            },
            getData: function ( response ) {
                return { data: response };
            }
           }
        $("#userslistdiv").pqGrid({ width:700, height:400, title:"List of Emailer Individuals", dataModel: dataModel, colModel: colM });
            //alert("it worked-" + emid);
    };

});

</script>

[paramvir]

By looking at your JSON data, your getData callback also needs correction.

getData: function ( response ) {
                return { data: response.DATA };
            }

If you have constructed JSON data manually on the server side, the keynames in your JSON data also require double quotes e.g. it should be "COLUMNS" and "DATA".

[larksys]

I should have seen that.  thank you very much.