Skip to main content
T
TransoniqHacker
Inspiring
December 23, 2010
Question

cfmenu, Ajax and the active item

  • December 23, 2010
  • 1 reply
  • 1097 views

I am having a problem that I can't find an answer on.

I have a vertical cfmenu being populated by a database. Clicking on the form category on the left shows the forms in that category on the right. Simple enough. The display of the form list is handled by a simple ajax call to pull the info in without having to reload the page. Simple enough. The problem is that I want the current category to stay highlighted (like when you mouse over it) while displaying that category. Here is my code:

<cflayout type="hbox" padding="15" style="height:auto;" >

      <cflayoutarea align="left" style="height:auto">

           <h3>Form Categories</h3>

           <cfmenu type="vertical" width="175" name="myMenu" selectedfontcolor="000000" selecteditemcolor="000099">

                <cfoutput query="getFormCategories">

                     <cfmenuitem name="#identifier#" display="#category#" href="javascript:ColdFusion.navigate('getForms.cfm?cat=#categoryid#','formDiv')"/>

                </cfoutput>

           </cfmenu>

       </cflayoutarea>

       <cflayoutarea size="500" style="height:auto;">

            <cfdiv id="formDiv">

            <div style="text-align:center;">

                 <br><br><br>Select a category to the left<br>to show all the forms in that category

            </div>

            </cfdiv>

       </cflayoutarea>

</cflayout>

Any ideas how I can keep the category menu item highlighted when it's displaying the forms from that category?

    This topic has been closed for replies.

    1 reply

    Fernis
    Fernis
    Inspiring
    December 28, 2010

    As cfmenuitem does not allow "onclick" parameter for javascript, you will have to change the menu style in the document that is loaded into formdiv.

    Your menu items get the id #identifier# (in the browser DOM).

    Pass along the menuitem identifier to the document which is loaded.

    In the document within the formdiv, change the menuitem style with javascript, looking something like this:

    <!--- getforms.cfm --->

    <script>
    document.getElementById('#menuitemid#').style.backgroundColor='cyan';
    </script>

    Your cfmenuitem href would of course have ... "&menuitemid=#identifier#" ... in it.

    You also have to know all the other menu identifiers right here and right now, since you definitely want to reset the other menu item styles each time the getForms.cfm loads. You can do that by passing the list of all menuitem identifiers as an URL parameter for each menuitem href, or you can fetch them in the loaded template, or maybe keep them in a session variable.Then you just have to set the default style for each inactive menuitem.

    Hope this gets you started.

    -Fernis

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices