samedi 25 avril 2015

Convert jquery/js function to pass variable between pages to a ColdFusion variable


I have some jquery which checks if a particular element is visible on a page and passes a parameter to be appended to the url, so the element can be shown/hidden on the next page.

I want to see if it is possible to store this value in a coldfusion variable and then pass it via the navigation, as this seems to be a more robust method to me.

Here is my basic html:

<nav>
            <ul id="mainNav" class="clearfix">
                <li><a href="/">Main</a></li>
                <li><a href="#" class="<cfif VARIABLES.primarydir EQ 'work'>clicked</cfif>">Work</a></li>
                <li><a href="/about"  class="<cfif VARIABLES.primarydir EQ 'about'>clicked</cfif>">About</a></li>
                <li><a href="/news" class="<cfif VARIABLES.primarydir EQ 'news'>clicked</cfif>">News </a></li>
                <li><a href="/tumblr.com" target="_blank">Blog</a></li>
            </ul>
            <ul id="subNav">
                <li><a href="/work/effort" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'effort'>clicked</cfif>">Effort, We Cried!</a></li>
                <li><a href="/work/why" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'why'>clicked</cfif>">Why Do We Do This</a></li>
                <li><a href="/work/guests" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'guests'>clicked</cfif>">Guests &amp; Hosts</a></li>
                <li><a href="/work/prettygirls" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'prettygirls'>clicked</cfif>">Pretty Girls Doing Horrid Things</a></li>
            </ul>
</nav>

#subNav is set to hidden by default in the css.

I think have some basic jquery to toggle the visibility of the subNav:

    var toggleSubNav = (function(){
        trigger.on('click',function(){
            subNav.toggleClass('visible', function(){
                subNavLength = subNav.is(':visible');
            });
            return false;
        });
    }());

And then a second function which checks the visibility of the subNav and appends the url:

merge.on('click',function(){
            var url = $(this).attr('href');
            subNavLength = subNav.is(':visible');
            if(subNavLength){
                window.location = url + '?subnav=true';
            }else{
                window.location = url;
            }
            return false;
        });

Finally a function which checks the url for the content of '?subnav=true' to display this on the next page:

var subNavProp = (function(){
        if(href.indexOf('?subnav=true') > 0){
            subNav.addClass('visible');
        }else{
            subNav.removeClass('visible');
        }
    }());

The variable subNavLength is global and gets updated via these various functions.

I realise I am posting an awful lot of jquery and I don't really know how (or if) there is a way to convert this to a backend solution for coldfusion. My thought was that I could toggle a class on the subNav element that is wrapped in a coldfusion if, something like:

<ul id="subNav" class="<cfif var IS true">className</cfif>">

But I am wondering if that still requires something of a Front End solution. Or even if there is another better way to do this?


Aucun commentaire:

Enregistrer un commentaire