Forums

Hello,

I'm trying to add AutoComplete to a datatable in order to filter the pertinent rows following the example here:

http://developer.yahoo.com/yui/examples ... plete.html

AutoComplete seems to work fine except the datatable doesn't refresh unless I click on a column header. When I try to sort a column it does so with the filtered datatable (but not before then). Also, the pagination values disappear. I know that autocomplete generates a new datatable because the sort column arrow disappears after the first character is entered. The pagination values disappear, too. Any thoughts on what I'm doing wrong?

Here is the HTML where the datatable is displayed:

<div class="yui-skin-sam">
<div id="myAutoComplete">
Find: <input id="myInput" type="text">
<div id="myContainer"></div>
</div>

<div id="dynamicdata" style="width: 100%"></div>
<div id="my_pagination" style="float: left"></div>
</div>


Here is the YUI / Javascript:

var rootFolder = '/bluerockny/';

YAHOO.DynamicData = function() {
var xmlDataSource = null,
myDataTable = null;

// Custom parser
var stringToDate = function(sData) {
var rgExp = /([0-9]{4})-([0-9]{2})-([0-9]{2})\s([0-9]{2}):([0-9]{2}):([0-9]{2})/;
var array = sData.match(rgExp);

if (sData) {
return new Date(array[1], array[2]-1, array[3], array[4], array[5], array[6]);
} else {
return;
}
};

var formatClientUrl = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<a href='details.php?id=" + oRecord.getData("clientID") + "'>" + sData + "</a>";
};

var formatEditUrl = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<a href='edit.php?id=" + oRecord.getData("clientID") + "'>Edit</a>";
};

var getTerms = function(query) {
xmlDataSource.sendRequest( 'name=' + query, myDataTable.onDataReturnInitializeTable, myDataTable );
};

var oACDS = new YAHOO.util.FunctionDataSource(getTerms);
oACDS.queryMatchContains = true;
var oAutoComp = new YAHOO.widget.AutoComplete( "myInput", "myContainer", oACDS );

// Column definitions
var myColumnDefs = [ // sortable:true enables sorting
{key:"clientID", label:"Edit", sortable:false, formatter:formatEditUrl},
{key:"Name", label:"Client", sortable:true, formatter:formatClientUrl},
{key:"clientFolder", label:"Folder Name", sortable:true},
{key:"numJobs", label:"# of Jobs", sortable:true},
{key:"numPostings", label:"# of Postings", sortable:true},
{key:"LastLogin", label:"Last Login", sortable:true, formatter:"date"}
];

// DataSource instance
xmlDataSource = new YAHOO.util.DataSource( rootFolder + "ajaxScripts/clientsXML.filter.php?" );

// Set the responseType
xmlDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
xmlDataSource.useXPath = true;
xmlDataSource.connMethodPost = false;
xmlDataSource.connXhrMode = "queueRequests";
xmlDataSource.responseSchema = {
resultNode: "client",
fields: [
{key: "clientID", parser:"number"},
{key: "Name"},
{key: "userID", parser:"number"},
{key: "clientFolder"},
{key: "isActive"},
{key: "numJobs", parser:"number"},
{key: "numPostings", parser:"number"},
{key: "LastLogin", parser:stringToDate}
],
metaFields: {
totalRecords: "/clients/@totalRecords" // Access to value in the server response
}
};

// DataTable configuration
var myConfigs = {
initialRequest: "", // Initial request for first page of data

sortedBy : {key:"Name", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow

paginator : new YAHOO.widget.Paginator({
rowsPerPage: 25, // REQUIRED

// use an existing container element
containers: 'my_pagination',

// use a custom layout for pagination controls
template: "{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}",

// show all links
pageLinks: YAHOO.widget.Paginator.VALUE_UNLIMITED,

// use these in the rows-per-page dropdown
rowsPerPageOptions: [25, 50, 100],
})
};

// DataTable instance
myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, xmlDataSource, myConfigs);

// Update totalRecords on the fly with value from server
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}

return {
ds: xmlDataSource,
dt: myDataTable
};

}();

I'm having the exact same problem. Did you manage to get the problem sorted?

Large chunks of code are discouraged in this forum not only because it takes space and it comes badly formatted, but it also discourages reading and analyzing. I honestly don't have much time to go extracting from your code, which has lost all indentation, the relevant pieces, so I don't.