We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37437
    • 147 Posts
    Background
    I am building a site with MODX Revolution and the main navigation is driven by Wayfinder. I have added some javascript-based functionality to the site in order to include tabbed content on assorted pages. The functionality is actually a tab content script that comes from Dynamic Drive: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm.

    The Problem
    I need to have specific tabs of content display depending on the Wayfinder link that is clicked in the main navigational menu. The literature that goes with the Dynamic Drive script says that this can be accomplished if you add a bit of code to the tail end of the link that is used to call up the page that contains the tabs in question. For instance:
    <a href="page.htm?tabinterfaceid=index">Target Page</a>
    .

    How do I append this bit of code ( ?tabinterfaceid=index ) to the tail end of the necessary Wayfinder links? I tried using the Link Attributes feature on the pages in question, but this did not do the trick for me.

    Thanks. [ed. note: djembe last edited this post 15 years ago.]
      • 3109 ☆ A M B ☆
      • 894 Posts
      Download the wayfinder ebook it will show you the in's and out of wayfinder
        Benjamin Marte
        Interactive Media Developer
        Follow Me on Twitter | Visit my site | Learn MODX
        • 37437
        • 147 Posts
        Thanks for the tip, Ben. I actually have the book and it has been helpful in the past. Now however, I guess I was hoping for a solution that was a bit more direct than that.
          • 4385
          • 372 Posts
          Did you try using something like this in your TPL?

          <a href="[+wf.link+]?tabinterfaceid=[+wf.description+]">
          


          You might want to look at jquery ui to do your tabs. It might have a bit of overhead just for tabs, but once you add it you could leverage jquery for other fancy tricks.

          http://jqueryui.com

          If you use jquery you would target the tab in a similar way...
          <a href="[+wf.link+]#[+wf.description+]">
            DropboxUploader -- Upload files to a Dropbox account.
            DIG -- Dynamic Image Generator
            gus -- Google URL Shortener
            makeQR -- Uses google chart api to make QR codes.
            MODxTweeter -- Update your twitter status on publish.
            • 3749
            • 24,544 Posts
            I'm not positive, but I think you want something like this:

            <a href="[[~wf.id? &tabinterfaceid=`index`]]">Target Page</a>


            I think the only way to send $_GET parameters in a link is to use a MODX link tag (where ## is the id of the resource) with the parameters as properties:

            [[~##? &arg=`value`]]


            BTW, the tags in bwente's example are for Evolution. For Revolution, you'd want this:

            [[+wf.placeholder]]
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting
              • 37437
              • 147 Posts
              Brian and BobRay –

              Thanks so much for the advice and insights. I am still however a touch unclear as to exactly how and where to place the additional bit of code ( ?tabinterfaceid=index ) in the Wayfinder chunk. The line of code below is the Wayfinder code associated with the pages that contain the tabbed content in question. if you could, just show me exactly how I would integrate the code into this chunk.

              <li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>


              Thanks again for any help you may offer. (Wayfinder is a great tool, but if you are unfamiliar with the nuances of its functionality, and you are a bit short on time, it can be a doozy.) [ed. note: djembe last edited this post 15 years ago.]
                • 32316
                • 387 Posts
                whistlemaker Reply #7, 15 years ago
                Quote from: bwente at Oct 25, 2011, 06:18 PM
                Did you try using something like this in your TPL?
                unclear as to exactly how and where to place the additional bit of code ( ?tabinterfaceid=index ) in the Wayfinder chunk.
                The TPL from the first quote refers to a Wayfinder template. You need to use a custom template, and 'link to it' from the Wayfinder call
                  • 4385
                  • 372 Posts
                  @BobRay The perils of copy 'n paste!

                  You are correct. I should have said this...

                  based on djembe's example

                  <li[[+wf.classes]]><a href="[[+wf.link]]?tabinterfaceid=index">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
                    DropboxUploader -- Upload files to a Dropbox account.
                    DIG -- Dynamic Image Generator
                    gus -- Google URL Shortener
                    makeQR -- Uses google chart api to make QR codes.
                    MODxTweeter -- Update your twitter status on publish.
                    • 3749
                    • 24,544 Posts
                    Try Bwente's solution. If it doesn't work, try this:

                    <li [[+wf.classes]]><a href="[[~[[+wf.id]]? &tabinterfaceid=`index`]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>


                    Note that those are back-ticks, not quotes around the word 'index'.
                      Did I help you? Buy me a beer
                      Get my Book: MODX:The Official Guide
                      MODX info for everyone: http://bobsguides.com/modx.html
                      My MODX Extras
                      Bob's Guides is now hosted at A2 MODX Hosting
                      • 37437
                      • 147 Posts
                      Gentlemen –

                      Thanks again for all of the helpful advice. I feel like I'm closer to resolving this issue (at least conceptually), although I am not quite there yet with the implementation. One problem is that I am still not totally clear on how to create a wayfinder template that you can conditionally assign to a very specific document.

                      I did however actually achieve some degree of success by creating a test weblink and then associating it with the specific URL that opens the appropriate content tab. Actually, this is perhaps the most efficient way to accomplish the task at hand because it allows me to place all tabbed content within a single document, and then just create a new weblink for each of the different tabs that I need to open on that document. But I did nevertheless run into one problem here: the weblink that I created as a test did not (for some reason) take on the 'active self' class when selected in the menu, and therefore, it did not format properly (active links are supposed to display in red in my navigational menu). If I can get the selected weblink document to display properly in the wayfinder menu, I think this is the solution.

                      Any additional insights would be greatly appreciated.