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