SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cycling through records on the client side

    I'm developing a site for my new Website design business and am currently working on the portfolio section. I want to be able to let the user view one project at a time, and have access to some 'Previous' and 'Next' buttons so they can continuously cycle through the records in a loop.

    I don't want to do this on the server side as I want to keep the page extension as .html - so I suppose it will have to be JavaScript. I also do not want several pages (i.e. one for each project) as I have limited space

    Thanks in advance

    -Sam
    Sam Hastings

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you can use a server-side script like PHP, then create a new .php file that generates javascript instead of HTML, then read the results (like out of a database) into a javascript array. Then all you have to do is loop through each member of the array to generate your records. Use this line of code to include your PHP-generated JS file.
    Code:
    <script type="text/javascript" language="javascript" src="myJSfile.php"></script>
    This can give you the dynamic content you want while keeping your .html extension.

    --Vinnie

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the idea - I never thought of that

    I'll give it a go tonight

    -Sam
    Sam Hastings

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't use that method, I will see if I can digup an old demo using inline xml/xslt. This will give you much more control over sorting your portfolio section:P. (This also dont require a server side language)

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't find the one I had previously done, however i did this, although not quite finished as I got a bit bored of it any way incase you want to play about with it to get it working properly, heres what I did so far...

    ps in-order to make this valid, you would also need to create a valid dtd or schema to go with it:D

    PHP Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <!--
      I sugest you read all comments that begin with "NOTE://" before use
     -->

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
        <title>Inline XML / XSL filter</title>

        <!-- meta data -->

        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta http-equiv="content-style-type" content="text/css" />
        <meta http-equiv="content-language" content="en" />

        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="expires" content="-1" />
        <meta http-equiv="cache-control" content="no-cache" />

        <meta name="author" content="Andrew Mark Johnstone" />
        <meta name="publisher" content="Andrew Mark Johnstone" />
        <meta name="generator" content="notepad" />

        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="date" content="2002-02-19" />

        <meta name="copyright" content="" />
        <meta name="rating" content="general" />

        <meta name="robots" content="index,follow,all" />
        <meta name="MSSmartTagsPreventParsing" content="true" />

        <link rel="shortcut icon" href="/favicon.ico" />

        <link rel="contents" href="cover.html#minitoc" />


        <style type="text/css">
        <!--

          /*~~~~~~~~~~~~*/
          /*  Grouping  */
          /*~~~~~~~~~~~~*/

          body, table, tr, thead, tbody, tfoot, col, colgroup, td, th, caption { }

          /*~~~~~~~~~~~~~~~~~~~~~~*/
          /*  Universal selector  */
          /*~~~~~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~*/
          /*  Type selectors  */
          /*~~~~~~~~~~~~~~~~~~*/

          body     { }
          table    { display: table              ;  }
          tr       { display: table-row          ;  }
          thead    { display: table-header-group ;  }
          tbody    { display: table-row-group    ;  }
          tfoot    { display: table-footer-group ;  }
          col      { display: table-column       ;  }
          colgroup { display: table-column-group ;  }
          td, th   { display: table-cell         ;  speak-header: once; } /* grouped, but ties into the other elements */
          caption  { display: table-caption      ;  caption-side: top;  }

          /*~~~~~~~~~~~~~~~~~~~~~~~~*/
          /*  Descendant selectors  */
          /*~~~~~~~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~~*/
          /*  Child selectors  */
          /*~~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          /*  Adjacent sibling selectors  */
          /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~~~~~~*/
          /*  Attribute selectors  */
          /*~~~~~~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~~*/
          /*  Class selectors  */
          /*~~~~~~~~~~~~~~~~~~~*/

            .inputbutton { border: solid 1px black; background-color:white;}

          /*~~~~~~~~~~~~~~~~*/
          /*  ID selectors  */
          /*~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~*/
          /*  pseudo-classes  */
          /*~~~~~~~~~~~~~~~~~~*/

          /*~~~~~~~~~~~~~~~~~~~*/
          /*  Pseudo-elements  */
          /*~~~~~~~~~~~~~~~~~~~*/

        -->
        </style>

        <script type="text/javascript">
          //<![CDATA[

            // variables
              var processXSLT;  // obj, do not set variable
              var pathXML;
              var pathXSL;
              var docXML;
              var docXSL;

            // set variables (seperately set for clarity)

              // NOTE:// if your using xml / xsl, which is inline to the document
              // NOTE:// define the element inside the onload function...

              pathXML = '';  // [internal obj] reference object location || [external obj] xml location (include trailing slash [/])
              pathXSL = '';  // [internal obj] reference object location || [external obj] xsl location (include trailing slash [/])

              docXML = 'chapter.xml';   // [internal obj] reference object || xml document name (include .xml)
              docXSL = 'chapter.xsl';   // [internal obj] reference object || xsl document name (include .xsl)

            // functions

            function window.onload( )
            {
              for (i=0; i<document.getElementsByTagName('input').length; i++)  document.getElementsByTagName('input')[i].attachEvent("onclick", element_onclick); // adds event to all input elements (saves time)
              xmlobj = document.getElementById('xmlresultset');
              //alert(xmlobj); inline
              init( (pathXML + docXML), (pathXSL + docXSL) ); // onload initialise document. sets xml + xsl absolute pathes
            }

            function init(docXML, docXSL)
            {
              processObj = new processXSLT();

              processObj.xmlDoc = docXML;
              processObj.xslDoc = docXSL;
              processObj.init();
              processObj.proc(); // transform xml and xsl(t) documents
           }

           function processXSLT()
           {
             this.xmlDoc    = null;
             this.xslDoc    = null;
             this.target    = null;

             this.init    = processXSLT_load;    // adds function to the obj
             this.proc    = processXSLT_process; // adds function to the obj
             this.refresh = processXSLT_refresh; // adds function to the obj

             this.xmlObj = new ActiveXObject('MSXML2.DOMDocument'); // xml obj options below
             this.xmlObj.async              = false;
             this.xmlObj.validateOnParse    = true;
             this.xmlObj.resolveExternals   = false;
             this.xmlObj.preserveWhiteSpace = true;

             this.xslObj = new ActiveXObject('Msxml2.FreeThreadedDOMDocument.4.0'); // xsl obj options below
             this.xslObj.async              = false;
             this.xslObj.validateOnParse    = false;
           }

           function processXSLT_load()
           {
             // stub
             this.xmlObj.load(this.xmlDoc);
             this.xslObj.load(this.xslDoc);

             //alert(this.xmlObj.xml);
             // no validation  so check whether the xml document, has been found etc..

             // NOTE:// you could check for the xslt document, although I created a
             // NOTE:// seperate function for processing both documents...
           }

           function processXSLT_process()
           {
             xslTemp = new ActiveXObject("Msxml2.XSLTemplate.4.0");

             try
             {
               xslTemp.stylesheet = this.xslObj;
               xslProc = xslTemp.createProcessor();
               xslProc.input = this.xmlObj;
               xslProc.transform;
               //alert(xslProc.output);
               return xslProc.output;
             }
             catch(e)
             {
               alert(e.description);
             }
           }

           function processXSLT_refresh()
           {
             // stub
           }

           function element_onclick()
           {
             // stub
             what = window.event.srcElement; // cheat :D
             // I could't remember how to attach a function with parameters, so using a work around for now
             // been a while since I done any javascript
             alert(what.value + '\n' + what.type + '\n' + what.parentElement.enctype); //just demo'ing:P
           }

          function window.onerror()
          {
            // process error handler
            //return true; // supresses all errors, [bad handling though...]
          }
          //]]>

        </script>
      </head>

      <body>

        <form id="sort" enctype="" action="">
          <div>
            <input type="button" class="inputbutton" id="a1" tabindex="1" title="First Name" value="First Name" />
            <input type="button" class="inputbutton" id="a2" tabindex="2" title="Last Name" value="Last Name"   />
            <input type="button" class="inputbutton" id="a3" tabindex="3" title="User ID" value="User ID"       />

            <select name="SortOrderList" id="SortOrderList" value="ascending">
              <option value="ascending" selected="selected">Ascending</option>
              <option value="descending">Descending</option>
            </select>
          </div>
        </form>

        <div id="container"></div>

        <xml id="xmlresultset">
          <portfolio>
            <project id="1">
              <description>blah...</description>
              <date>blah...</date>
              <img src="" alt="" align="middle" width="" height="" lowsrc="" title="" />
              <etc>blah...</etc>
            </project>
          </portfolio>
        </xml>

        <xml id="xsltransform">
          <xsl:stylesheet
          xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
          version="1.0">

            <xsl:param name="sortKey" select="'id'"/>
            <xsl:param name="sortOrder" select="'ascending'"/>

            <xsl:template match="/">
              <xsl:apply-templates select="portfolio" />
            </xsl:template>      
                
            <xsl:template match="portfolio/project">
              <div>
                <xsl:apply-templates select=".">
                  <xsl:sort select="*[name(.)=$sortKey]|@*[name(.)=$sortKey]" order="{$sortOrder}"/>
                </xsl:apply-templates>
              </div>
            </xsl:template>
                
            <xsl:template match="record">
              <div> ( <xsl:value-of select="@id" /> )
                <xsl:value-of select="description" />
                <xsl:text> </xsl:text>
                <xsl:value-of select="date" />
              </div>
            </xsl:template>
          </xsl:stylesheet>
        </xml>

      </body>
    </html>

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I initially started this with external documents, heres what I was using...

    chapter.xml
    PHP Code:
    <?xml version="1.0"?>
    <chapter>
      <title>XSLT</title>
      <section>What is XSL?
        <paragraph><important>Extensible Stylesheet Language</important>, as the name implies, is an XML-based language used to create <important>stylesheets</important>.  An XSL engine uses these stylesheets to...</paragraph>
        <paragraph>There are actually two...</paragraph>
      </section>
      <title>XSLT 2</title>
      <section>Why is XSLT So Important for E-Commerce?
        <paragraph>To get an idea of the power of XSLT...</paragraph>
        <paragraph>Unfortunately, the chances are...</paragraph>
      </section>
    </chapter>




    chapter.xsl

    PHP Code:
    <?xml version="1.0"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="UTF-8"/>
    <xsl:template match="/">
      <xsl:for-each select="chapter/title"> 
        <xsl:value-of select="."/>
      </xsl:for-each>
    </xsl:template>
    </xsl:stylesheet>




    pinched somewhere off microsoft;)


    is it me or is there something wrong with the templates, including stuff outside [ PHP ] & [ / PHP ]
    Last edited by Andrew-J2000; Dec 3, 2002 at 16:13.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •