Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: Problem with search using pagination in a data table

Expand Messages
  • Satyam
    I could not locate method reducesearchlist() which is the one that triggers it all. The DataTable defers actually creating the DOM elements to an asynchronous
    Message 1 of 8 , Nov 4, 2009
    • 0 Attachment
      I could not locate method reducesearchlist() which is the one that
      triggers it all. The DataTable defers actually creating the DOM
      elements to an asynchronous function so your function is not on the call
      stack.

      Anyway, what I noticed is that you are loading many of the YUI
      JavaScript files several times. This is not good. Dependent files
      should only be loaded once each and in the correct order. Some of the
      aggregate files like utilities.js contain many of the individual YUI
      files so please do check your dependencies and if my requery method is
      what you are using, as Bahahur Kabil says elsewhere, don't expect it to
      work, it does not.

      Also, do check your code with JSLint (www.jslint.org), it will save you
      lots of trouble.

      Satyam

      sumeenkaur escribió:
      > Ok I have changes that in the working example. Let me know if u find something.
      >
      > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
      >
      >> If you could change that in the working example, we could put a
      >> breakpoint at the point of failure and see the state of the variables
      >> and the call stack.
      >>
      >> sumeenkaur escribió:
      >>
      >>> ok..if i replace it with datatable.js, i get this error
      >>>
      >>> allRecords[i] is undefined at datatable.js on Line 7220
      >>>
      >>> Let me know if u find anyhting
      >>>
      >>>
      >>>
      >>>
      >>>
      >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
      >>>
      >>>
      >>>> The error is in minified code, there is no way to make sense of it. Can
      >>>> you change datatable-min.js and use datatable.js instead?
      >>>>
      >>>> Satyam
      >>>>
      >>>> sumeenkaur escribió:
      >>>>
      >>>>
      >>>>> Hi
      >>>>>
      >>>>>
      >>>>> Check on the link http://oleg.sleeplms.net/
      >>>>>
      >>>>> Click 'Lab Management'. Click 'Referral and test'. Click any test.
      >>>>> An edit page opens where one can see the button 'Select Patient'.
      >>>>> Click that button.
      >>>>>
      >>>>> A yui data table is created with a search feature. Since the table has more than 20 records, it displays pagination.
      >>>>>
      >>>>> The search feature works in the following way:
      >>>>> I enter say 'F' in search input box and the data table list reduces to all patients with letter F in their last name.
      >>>>>
      >>>>> Search works fine on the first page but if i go second page by clicking 2, and repeat the above steps, i get the following error.
      >>>>>
      >>>>> I[T] is undefined
      >>>>> on datatable-min.js at Line 16
      >>>>>
      >>>>> But if i enter some more data in the search input box, it works fine.
      >>>>>
      >>>>> I can not figure out how to fix this. Any help would be appreciated.
      >>>>>
      >>>>> Here is the code.
      >>>>>
      >>>>> YAHOO.namespace ("protech");
      >>>>>
      >>>>> var Dom = YAHOO.util.Dom;
      >>>>> var Event = YAHOO.util.Event;
      >>>>> var myDataTable = null;
      >>>>> var myDataSource = null;
      >>>>> var parameters = null;
      >>>>> var ind;
      >>>>> var jsonstring=null;
      >>>>> var fieldsArray = [];
      >>>>> var texttosearch='';
      >>>>> var textinsearch='';
      >>>>> var search='';
      >>>>> var pag=null;
      >>>>> var oRecord_temp=[];
      >>>>> var oRecord_index=0;
      >>>>> var specialChars = ['@','#',':', ' ', '$','%','^','&','*','(',')','=','-','_','}','{',']','[','>','<','\'','"','.',';','?','/','!','+','\\','|',',','`','~','\n','\r'];
      >>>>>
      >>>>>
      >>>>> function reducesearchlist(temp){
      >>>>> texttosearch = Dom.get('queryInput'+temp).value;
      >>>>> if (texttosearch==''){
      >>>>> clearfilter(temp);
      >>>>> }else{
      >>>>> testsearch(temp);
      >>>>>
      >>>>> }
      >>>>>
      >>>>> }
      >>>>>
      >>>>>
      >>>>>
      >>>>> function testsearch(temp){
      >>>>> texttosearch = Dom.get('queryInput'+temp).value;
      >>>>> textinsearchvalue = Dom.get('search_columns'+temp).value;
      >>>>> arr = Dom.get('search_columns'+temp).options;
      >>>>> textinsearch = arr[textinsearchvalue].text;
      >>>>> search='yes';
      >>>>> var oCallback2 = {
      >>>>> success : function(oRequest, oResponse, oPayload){
      >>>>> myDataTable.onDataReturnInitializeTable(oRequest, oResponse, oPayload);
      >>>>> var newState = {
      >>>>> totalRecords : oPayload.totalRecords
      >>>>> };
      >>>>> pag.setState(newState);
      >>>>> },
      >>>>> failure:function(oRequest, oResponse, oPayload){
      >>>>> },
      >>>>> scope : myDataTable,
      >>>>> argument : myDataTable.getState()
      >>>>> };
      >>>>>
      >>>>> for (sp=0;sp<specialChars.length;sp++){
      >>>>> temp=textinsearch.split(specialChars[sp]);
      >>>>> splen = temp.length;
      >>>>>
      >>>>> for (spl=1;spl<=splen;spl++){
      >>>>> textinsearch = textinsearch.replace(specialChars[sp],'');
      >>>>> }
      >>>>> }
      >>>>> queryString = "&insearch="+textinsearch+"&dir=asc&startIndex=0&results=25";
      >>>>>
      >>>>> myDataSource.sendRequest('&sort='+fieldsArray[0].key+'&search='+search+'&query=' + texttosearch+queryString, oCallback2,myDataTable,true);
      >>>>>
      >>>>> }
      >>>>>
      >>>>>
      >>>>> function test(temp,cmd){
      >>>>>
      >>>>> search="";
      >>>>> textinsearch="";
      >>>>> texttosearch="";
      >>>>> var ind = temp;
      >>>>>
      >>>>> var elementid = Dom.get('reference'+ind);
      >>>>> Dom.setStyle(elementid,'display','none');
      >>>>>
      >>>>> var searchid = Dom.get('search'+ind);
      >>>>> Dom.setStyle(searchid,'display','');
      >>>>>
      >>>>> var okcancelid = Dom.get('okcancel'+ind);
      >>>>> Dom.setStyle(okcancelid,'display','');
      >>>>>
      >>>>> var tablediv = 'dynamicdata'+ind;
      >>>>>
      >>>>>
      >>>>> var entityID = Dom.get('hid_entity').value;
      >>>>>
      >>>>>
      >>>>>
      >>>>> var instanceID = Dom.get('hid_ins').value;
      >>>>>
      >>>>>
      >>>>> if(gup('reportName')){
      >>>>> reportID = gup('reportName');
      >>>>> }
      >>>>>
      >>>>> if(gup('module')){
      >>>>> var module = gup('module');
      >>>>> }
      >>>>>
      >>>>> var columnHeaders = [];
      >>>>>
      >>>>> var header_array = [];
      >>>>>
      >>>>> if(!header_array) return;
      >>>>> var myColumnDefs = [];
      >>>>> var summaryAddresses = [];
      >>>>> //var fieldsArray = [];
      >>>>>
      >>>>>
      >>>>> var formatUrl = function(elCell, oRecord, oColumn, sData) {
      >>>>> if(sData){
      >>>>>
      >>>>> //elCell.innerHTML = "<a href='" + oRecord.getData("editurl") + "'>" + sData + "</a>";
      >>>>>
      >>>>> elCell.innerHTML = '<span instance="' + oRecord.getData("instance_index_temp") + '">' + sData + '</span>';
      >>>>>
      >>>>> }
      >>>>> };
      >>>>>
      >>>>> registerStr = '';
      >>>>> var st =cmd + '~~|~~' + ind + '~~|~~' + registerStr;
      >>>>> // Custom parser
      >>>>> var lmsParser = function(sData) {
      >>>>> if(sData){
      >>>>> var array = sData.split("/");
      >>>>> temp=new Date(array[0] + " " + array[1] + ", " + array[2]);
      >>>>> return temp;
      >>>>> }
      >>>>> };
      >>>>>
      >>>>>
      >>>>> if(module == 'lms'){
      >>>>> //parameters = {entityID: 7, pageName: 'module', asynchronous: true, func:'gettableheaders',module:'lms'};
      >>>>> var parameters= {
      >>>>> refID:temp,
      >>>>> pageName:'module',
      >>>>> asynchronous: true,
      >>>>> func:'getreferencetableheaders',
      >>>>> module:'lms'
      >>>>> };
      >>>>> }
      >>>>> else if(module == 'reportcreator'){
      >>>>> var parameters = {
      >>>>> reportName: reportName,
      >>>>> pageName: 'module',
      >>>>> asynchronous: true,
      >>>>> func:'getreporttableheaders',
      >>>>> module:'reportcreator'
      >>>>> };
      >>>>> }
      >>>>>
      >>>>> new Ajax.Request('index.php',
      >>>>> {
      >>>>> method:'get',
      >>>>> parameters: parameters,
      >>>>> onSuccess: function(transport){
      >>>>> var response = transport.responseText || "Error";
      >>>>>
      >>>>> header_array = eval(response);
      >>>>> if(header_array.length) {
      >>>>> for(i=0;i<header_array.length;i++){
      >>>>>
      >>>>> var clean_header = header_array[i].name.replace(/ /g,'');
      >>>>> clean_header = clean_header.replace(/:/g,'');
      >>>>> for (sp=0;sp<specialChars.length;sp++){
      >>>>> temp=clean_header.split(specialChars[sp]);
      >>>>> splen = temp.length;
      >>>>>
      >>>>> for (spl=1;spl<=splen;spl++){
      >>>>> clean_header = clean_header.replace(specialChars[sp],'');
      >>>>> }
      >>>>> }
      >>>>>
      >>>>> summaryAddresses[i] = header_array[i].address;
      >>>>>
      >>>>> if(header_array[i].AtomicTypeID==7){
      >>>>> fieldsArray[i] = {
      >>>>> key:clean_header
      >>>>> };
      >>>>> myColumnDefs[i] = {
      >>>>> key:clean_header,
      >>>>> label:header_array[i].name,
      >>>>> sortable:true,
      >>>>> formatter:formatUrl
      >>>>> };
      >>>>> }
      >>>>> else{
      >>>>> fieldsArray[i] = {
      >>>>> key:clean_header
      >>>>> };
      >>>>> myColumnDefs[i] = {
      >>>>> key:clean_header,
      >>>>> label:header_array[i].name,
      >>>>> sortable:true,
      >>>>> formatter:formatUrl
      >>>>> };
      >>>>> }
      >>>>> }
      >>>>> fieldsArray[i]={
      >>>>> key:"editurl"
      >>>>> };
      >>>>> i++;
      >>>>> fieldsArray[i]={
      >>>>> key:"instance_index_temp"
      >>>>> };
      >>>>> jsonString = Object.toJSON(summaryAddresses);
      >>>>>
      >>>>> //We have our header array. Now, let's get the data for the table
      >>>>> myDataSource = new YAHOO.util.DataSource("index.php?module=lms&func=getreferencetabledata&addresses="+jsonString+'&');
      >>>>>
      >>>>> myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      >>>>>
      >>>>> myDataSource.responseSchema = {
      >>>>> resultsList: "records",
      >>>>> fields: fieldsArray,
      >>>>> metaFields: {
      >>>>> totalRecords: "totalRecords" // Access to value in the server response
      >>>>> }
      >>>>> };
      >>>>>
      >>>>> // Paginator configurations
      >>>>>
      >>>>> pag = new YAHOO.widget.Paginator({
      >>>>> rowsPerPage : 20,
      >>>>> alwaysVisible : false,
      >>>>> template:YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
      >>>>> rowsPerPageOptions: [20,50,100]
      >>>>> });
      >>>>>
      >>>>>
      >>>>>
      >>>>> // DataTable configuration
      >>>>>
      >>>>> var myConfigs = {
      >>>>> initialRequest: "&sort="+fieldsArray[0].key+"&search="+search+"&query="+texttosearch+"&insearch="+textinsearch+"&dir=asc&startIndex=0&results=25", // Initial request for first page of data
      >>>>> dynamicData: true, // Enables dynamic server-driven data
      >>>>> sortedBy : {
      >>>>> key:fieldsArray[0].key,
      >>>>> dir:YAHOO.widget.DataTable.CLASS_ASC
      >>>>> }, // Sets UI initial sort arrow
      >>>>> selectionMode:"single",
      >>>>> paginator:pag
      >>>>> };
      >>>>>
      >>>>> myDataTable = new YAHOO.widget.DataTable(tablediv, myColumnDefs, myDataSource, myConfigs);
      >>>>>
      >>>>> // Subscribe to events for row selection
      >>>>> myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
      >>>>> myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
      >>>>> myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
      >>>>>
      >>>>> // Update totalRecords on the fly with value from server
      >>>>> myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
      >>>>> oPayload.totalRecords = oResponse.meta.totalRecords;
      >>>>> var rowsperpg = pag.getRowsPerPage();
      >>>>> var noofpages = oPayload.totalRecords/rowsperpg;
      >>>>> if (noofpages>1){
      >>>>> expandSearch(ind);
      >>>>> }
      >>>>> return oPayload;
      >>>>> }
      >>>>>
      >>>>>
      >>>>> // Override function for custom server-side sorting
      >>>>> myDataTable.sortColumn = function(oColumn) {
      >>>>> // Default descending
      >>>>> var sDir = "asc"
      >>>>>
      >>>>> // If already sorted, sort in opposite direction
      >>>>> if(oColumn.key === myDataTable.get("sortedBy").key) {
      >>>>> sDir = (myDataTable.get("sortedBy").dir === YAHOO.widget.DataTable.CLASS_ASC) ?
      >>>>> "desc" : "asc";
      >>>>> }
      >>>>>
      >>>>> // Pass in sort values to server request
      >>>>> var newRequest = "&search="+search+"&query="+texttosearch+"&insearch="+textinsearch+"&sort=" + oColumn.key + "&dir=" + sDir + "&startIndex=0"+"&results=25";
      >>>>>
      >>>>> // Create callback for data request
      >>>>> var oCallback = {
      >>>>> success : function(oRequest, oResponse, oPayload){
      >>>>> myDataTable.onDataReturnInitializeTable(oRequest, oResponse, oPayload);
      >>>>> var newState = {
      >>>>> totalRecords : oPayload.totalRecords
      >>>>> };
      >>>>> pag.setState(newState);
      >>>>> },
      >>>>>
      >>>>> scope: myDataTable,
      >>>>> argument: {
      >>>>> // Pass in sort values so UI can be updated in callback function
      >>>>> sorting: {
      >>>>> key: oColumn.key,
      >>>>> dir: (sDir === "desc") ? YAHOO.widget.DataTable.CLASS_DESC : YAHOO.widget.DataTable.CLASS_ASC
      >>>>> }
      >>>>> }
      >>>>> }
      >>>>>
      >>>>> // Send the request
      >>>>> myDataSource.sendRequest(newRequest, oCallback,myDataTable,true);
      >>>>> };
      >>>>>
      >>>>> return {
      >>>>> ds: myDataSource,
      >>>>> dt: myDataTable
      >>>>> };
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>> }
      >>>>>
      >>>>> }
      >>>>> });
      >>>>> }
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>> ------------------------------------
      >>>>>
      >>>>> Yahoo! Groups Links
      >>>>>
      >>>>>
      >>>>>
      >>>>> ------------------------------------------------------------------------
      >>>>>
      >>>>>
      >>>>> No virus found in this incoming message.
      >>>>> Checked by AVG - www.avg.com
      >>>>> Version: 9.0.698 / Virus Database: 270.14.47/2478 - Release Date: 11/03/09 08:36:00
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>
      >>>
      >>> ------------------------------------
      >>>
      >>> Yahoo! Groups Links
      >>>
      >>>
      >>>
      >>> ------------------------------------------------------------------------
      >>>
      >>>
      >>> No virus found in this incoming message.
      >>> Checked by AVG - www.avg.com
      >>> Version: 9.0.698 / Virus Database: 270.14.47/2478 - Release Date: 11/03/09 08:36:00
      >>>
      >>>
      >>>
      >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 9.0.698 / Virus Database: 270.14.48/2479 - Release Date: 11/03/09 20:38:00
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.