Cakephp- Jquery menubar changing URL

Question

Iam trying to create a Menubar for a cakephp website using Jquery. the code below shows the Menu elements in the ctp file placed in the view folder.

           <div id="menubar" class="menu">
        <ul id="menu" class="menu">

             <li class="active">
           <a href="#tab4"><span>Allocation</span></a>
             </li>
            <li class=><a href="#tab1"><span>Update Travel</span></a></li>
            <li><a href="#tab2"><span>User Profile</span></a></li>
            <li><a href="#tab3"><span>Pay/Withdraw</span></a></li>

        </ul>
        <div class="clear"></div>
    </div>

and i create a jquery file for selecting each menu item and put this file in the webroot/js folder

         (function($){ 
 $.fn.extend({  
     tabify: function( callback ) {

        function getHref(el){
            hash = $(el).find('a').attr('href');
            hash = hash.substring(0,hash.length-4);
            return hash;
        }



        function setActive(el){

            $(el).addClass('active');
            $(getHref(el)).show();
            $(el).siblings('li').each(function(){
                $(this).removeClass('active');
                $(getHref(this)).hide();
            });
        }

        return this.each(function() {

            var self = this;
            var callbackArguments   =   {'ul':$(self)};

            $(this).find('li a').each(function(){
                $(this).attr('href',$(this).attr('href') + '-tab');
            });

            function handleHash(){

                if(location.hash && $(self).find('a[href=' + location.hash + ']').length > 0){              
                    setActive($(self).find('a[href=' + location.hash + ']').parent());
                }
            }

            if(location.hash){
                handleHash();
            }

            setInterval(handleHash,100);

            $(this).find('li').each(function(){
                if($(this).hasClass('active')){
                    $(getHref(this)).show();
                } else {
                    $(getHref(this)).hide();
                }
            });

            if(callback){
                callback(callbackArguments);
            }   

        }); 
    } 
}); 
}) (jQuery);

and when i call this function , it will work fine.

   $(document).ready(function () {
$('#menu').tabify();

     });

But my problem is when i write exact url for each menu in the ctp file insted of #tab1,#tab2,#tab3,#tab4 it will not work.

i want to give this url

 <li class=><?php echo $this->Html->link('<span>Commuter</span>', array('action' => '../userprofiles/commuter'), array('escape' => false)); ?></span></li>

Insted of

    <li><a href="#tab3"><span>Pay/Withdraw</span></a></li>

If anybody can solve this please help me

Answer 1

The syntax for the link should be in form of array (see the documentation for the HtmlHelper).

<li class="">
    <?php echo $this->Html->link('<span>Commuter</span>', 
                                   array('controller'=>$your_controller_here,
                                         'action' => $your_action_here,
                                    $param1 /*parameters if you need them*/),
                               array('escape' => false)); ?>
</li>

Replace controller and actions an so on according to your needs and see if that solves the problem.

Note that it is not necessary to pass the url in form of an array, but you have to decide either for an array or static string url (like '../userprofiles/commuter'), don't use both.