Messages

1

Help for ParamQuery Grid (free version) / Re: autosuggest bound to grid only works on first pass

« on: May 14, 2015, 08:29:50 am »

Here's the Jsfiddle (so far);

https://jsfiddle.net/vaughn/uae1n0ey/1/

2

Help for ParamQuery Grid (free version) / Re: autosuggest bound to grid only works on first pass

« on: May 14, 2015, 05:43:47 am »

I've modified my code.  Firebug shows the following errors;

NS_ERROR_NOT_AVAILABLE:
TypeError: t is null   pqgrid.min.js:9:69820


var Vnamesuggest = '';

   function initSBScript() {
       $(document).ready(function() {
           CloseGrid = function() {
               $('##userslistdiv').pqGrid('destroy');
               $('##userslistdiv').hide;
           }
           $(function() {
               var obj = {
                   width: 700,
                   height: 400,
                   title: 'Select Participant',
                   cellClick: function(evt, ui) {
                       var $td = $(evt.currentTarget).closest('td');
                       if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                           //alert(GSIDval);
                           $.ajax({
                               type: 'POST',
                               url: 'cfc/basic.cfc?method=getIndivInfo&indivnumber=' + GSIDval,
                               dataType: 'json',
                               error: function(xhr, textStatus, errorThrown) {
                                   // show error
                                   alert(errorThrown);
                               },
                               success: function(response1, textStatus, jqXHR) {
                                   ReturnedData = response1.DATA[0];
                                   $('##IndivResultDiv').append('<p>' + ReturnedData[0] + '         ' + ReturnedData[1] + '<br>' + ReturnedData[2] + '<br>' + ReturnedData[3] + '</p>');
                                   $('##IndivResultDiv').css('background-color', '##ff80ff');
                                   $('##IndivResultDiv').css('fontSize', '16px');
                                   $('##IndivResultDiv').css('width', '600');
                                   $('##IndivResultDiv').show();
                               }
                           });
                       };
                   }
               };
               obj.colM = [{
                   title: 'IndivID',
                   width: 60,
                   dataType: 'integer',
                   editable: false
               }, {
                   title: 'Name',
                   width: 150,
                   dataType: 'string',
                   editable: false
               }, {
                   title: 'Company',
                   width: 200,
                   dataType: 'string',
                   editable: false
               }, {
                   title: 'City',
                   width: 150,
                   dataType: 'string',
                   editable: false
               }];
               obj.dataModel = {
                   location: 'remote',
                   dataType: 'JSON',
                   method: 'GET',
                   paging: 'local',
                   rPP: 15,
                   rPPOptions: [15, 30, 45],
                   getUrl: function() {
                       return {
                           url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                       };
                   },
                   getData: function(response) {
                       return {
                           data: response.DATA
                       };
                   }
               };
               var $partgrid = $('##userslistdiv').pqGrid(obj);
               //$('##userslistdiv').pqGrid({obj});
           });
       });
   };

   $('.namesuggestselector').on('change', function() {
       Vnamesuggest = $.trim(this.value);
       $('##IndivResultDiv').hide();
       $('##IndivResultDiv').empty();
       $('##userslistdiv').show();
       $partgrid.pqGrid("refreshDataAndView");
   });

Still attempting jsfiddle

3

Help for ParamQuery Grid (free version) / Re: autosuggest bound to grid only works on first pass

« on: May 14, 2015, 03:25:34 am »

I'm finding it very difficult  to create jsfiddle since the code is part of a complex page that runs on a Coldfusion server.  Do I appear to be approaching the code in the best fashion?

4

Help for ParamQuery Grid (free version) / autosuggest bound to grid only works on first pass

« on: May 13, 2015, 10:47:51 am »

I have a PQgrid on a page that has an input element quasi-bound to it.  When a name is entered an auto-suggest is triggered to provide a list of names to select from.  After that initial pass, The grid/auto-suggest appears to fail all together.  It was working ( the auto-suggest to grid) but while adding code for cell selection,  it stopped.  I'm stumped.


<cfinput type="text" name="namesuggest" id="namesuggest" size="25" maxlength="200" value=" " class="namesuggestselector" />&nbsp;&nbsp;Tab out of this field to see a list.
<br />
<div id="userslistdiv" style="display:none"></div>
<div id="IndivResultDiv" style="display:none"></div>


var Vnamesuggest = '';

   function initSBScript() {
       $(document).ready(function() {
           CloseGrid = function() {
               $('##userslistdiv').pqGrid('destroy');
               $('##userslistdiv').hide;
           }
           $('.namesuggestselector').on('change', function() {
               Vnamesuggest = $.trim(this.value);
            $('##IndivResultDiv').hide();
            $('##IndivResultDiv').empty();
               $('##userslistdiv').show();
               var colM = [{
                   title: 'IndivID',
                   width: 60,
                   dataType: 'integer',
                   editable: false
               }, {
                   title: 'Name',
                   width: 150,
                   dataType: 'string',
                   editable: false
               }, {
                   title: 'Company',
                   width: 200,
                   dataType: 'string',
                   editable: false
               }, {
                   title: 'City',
                   width: 150,
                   dataType: 'string',
                   editable: false
               }];
               var dataModel = {
                   location: 'remote',
                   dataType: 'JSON',
                   method: 'GET',
                   paging: 'local',
                   rPP: 15,
                   rPPOptions: [15, 30, 45],
                   getUrl: function() {
                       return {
                           url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                       };
                   },
                   getData: function(response) {
                       return {
                           data: response.DATA
                       };
                   }
               }
               $('##userslistdiv').pqGrid({
                   width: 560,
                   height: 470,
                   title: 'Select Participant',
                   dataModel: dataModel,
                   colModel: colM,
                   scrollModel: {
                       horizontal: false
                   },
                   flexHeight: true,
                   cellClick: function(evt, ui) {
                       var $td = $(evt.currentTarget).closest('td');
                       if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                           //alert(GSIDval);
                           $.ajax({
                               type: 'POST',
                               url: 'cfc/basic.cfc?method=getIndivInfo&indivnumber=' + GSIDval,
                               dataType: 'json',
                               error: function(xhr, textStatus, errorThrown) {
                                   // show error
                                   alert(errorThrown);
                               },
                               success: function(response1, textStatus, jqXHR) {
                                   ReturnedData = response1.DATA[0];
                                   $('##IndivResultDiv').append('<p>' + ReturnedData[0] + '         '  + ReturnedData[1] + '<br>' + ReturnedData[2] + '<br>' + ReturnedData[3] + '</p>');
                                   $('##IndivResultDiv').css('background-color', '##ff80ff');
                                   $('##IndivResultDiv').css('fontSize', '16px');
                                   $('##IndivResultDiv').css('width', '600');
                                   $('##IndivResultDiv').show();
                               }
                           });
                       };
                   }
               });
           });
       });
   };

5

Help for ParamQuery Grid (free version) / Re: help binding pqgrid to input element.

« on: May 11, 2015, 11:31:10 pm »

1. The keyup or keydown is not the best way.  EVERY key causes the event to fire.
2.  After the initial character entry, I get a list in the grid.  After that I only get a blank grid.


<script type="text/javascript">
    var Vnamesuggest = '';

    function initSBScript() {

        $(document).ready(function() {

            CloseGrid = function() {
                $('##userslistdiv').pqGrid('destroy');
                $('##userslistdiv').hide;
            }

            $('.namesuggestselector').on('keyup', function() {
                Vnamesuggest = $.trim(this.value);
                //alert(Vnamesuggest);
                $('##userslistdiv').show();
                var colM = [{
                    title: 'IndivID',
                    width: 60,
                    dataType: 'integer',
                    editable: false
                }, {
                    title: 'Name',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'Company',
                    width: 200,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'City',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }];
                var dataModel = {
                    location: 'remote',
                    dataType: 'JSON',
                    method: 'GET',
                    paging: 'local',
                    rPP: 15,
                    rPPOptions: [15, 30, 45],
                    getUrl: function() {
                        return {
                            url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                        };
                    },
                    getData: function(response) {
                        return {
                            data: response.DATA
                        };
                    }
                }

                $('##userslistdiv').pqGrid({
                    width: 560,
                    height: 470,
                    title: 'Select Participant',
                    dataModel: dataModel,
                    colModel: colM,
                    scrollModel: {
                        horizontal: false
                    },
                    flexHeight: true,
                    cellClick: function(evt, ui) {
                        var $td = $(evt.currentTarget).closest('td');
                        if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                            alert(GSIDval);
                        };
                    }
                });
            });

        });
    };
</script>

6

Help for ParamQuery Grid (free version) / Re: help binding pqgrid to input element.

« on: May 08, 2015, 02:29:38 am »

I forgot the input element in the code I provider.  It's on the main page;
<cfinput type="text" name="namesuggest" id="namesuggest" size="25" maxlength="200" value=" " class="namesuggestselector" />

I thought I was binding a keydown event.

7

Help for ParamQuery Grid (free version) / help binding pqgrid to input element.

« on: May 07, 2015, 10:00:29 pm »

I have a grid that lists last names that begin with whatever is typed into an input field.  What I need is the ability to refresh the grid after each letter typed.  It would be handy to only bind when there are 3 or more characters typed.  As of now it only works when the input element loses focus.

The input element;
<div id="userslistdiv" style="display:none"></div>
<cfdiv bind="url:dspNameSuggest.cfm?namesuggest={namesuggest}" bindonload="yes" id="namesuggestdiv">

The dspNameSuggest page;
<cfset ajaxOnLoad("initSBScript")>


The pqgrid code;
<script type="text/javascript">
    var Vnamesuggest = '';

    function initSBScript() {

        $(document).ready(function() {

            CloseGrid = function() {
                $('##userslistdiv').pqGrid('destroy');
                $('##userslistdiv').hide;
            }

            $('.namesuggestselector').on('keydown', function() {
                Vnamesuggest = this.value;
                //alert(Vnamesuggest);
                $('##userslistdiv').show();
                var colM = [{
                    title: 'IndivID',
                    width: 60,
                    dataType: 'integer',
                    editable: false
                }, {
                    title: 'Name',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'Company',
                    width: 200,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'City',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }];
                var dataModel = {
                    location: 'remote',
                    dataType: 'JSON',
                    method: 'GET',
                    paging: 'local',
                    rPP: 15,
                    rPPOptions: [15, 30, 45],
                    getUrl: function() {
                        return {
                            url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                        };
                    },
                    getData: function(response) {
                        return {
                            data: response.DATA
                        };
                    }
                }

                $('##userslistdiv').pqGrid({
                    width: 560,
                    height: 470,
                    title: 'Select Participant',
                    dataModel: dataModel,
                    colModel: colM,
                    scrollModel: {
                        horizontal: false
                    },
                    flexHeight: true,
                    cellClick: function(evt, ui) {
                        var $td = $(evt.currentTarget).closest('td');
                        if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                            alert(GSIDval);
                        };
                    }
                });
            });

        });
    };
</script>

8

Help for ParamQuery Grid (free version) / Re: Need simple cell click to return cell value

« on: May 06, 2015, 06:25:39 am »

Thank you very much.  PQgrid is starting to make sense.

9

Help for ParamQuery Grid (free version) / Need simple cell click to return cell value

« on: May 01, 2015, 07:25:06 am »

I guess I just don't understand.  How can I get the value of the cell that is clicked?

$("#userslistdiv").pqGrid({
            width: 560, height: 470, title: "Select Participant", dataModel: dataModel, colModel: colM, scrollModel: {horizontal: false   },
            flexHeight: true, selectionModel: { type: 'cell'},
            selectionModel: { type: 'cell', mode: 'block' }
         });

10

Help for ParamQuery Grid (free version) / Re: row selection

« on: April 28, 2015, 10:03:34 am »

The documentation is just not clear enough for me.  I don't understand "subscribe" and it doesn't appear to be in the documentation.  I added the function but I don't see it happening and I don't get an error.  Well, that's not entirely true.  I did get "Resource interpreted as Image but transferred with MIME type text/css: https://dev.t.net/control/js/paramQuery/themes/office/pqgrid.CSS". 

      $(document).ready(function() {

      CloseGrid = function() {
         $("##userslistdiv").pqGrid('destroy');
         $('##userslistdiv').hide;
      }

      $('.namesuggestselector').on('change', function() {
         Vnamesuggest = this.value;
         //alert(Vnamesuggest);
         $('##userslistdiv').show();
         var colM = [{title: "IndivID", width: 60, dataType: "integer", editable: false },
         {title: "Name", width: 150, dataType: "string", editable: false   },
         {title: "Company", width: 200, dataType: "string", editable: false },
         {title: "City", width: 150, dataType: "string", editable: false }];
         var dataModel = {location: "remote",   dataType: "JSON", method: "GET", paging: 'local', rPP: 15, rPPOptions: [15, 30, 45], getUrl: function() {
               return {
                  url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
               };
            },
            getData: function(response) {
               return {
                  data: response.DATA
               };
            }
         }
         $.extend(colM[0], {
            render: function(ui) {
               var rowData = ui.rowData;;
               return "<a href='#request.controlUrl#individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
            }
         });
         $( ".selector" ).pqGrid({
             rowClick: function( event, ui ) {}
         });
         $("##userslistdiv").pqGrid({
            width: 560, height: 470, title: "Select Participant", dataModel: dataModel, colModel: colM, scrollModel: {horizontal: false   },
            flexHeight: true, selectionModel: { type: 'cell'},
            rowSelect: function (evt, obj) {
               alert(obj.data[obj.rowIndxPage][2]);
               var orderID = obj.data[obj.rowIndxPage][2];
            }
         });
      });
      });
   };

11

Help for ParamQuery Grid (free version) / row selection

« on: April 28, 2015, 12:46:02 am »

I'm not understanding row selection.  In my code I need to bind row selection to a function that displays data based on the contents of cell(0), indiv.  The following returns a grid list of individual names to select from.  Cell(0) is an href to view individual details.  It doesn't HAVE to be an href.


      var Vnamesuggest = '';

   function initSBScript() {

      $(document).ready(function() {

      CloseGrid = function() {
         $("##userslistdiv").pqGrid('destroy');
         $('##userslistdiv').hide;
      }
      $('.namesuggestselector').on('change', function() {
         Vnamesuggest = this.value;
         //alert(Vnamesuggest);
         $('##userslistdiv').show();
         var colM = [{title: "IndivID", width: 60, dataType: "integer", editable: false },
         {title: "Name", width: 150, dataType: "string", editable: false   },
         {title: "Company", width: 200, dataType: "string", editable: false },
         {title: "City", width: 150, dataType: "string", editable: false }];
         var dataModel = {location: "remote",   dataType: "JSON", method: "GET", paging: 'local', rPP: 15, rPPOptions: [15, 30, 45], getUrl: function() {
               return {
                  url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
               };
            },
            getData: function(response) {
               return {
                  data: response.DATA
               };
            }
         }
         $.extend(colM[0], {
            render: function(ui) {
               var rowData = ui.rowData;;
               return "<a href='#request.controlUrl#individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
            }
         });
         $("##userslistdiv").pqGrid({
            width: 560, height: 470, title: "Select Participant", dataModel: dataModel, colModel: colM, scrollModel: {horizontal: false   },
            flexHeight: true, selectionModel: { type: 'cell'}
         });
         //alert("it worked-" + emid);
      });
      });
   };

12

Help for ParamQuery Grid (free version) / Re: PQgrid stopped working when migrating from Coldfusion 9 to 10

« on: January 11, 2015, 08:22:01 am »

Why would CF 10 change the format of Json.  It appears to be a CF problem.  I discovered an error message that has to do with buffering.

13

Help for ParamQuery Grid (free version) / PQgrid stopped working when migrating from Coldfusion 9 to 10

« on: January 08, 2015, 11:37:46 am »

We recently migrated from Coldfusion 9 to version 10 on Windows Server 2012. Using Jquery 1.11.   PQgrid stopped displaying data.  I get the grid and see the attempt to get the data.  I don't see any errors.  Does anyone have any ideas?

14

Help for ParamQuery Grid (free version) / Re: making a pqgrid dynamic

« on: December 23, 2014, 04:21:09 am »

The only way I could get this to work is to move the close button outside of the div.  Now I have a button showing even when the grid is not.  I'll have to add code to check for the div/grid being visible.

15

Help for ParamQuery Grid (free version) / making a pqgrid dynamic

« on: December 20, 2014, 08:21:27 am »

I can't find any reference to help me make a pqgrid dynamic.  I can create the grid in a <div> but there is no way to "recreate" the grid.  If I add a button to close the grid/div in the div, it is destroyed when I create the grid and show the div.  I need to create a grid bound to a selection on the screen that has onclick="ListUsers(this);".

<script type="text/javascript">
   $(document).ready(function() {

   CloseGrid=function(){
      $("#userslistdiv").pqGrid('destroy');
      $('#userslistdiv').hide();
   }

    ListUsers=function(em) {
        var emid = em.title;
        $('#userslistdiv').show();

        var colM = [
            { title: "IndivID", width: 100, dataType: "integer", editable: false},
            { title: "Lastname", width: 150, dataType: "string", editable: false },
            { title: "Firstname", width: 150, dataType: "string", editable: false }
        ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            paging: 'local',
            rPP:15,
            rPPOptions:[15, 30, 45],
            getUrl : function () {
                return { url: 'cfc/basic.cfc?method=getIndivs&EmID=' + emid};
            },
            getData: function ( response ) {
                return { data: response.DATA };
            }
           }
        $.extend(colM[0], {
           render: function (ui) {
                 var rowData = ui.rowData; ;
                  return "<a href='<cfoutput>#request.controlUrl#</cfoutput>individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
            }
       });
        $("#userslistdiv").pqGrid({ width:458, height:470, title:"List of Emailer Individuals for " + emid, dataModel: dataModel, colModel: colM, scrollModel:{horizontal: false} });
            //alert("it worked-" + emid);
    };

});

</script>



<div id="userslistdiv" style="display:none"><input name="CloseGridButton" type="button" value="Close" onclick="CloseGrid();"></div>