autosuggest bound to grid only works on first pass

[larksys]

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();
                               }
                           });
                       };
                   }
               });
           });
       });
   };

[paramvir]

Could you provide a jsfiddle where the issue can be seen.

[larksys]

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?

[larksys]

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

[larksys]

Here's the Jsfiddle (so far);

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