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

DataTable and Joomla

Expand Messages
  • chiubo
    Hi, I am trying to implement a YUI datatable in Joomla. I just copy and passed the Progressive Enhancement sample. Everything works fine but the sorting of
    Message 1 of 11 , Mar 27, 2009
    • 0 Attachment
      Hi,

      I am trying to implement a YUI datatable in Joomla. I just copy and passed the Progressive Enhancement sample. Everything works fine but the sorting of columns. When I click of the column header only the first column is being sorted. No matter which column I click it will only act on the first column.

      Anything from the Joolma framework could possibly causing this? CSS? Any way or tools I can use the identify the root cause? Is it a know YUI issue?

      Any help is highly apprciated.

      Many thanks,
      Keith
    • Mike Prince
      Hi Keith I have several tables (as well as other YUI components) working perfectly inside Joomla (www.bubo.org/listing). Maybe you could post your code? Cheers
      Message 2 of 11 , Mar 28, 2009
      • 0 Attachment
        Hi Keith

        I have several tables (as well as other YUI components) working perfectly inside Joomla (www.bubo.org/listing). Maybe you could post your code?

        Cheers
        -- Mike --

        --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
        >
        > Hi,
        >
        > I am trying to implement a YUI datatable in Joomla. I just copy and passed the Progressive Enhancement sample. Everything works fine but the sorting of columns. When I click of the column header only the first column is being sorted. No matter which column I click it will only act on the first column.
        >
        > Anything from the Joolma framework could possibly causing this? CSS? Any way or tools I can use the identify the root cause? Is it a know YUI issue?
        >
        > Any help is highly apprciated.
        >
        > Many thanks,
        > Keith
        >
      • chiubo
        ... Below is the code listing. It is copied and pasted from the yahoo sample. ____________________________________________________
        Message 3 of 11 , Mar 29, 2009
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
          >
          > Hi Keith
          >
          > I have several tables (as well as other YUI components) working perfectly inside Joomla (www.bubo.org/listing). Maybe you could post your code?
          >
          > Cheers
          > -- Mike --

          Below is the code listing. It is copied and pasted from the yahoo sample.

          ____________________________________________________
          <?php
          class HTML_reviews
          {
          function showQueryForm($keyword, $option)
          {
          ?>

          <table class="nopad">
          <tr valign="top">
          <td><form action="index.php?option=<?php echo $option ?>" method="post">
          <fieldset class="adminform">
          <legend>Keyword Suggestion Tools</legend>
          <br />
          <table width="500" border="0" cellpadding="1" cellspacing="1">
          <tr>
          <td> </td>
          <td> </td>
          </tr>
          <tr>
          <th width="136" scope="row" align="right">Keyword:</th>
          <td width="370"><label>
          <input type="text" name="keyword" id="keyword" value="<?php echo $keyword ?>"/>
          <input type="submit" name="submit" id="submit" value="Suggest Keyword" />
          </label></td>
          </tr>
          <tr>
          <td> </td>
          <td> </td>
          </tr>
          </table>
          <input type="hidden" name="task" value="keyterm" />
          </form>
          </fieldset></td>
          </tr>
          </table>
          <?php
          }

          function showKeyterms($keyterms, $maxterms = 20, $option)
          {
          }
          }
          ?>
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
          <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
          <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
          <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>

          <div id="markup">
          <table id="accounts">
          <thead>
          <tr>
          <th>Due Date</th>
          <th>Account Number</th>
          <th>Quantity</th>
          <th>Amount Due</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <td>1/23/1999</td>
          <td>29e8548592d8c82</td>
          <td>12</td>
          <td>$150.00</td>
          </tr>
          <tr>
          <td>5/19/1999</td>
          <td>83849</td>
          <td>8</td>
          <td>$60.00</td>
          </tr>
          <tr>
          <td>8/9/1999</td>
          <td>11348</td>
          <td>1</td>
          <td>$34.99</td>
          </tr>
          <tr>
          <td>1/23/2000</td>
          <td>29e8548592d8c82</td>
          <td>10</td>
          <td>$1.00</td>
          </tr>
          <tr>
          <td>4/28/2000</td>
          <td>37892857482836437378273</td>
          <td>123</td>
          <td>$33.32</td>
          </tr>
          <tr>
          <td>1/23/2001</td>
          <td>83849</td>
          <td>5</td>
          <td>$15.00</td>
          </tr>
          <tr>
          <td>9/30/2001</td>
          <td>224747</td>
          <td>14</td>
          <td>$56.78</td>
          </tr>
          </tbody>
          </table>
          </div>


          <script type="text/javascript">
          YAHOO.util.Event.addListener(window, "load", function() {
          YAHOO.example.EnhanceFromMarkup = function() {
          var myColumnDefs = [
          {key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
          {key:"account",label:"Account Number", sortable:true},
          {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
          {key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
          ];

          var parseNumberFromCurrency = function(sString) {
          // Remove dollar sign and make it a float
          return parseFloat(sString.substring(1));
          };

          var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
          myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
          myDataSource.responseSchema = {
          fields: [{key:"due", parser:"date"},
          {key:"account"},
          {key:"quantity", parser:"number"},
          {key:"amount", parser:parseNumberFromCurrency} // point to a custom parser
          ]
          };

          var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
          {caption:"Example: Progressively Enhanced Table from Markup",
          sortedBy:{key:"due",dir:"desc"}}
          );

          return {
          oDS: myDataSource,
          oDT: myDataTable
          };
          }();
          });
          </script>
          <?php
          // }
          //}
          ?>
        • Mike Prince
          How do you get this into Joomla?
          Message 4 of 11 , Mar 30, 2009
          • 0 Attachment
            How do you get this into Joomla?

            --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
            > >
            > > Hi Keith
            > >
            > > I have several tables (as well as other YUI components) working perfectly inside Joomla (www.bubo.org/listing). Maybe you could post your code?
            > >
            > > Cheers
            > > -- Mike --
            >
            > Below is the code listing. It is copied and pasted from the yahoo sample.
            >
            > ____________________________________________________
            > <?php
            > class HTML_reviews
            > {
            > function showQueryForm($keyword, $option)
            > {
            > ?>
            >
            > <table class="nopad">
            > <tr valign="top">
            > <td><form action="index.php?option=<?php echo $option ?>" method="post">
            > <fieldset class="adminform">
            > <legend>Keyword Suggestion Tools</legend>
            > <br />
            > <table width="500" border="0" cellpadding="1" cellspacing="1">
            > <tr>
            > <td> </td>
            > <td> </td>
            > </tr>
            > <tr>
            > <th width="136" scope="row" align="right">Keyword:</th>
            > <td width="370"><label>
            > <input type="text" name="keyword" id="keyword" value="<?php echo $keyword ?>"/>
            > <input type="submit" name="submit" id="submit" value="Suggest Keyword" />
            > </label></td>
            > </tr>
            > <tr>
            > <td> </td>
            > <td> </td>
            > </tr>
            > </table>
            > <input type="hidden" name="task" value="keyterm" />
            > </form>
            > </fieldset></td>
            > </tr>
            > </table>
            > <?php
            > }
            >
            > function showKeyterms($keyterms, $maxterms = 20, $option)
            > {
            > }
            > }
            > ?>
            > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
            > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
            > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
            > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
            > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
            >
            > <div id="markup">
            > <table id="accounts">
            > <thead>
            > <tr>
            > <th>Due Date</th>
            > <th>Account Number</th>
            > <th>Quantity</th>
            > <th>Amount Due</th>
            > </tr>
            > </thead>
            > <tbody>
            > <tr>
            > <td>1/23/1999</td>
            > <td>29e8548592d8c82</td>
            > <td>12</td>
            > <td>$150.00</td>
            > </tr>
            > <tr>
            > <td>5/19/1999</td>
            > <td>83849</td>
            > <td>8</td>
            > <td>$60.00</td>
            > </tr>
            > <tr>
            > <td>8/9/1999</td>
            > <td>11348</td>
            > <td>1</td>
            > <td>$34.99</td>
            > </tr>
            > <tr>
            > <td>1/23/2000</td>
            > <td>29e8548592d8c82</td>
            > <td>10</td>
            > <td>$1.00</td>
            > </tr>
            > <tr>
            > <td>4/28/2000</td>
            > <td>37892857482836437378273</td>
            > <td>123</td>
            > <td>$33.32</td>
            > </tr>
            > <tr>
            > <td>1/23/2001</td>
            > <td>83849</td>
            > <td>5</td>
            > <td>$15.00</td>
            > </tr>
            > <tr>
            > <td>9/30/2001</td>
            > <td>224747</td>
            > <td>14</td>
            > <td>$56.78</td>
            > </tr>
            > </tbody>
            > </table>
            > </div>
            >
            >
            > <script type="text/javascript">
            > YAHOO.util.Event.addListener(window, "load", function() {
            > YAHOO.example.EnhanceFromMarkup = function() {
            > var myColumnDefs = [
            > {key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
            > {key:"account",label:"Account Number", sortable:true},
            > {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
            > {key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
            > ];
            >
            > var parseNumberFromCurrency = function(sString) {
            > // Remove dollar sign and make it a float
            > return parseFloat(sString.substring(1));
            > };
            >
            > var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
            > myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
            > myDataSource.responseSchema = {
            > fields: [{key:"due", parser:"date"},
            > {key:"account"},
            > {key:"quantity", parser:"number"},
            > {key:"amount", parser:parseNumberFromCurrency} // point to a custom parser
            > ]
            > };
            >
            > var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
            > {caption:"Example: Progressively Enhanced Table from Markup",
            > sortedBy:{key:"due",dir:"desc"}}
            > );
            >
            > return {
            > oDS: myDataSource,
            > oDT: myDataTable
            > };
            > }();
            > });
            > </script>
            > <?php
            > // }
            > //}
            > ?>
            >
          • chiubo
            I created a joomla component. When this php is run independently, it works fine. When it is called a part of the component, the sorting function will broke.
            Message 5 of 11 , Mar 30, 2009
            • 0 Attachment
              I created a joomla component. When this php is run independently, it works fine. When it is called a part of the component, the sorting function will broke.

              --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
              >
              > How do you get this into Joomla?
              >
              > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
              > >
            • Mike Prince
              I ve not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can t see why a component should be
              Message 6 of 11 , Mar 30, 2009
              • 0 Attachment
                I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?

                --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
                >
                > I created a joomla component. When this php is run independently, it works fine. When it is called a part of the component, the sorting function will broke.
                >
                > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                > >
                > > How do you get this into Joomla?
                > >
                > > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
                > > >
                >
              • chiubo
                Hi Mike, Here is the url: http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui many thanks for your help. Keith
                Message 7 of 11 , Mar 30, 2009
                • 0 Attachment
                  Hi Mike,

                  Here is the url:

                  http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui

                  many thanks for your help.
                  Keith

                  --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
                  >
                  > I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?
                • Mike Prince
                  Hi Keith I m not familiar with using progressive markup but I ve had a quick look at the source of the linked page and it doesn t seem to relate to your pasted
                  Message 8 of 11 , Mar 31, 2009
                  • 0 Attachment
                    Hi Keith

                    I'm not familiar with using progressive markup but I've had a quick look at the source of the linked page and it doesn't seem to relate to your pasted code. In your pasted code you have actual table cell values entered, but your code has just 'Loading...' values and updates the HTML DOM elements dynamically. The sorting is sorting the underlying data source, which is actually always 'Loading...' and not the values you've replaced it with.

                    The fact that this is inside Joomla is irrelevant in this case.

                    Cheers
                    -- Mike --



                    --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
                    >
                    > Hi Mike,
                    >
                    > Here is the url:
                    >
                    > http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui
                    >
                    > many thanks for your help.
                    > Keith
                    >
                    > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                    > >
                    > > I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?
                    >
                  • chiubo
                    Hi Mike, Sorry for the confusion. Please look at the following url instead. http://203.194.205.238/index.php?option=com_keyterms Thanks, Keith
                    Message 9 of 11 , Mar 31, 2009
                    • 0 Attachment
                      Hi Mike,

                      Sorry for the confusion. Please look at the following url instead.

                      http://203.194.205.238/index.php?option=com_keyterms

                      Thanks,
                      Keith
                      --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
                      >
                      > Hi Keith
                      >
                      > I'm not familiar with using progressive markup but I've had a quick look at the source of the linked page and it doesn't seem to relate to your pasted code. In your pasted code you have actual table cell values entered, but your code has just 'Loading...' values and updates the HTML DOM elements dynamically. The sorting is sorting the underlying data source, which is actually always 'Loading...' and not the values you've replaced it with.
                      >
                      > The fact that this is inside Joomla is irrelevant in this case.
                      >
                      > Cheers
                      > -- Mike --
                      >
                      >
                      >
                      > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
                      > >
                      > > Hi Mike,
                      > >
                      > > Here is the url:
                      > >
                      > > http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui
                      > >
                      > > many thanks for your help.
                      > > Keith
                      > >
                      > > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                      > > >
                      > > > I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?
                      > >
                      >
                    • chiubo
                      Hi Mike, I found that if the result datatable div is put inside a table column i.e. . It will cause the problem. Regards, Keith
                      Message 10 of 11 , Mar 31, 2009
                      • 0 Attachment
                        Hi Mike,

                        I found that if the result datatable div is put inside a table column i.e. <td><div name="markup"></td>. It will cause the problem.

                        Regards,
                        Keith

                        --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
                        >
                        > Hi Mike,
                        >
                        > Sorry for the confusion. Please look at the following url instead.
                        >
                        > http://203.194.205.238/index.php?option=com_keyterms
                        >
                        > Thanks,
                        > Keith
                        > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                        > >
                        > > Hi Keith
                        > >
                        > > I'm not familiar with using progressive markup but I've had a quick look at the source of the linked page and it doesn't seem to relate to your pasted code. In your pasted code you have actual table cell values entered, but your code has just 'Loading...' values and updates the HTML DOM elements dynamically. The sorting is sorting the underlying data source, which is actually always 'Loading...' and not the values you've replaced it with.
                        > >
                        > > The fact that this is inside Joomla is irrelevant in this case.
                        > >
                        > > Cheers
                        > > -- Mike --
                        > >
                        > >
                        > >
                        > > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
                        > > >
                        > > > Hi Mike,
                        > > >
                        > > > Here is the url:
                        > > >
                        > > > http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui
                        > > >
                        > > > many thanks for your help.
                        > > > Keith
                        > > >
                        > > > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                        > > > >
                        > > > > I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?
                        > > >
                        > >
                        >
                      • Mike Prince
                        Was just about to reply with that! Not sure why this should be a restriction: I d suggest you file a bug report for it. Cheers -- Mike --
                        Message 11 of 11 , Apr 1, 2009
                        • 0 Attachment
                          Was just about to reply with that! Not sure why this should be a restriction: I'd suggest you file a bug report for it.

                          Cheers
                          -- Mike --

                          --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@...> wrote:
                          >
                          > Hi Mike,
                          >
                          > I found that if the result datatable div is put inside a table column i.e. <td><div name="markup"></td>. It will cause the problem.
                          >
                          > Regards,
                          > Keith
                          >
                          > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
                          > >
                          > > Hi Mike,
                          > >
                          > > Sorry for the confusion. Please look at the following url instead.
                          > >
                          > > http://203.194.205.238/index.php?option=com_keyterms
                          > >
                          > > Thanks,
                          > > Keith
                          > > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                          > > >
                          > > > Hi Keith
                          > > >
                          > > > I'm not familiar with using progressive markup but I've had a quick look at the source of the linked page and it doesn't seem to relate to your pasted code. In your pasted code you have actual table cell values entered, but your code has just 'Loading...' values and updates the HTML DOM elements dynamically. The sorting is sorting the underlying data source, which is actually always 'Loading...' and not the values you've replaced it with.
                          > > >
                          > > > The fact that this is inside Joomla is irrelevant in this case.
                          > > >
                          > > > Cheers
                          > > > -- Mike --
                          > > >
                          > > >
                          > > >
                          > > > --- In ydn-javascript@yahoogroups.com, "chiubo" <chiubo@> wrote:
                          > > > >
                          > > > > Hi Mike,
                          > > > >
                          > > > > Here is the url:
                          > > > >
                          > > > > http://www.es3o.com/index.php?option=com_keyterms&task=keyterm&keyword=yui
                          > > > >
                          > > > > many thanks for your help.
                          > > > > Keith
                          > > > >
                          > > > > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
                          > > > > >
                          > > > > > I've not used components but have directly the code in content items and modules (using jumi), and used wrappers. Can't see why a component should be different. Can you post a URL?
                          > > > >
                          > > >
                          > >
                          >
                        Your message has been successfully submitted and would be delivered to recipients shortly.