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

Implementing YUI Datatable, menu, layout, tabview & loader

Expand Messages
  • ikaro751
    Hello, After studying the examples and the complex app (http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html) I started building my first web
    Message 1 of 5 , Jun 29, 2009
    • 0 Attachment
      Hello,

      After studying the examples and the complex app (http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html) I started building my first web app. I have to admit I'm not a javascript guru and there are parts I find very complex.

      I could implement loader, menu, layout and tabview sucessfully; now I need to load datables using the menu onClick event, however although the datatable is shown and the rows can be seen, it seems the data is not loaded and foreing character are not correctly displayed: I'm loading the data from a ASP that creates XML http://investigacion.ilce.edu.mx/getQryResults.asp?cat=almacen)

      I scripted the following code in order to do this

      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,
      Sel = YAHOO.util.Selector;
      Event.onAvailable("menuajax", function() {
      var oMenuBar = new YAHOO.widget.MenuBar("menuajax", { autosubmenudisplay: true, hidedelay: 750, lazyload: true });
      oMenuBar.render();
      oMenuBar.show();

      //Creación de tabs
      YAHOO.example.app.tabView = new YAHOO.widget.TabView("tabContainer");


      function onClick(p_sType, p_aArgs) {
      var oEvent = p_aArgs[0], // DOM Event
      oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance
      // Alert the type of the DOM event

      // If a MenuItem was clicked, alert the value of its text label
      if (oMenuItem) {
      var tab0 = YAHOO.example.app.tabView.getTab(0);
      //Establece el título del tabs con el label del menú
      YAHOO.util.Get.script('datatable.js', { autopurge: true });
      tab0.set('label', oMenuItem.cfg.getProperty("text"));
      YAHOO.example.app.dataTable= initDataTableAlmacen();
      }
      }

      oMenuBar.subscribe("click", onClick);
      });
      })();

      ----------------------------------------

      The code in 'datatable.js' is:

      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;
      YAHOO.widget.DataTable.MSG_EMPTY = "Este catálogo no contiene registros";

      var initDataTableAlmacen = function() {
      var myDataSource, myDataTable;
      var connectionCallback = {
      success: function(o) {
      var xmlDoc = o.responseXML;
      var myColumnDefs = [
      {key:"",
      formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter {key:"Clave_almacen", label:"Clave almacén", sortable:true, width:0},
      {key:"Almacen", label:"Almacén", sortable:true, width:125}, {key:"Direccion",label:"Dirección", sortable:true, width:125} ];

      myDataSource = new YAHOO.util.DataSource(xmlDoc);
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
      myDataSource.responseSchema = { resultNode: "registro",
      fields: ["clave_almacen","almacen","direccion"]
      };

      myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, { scrollable: true, height: '90%', width: '100%' });
      },
      failure: function(o) {
      alert("Error en el módulo getQryResults.asp?cat=almacen");
      }
      };

      var getXML = YAHOO.util.Connect.asyncRequest("GET",
      "getQryResults.asp?cat=almacen", connectionCallback);

      return {oDS: myDataSource,oDT: myDataTable};
      }();

      })();

      The full example is at http://investigacion.ilce.edu.mx/inventario/inventarios.html

      Could someone please help me? What is wrong?
    • Satyam
      I ve just run the full example from Firefox with Firebug set to break on all errors . It stopped in line 29 of menu.js complaining that initDataTableAlmacen
      Message 2 of 5 , Jun 29, 2009
      • 0 Attachment
        I've just run the full example from Firefox with Firebug set to "break
        on all errors". It stopped in line 29 of menu.js complaining that
        initDataTableAlmacen does not exist. I would say that either the load
        order is incorrect or there was a compilation error in
        initDataTableAlmacen that prevented it from being defined. I would
        suggest you run each JavaScript file through JSLint (www.jslint.org)
        which will detect any fatal syntax errors. Then, if you are not using
        it yet, do download Firefox and Firebug. They are free and work great.
        I just run them on your example and it threw the error above right from
        the start.

        As for loading an XML table, if you were using the example for Local XML
        Data, please don't. The DataSource can load XML right by itself, it
        does not need the data to be loaded first via Connection manager and
        then into the DataTable. The purpose of that example is to show how to
        load LOCAL XML data, and since the only way to have XML locally is to
        load it first, it does the two step thing which is a total waste of
        time. Use this example instead:

        http://developer.yahoo.com/yui/examples/datatable/dt_xhrpostxml.html

        and you may turn it from POST to GET just by skipping this line:

        this.myDataSource.connMethodPost = true;

        Suerte

        Satyam


        ikaro751 escribió:
        > Hello,
        >
        > After studying the examples and the complex app (http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html) I started building my first web app. I have to admit I'm not a javascript guru and there are parts I find very complex.
        >
        > I could implement loader, menu, layout and tabview sucessfully; now I need to load datables using the menu onClick event, however although the datatable is shown and the rows can be seen, it seems the data is not loaded and foreing character are not correctly displayed: I'm loading the data from a ASP that creates XML http://investigacion.ilce.edu.mx/getQryResults.asp?cat=almacen)
        >
        > I scripted the following code in order to do this
        >
        > (function() {
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event,
        > Sel = YAHOO.util.Selector;
        > Event.onAvailable("menuajax", function() {
        > var oMenuBar = new YAHOO.widget.MenuBar("menuajax", { autosubmenudisplay: true, hidedelay: 750, lazyload: true });
        > oMenuBar.render();
        > oMenuBar.show();
        >
        > //Creación de tabs
        > YAHOO.example.app.tabView = new YAHOO.widget.TabView("tabContainer");
        >
        >
        > function onClick(p_sType, p_aArgs) {
        > var oEvent = p_aArgs[0], // DOM Event
        > oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance
        > // Alert the type of the DOM event
        >
        > // If a MenuItem was clicked, alert the value of its text label
        > if (oMenuItem) {
        > var tab0 = YAHOO.example.app.tabView.getTab(0);
        > //Establece el título del tabs con el label del menú
        > YAHOO.util.Get.script('datatable.js', { autopurge: true });
        > tab0.set('label', oMenuItem.cfg.getProperty("text"));
        > YAHOO.example.app.dataTable= initDataTableAlmacen();
        > }
        > }
        >
        > oMenuBar.subscribe("click", onClick);
        > });
        > })();
        >
        > ----------------------------------------
        >
        > The code in 'datatable.js' is:
        >
        > (function() {
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event;
        > YAHOO.widget.DataTable.MSG_EMPTY = "Este catálogo no contiene registros";
        >
        > var initDataTableAlmacen = function() {
        > var myDataSource, myDataTable;
        > var connectionCallback = {
        > success: function(o) {
        > var xmlDoc = o.responseXML;
        > var myColumnDefs = [
        > {key:"",
        > formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter {key:"Clave_almacen", label:"Clave almacén", sortable:true, width:0},
        > {key:"Almacen", label:"Almacén", sortable:true, width:125}, {key:"Direccion",label:"Dirección", sortable:true, width:125} ];
        >
        > myDataSource = new YAHOO.util.DataSource(xmlDoc);
        > myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
        > myDataSource.responseSchema = { resultNode: "registro",
        > fields: ["clave_almacen","almacen","direccion"]
        > };
        >
        > myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, { scrollable: true, height: '90%', width: '100%' });
        > },
        > failure: function(o) {
        > alert("Error en el módulo getQryResults.asp?cat=almacen");
        > }
        > };
        >
        > var getXML = YAHOO.util.Connect.asyncRequest("GET",
        > "getQryResults.asp?cat=almacen", connectionCallback);
        >
        > return {oDS: myDataSource,oDT: myDataTable};
        > }();
        >
        > })();
        >
        > The full example is at http://investigacion.ilce.edu.mx/inventario/inventarios.html
        >
        > Could someone please help me? What is wrong?
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.5.339 / Virus Database: 270.12.94/2208 - Release Date: 06/29/09 05:54:00
        >
        >
      • ikaro751
        Thank you Satyam! I installed firebug, I fixed menu.js so it doesn t call initDataTableAlmacen anymore, but only loads datatable.js I also changed datatable.js
        Message 3 of 5 , Jun 29, 2009
        • 0 Attachment
          Thank you Satyam!

          I installed firebug, I fixed menu.js so it doesn't call initDataTableAlmacen anymore, but only loads datatable.js

          I also changed datatable.js as you wisely suggested me:

          DATATABLE.JS:

          (function() {
          var Dom = YAHOO.util.Dom,
          Event = YAHOO.util.Event;
          YAHOO.widget.DataTable.MSG_EMPTY = "Este catálogo no contiene registros";
          var myColumnDefs = [
          {key:"", formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter
          {key:"Clave_almacen", label:"Clave almacén", sortable:true, width:0},
          {key:"Almacen", label:"Almacén", sortable:true, width:125},
          {key:"Direccion",label:"Dirección", sortable:true, width:125}
          ];

          var myDataSource = new YAHOO.util.DataSource("getQryResults.asp?cat=almacen");
          myDataSource.connMethodPost = false;
          myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
          myDataSource.responseSchema = {
          resultNode: "registro",
          fields: ["clave_almacen","almacen","direccion"]};

          var myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, { scrollable: true, height: '90%', width: '100%' } );
          YAHOO.example.app.dataTable=myDataTable;
          }
          )();


          However it still is not loading data; firebug displays a error message at datatable-min.js line 27

          What can it be?
        • Daniel
          Hi, I m isolating the problem testing XML Data Over XHR With GET. The datatable appears, also the rows; however the data don t appear in it
          Message 4 of 5 , Jun 30, 2009
          • 0 Attachment
            Hi, I'm isolating the problem testing XML Data Over XHR With GET.
             
            The datatable appears, also the rows; however the data don't appear in it
            I have been debugging with firebug, but I don't see an error. I think the error is in the XML file (http://investigacion.ilce.edu.mx/inventario/getQryResults.asp?cat=almacen)
             
            Best egards

             
            2009/6/29 ikaro751 <ikaro75@...>


            Hello,

            After studying the examples and the complex app (http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html) I started building my first web app. I have to admit I'm not a javascript guru and there are parts I find very complex.

            I could implement loader, menu, layout and tabview sucessfully; now I need to load datables using the menu onClick event, however although the datatable is shown and the rows can be seen, it seems the data is not loaded and foreing character are not correctly displayed: I'm loading the data from a ASP that creates XML http://investigacion.ilce.edu.mx/getQryResults.asp?cat=almacen)

            I scripted the following code in order to do this

            (function() {
            var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            Sel = YAHOO.util.Selector;
            Event.onAvailable("menuajax", function() {
            var oMenuBar = new YAHOO.widget.MenuBar("menuajax", { autosubmenudisplay: true, hidedelay: 750, lazyload: true });
            oMenuBar.render();
            oMenuBar.show();

            //Creación de tabs
            YAHOO.example.app.tabView = new YAHOO.widget.TabView("tabContainer");


            function onClick(p_sType, p_aArgs) {
            var oEvent = p_aArgs[0], // DOM Event
            oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance
            // Alert the type of the DOM event

            // If a MenuItem was clicked, alert the value of its text label
            if (oMenuItem) {
            var tab0 = YAHOO.example.app.tabView.getTab(0);
            //Establece el título del tabs con el label del menú
            YAHOO.util.Get.script('datatable.js', { autopurge: true });
            tab0.set('label', oMenuItem.cfg.getProperty("text"));
            YAHOO.example.app.dataTable= initDataTableAlmacen();
            }
            }

            oMenuBar.subscribe("click", onClick);
            });
            })();

            ----------------------------------------

            The code in 'datatable.js' is:

            (function() {
            var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event;
            YAHOO.widget.DataTable.MSG_EMPTY = "Este catálogo no contiene registros";

            var initDataTableAlmacen = function() {
            var myDataSource, myDataTable;
            var connectionCallback = {
            success: function(o) {
            var xmlDoc = o.responseXML;
            var myColumnDefs = [
            {key:"",
            formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter {key:"Clave_almacen", label:"Clave almacén", sortable:true, width:0},
            {key:"Almacen", label:"Almacén", sortable:true, width:125}, {key:"Direccion",label:"Dirección", sortable:true, width:125} ];

            myDataSource = new YAHOO.util.DataSource(xmlDoc);
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
            myDataSource.responseSchema = { resultNode: "registro",
            fields: ["clave_almacen","almacen","direccion"]
            };

            myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, { scrollable: true, height: '90%', width: '100%' });
            },
            failure: function(o) {
            alert("Error en el módulo getQryResults.asp?cat=almacen");
            }
            };

            var getXML = YAHOO.util.Connect.asyncRequest("GET",
            "getQryResults.asp?cat=almacen", connectionCallback);

            return {oDS: myDataSource,oDT: myDataTable};
            }();

            })();

            The full example is at http://investigacion.ilce.edu.mx/inventario/inventarios.html

            Could someone please help me? What is wrong?


          • Daniel
            Hi, I found the ploblem, the keys are case-sensitive; if the XML is defined as clave_almacen, then key in myColumnDefs must be the same. I had Clave_almacen
            Message 5 of 5 , Jun 30, 2009
            • 0 Attachment
              Hi, I found the ploblem, the keys are case-sensitive; if the XML is defined as clave_almacen, then key in myColumnDefs must be the same. I had "Clave_almacen"
               
                       var myColumnDefs = [
                 {key:"", formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter   
                 {key:"clave_almacen", label:"Clave almacen", sortable:true, width:0},
                 {key:"almacen", label:"Almacen", sortable:true, width:125},
                 {key:"direccion",label:"Direccion", sortable:true, width:125}
                      ];
              Saludos!

              2009/6/30 Daniel <ikaro75@...>
              Hi, I'm isolating the problem testing XML Data Over XHR With GET.
               
              The datatable appears, also the rows; however the data don't appear in it
              I have been debugging with firebug, but I don't see an error. I think the error is in the XML file (http://investigacion.ilce.edu.mx/inventario/getQryResults.asp?cat=almacen)
               
              Best egards

               
              2009/6/29 ikaro751 <ikaro75@...>



              Hello,

              After studying the examples and the complex app (http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html) I started building my first web app. I have to admit I'm not a javascript guru and there are parts I find very complex.

              I could implement loader, menu, layout and tabview sucessfully; now I need to load datables using the menu onClick event, however although the datatable is shown and the rows can be seen, it seems the data is not loaded and foreing character are not correctly displayed: I'm loading the data from a ASP that creates XML http://investigacion.ilce.edu.mx/getQryResults.asp?cat=almacen)

              I scripted the following code in order to do this

              (function() {
              var Dom = YAHOO.util.Dom,
              Event = YAHOO.util.Event,
              Sel = YAHOO.util.Selector;
              Event.onAvailable("menuajax", function() {
              var oMenuBar = new YAHOO.widget.MenuBar("menuajax", { autosubmenudisplay: true, hidedelay: 750, lazyload: true });
              oMenuBar.render();
              oMenuBar.show();

              //Creación de tabs
              YAHOO.example.app.tabView = new YAHOO.widget.TabView("tabContainer");


              function onClick(p_sType, p_aArgs) {
              var oEvent = p_aArgs[0], // DOM Event
              oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance
              // Alert the type of the DOM event

              // If a MenuItem was clicked, alert the value of its text label
              if (oMenuItem) {
              var tab0 = YAHOO.example.app.tabView.getTab(0);
              //Establece el título del tabs con el label del menú
              YAHOO.util.Get.script('datatable.js', { autopurge: true });
              tab0.set('label', oMenuItem.cfg.getProperty("text"));
              YAHOO.example.app.dataTable= initDataTableAlmacen();
              }
              }

              oMenuBar.subscribe("click", onClick);
              });
              })();

              ----------------------------------------

              The code in 'datatable.js' is:

              (function() {
              var Dom = YAHOO.util.Dom,
              Event = YAHOO.util.Event;
              YAHOO.widget.DataTable.MSG_EMPTY = "Este catálogo no contiene registros";

              var initDataTableAlmacen = function() {
              var myDataSource, myDataTable;
              var connectionCallback = {
              success: function(o) {
              var xmlDoc = o.responseXML;
              var myColumnDefs = [
              {key:"",
              formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter {key:"Clave_almacen", label:"Clave almacén", sortable:true, width:0},
              {key:"Almacen", label:"Almacén", sortable:true, width:125}, {key:"Direccion",label:"Dirección", sortable:true, width:125} ];

              myDataSource = new YAHOO.util.DataSource(xmlDoc);
              myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
              myDataSource.responseSchema = { resultNode: "registro",
              fields: ["clave_almacen","almacen","direccion"]
              };

              myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, { scrollable: true, height: '90%', width: '100%' });
              },
              failure: function(o) {
              alert("Error en el módulo getQryResults.asp?cat=almacen");
              }
              };

              var getXML = YAHOO.util.Connect.asyncRequest("GET",
              "getQryResults.asp?cat=almacen", connectionCallback);

              return {oDS: myDataSource,oDT: myDataTable};
              }();

              })();

              The full example is at http://investigacion.ilce.edu.mx/inventario/inventarios.html

              Could someone please help me? What is wrong?



            Your message has been successfully submitted and would be delivered to recipients shortly.