[SOLVED]How to active menu if replace CHtml:link with CHtml:ajaxLink

Archives Yii 1.0.x Discussions
1

Hi everybody,

I am trying replace menu link with ajax link and content worked fine, but the menu item did not active then :(

Any suggestions i am warmly appriciate.

Best regards,

2

Hi,

i would say you need to activate the menu item by yourself.

You could use the success-event of your ajax call to add the css class 'active' to the link-tag of the choosen menu item using jQuery.

Greets

3

Quote

i would say you need to activate the menu item by yourself.

You could use the success-event of your ajax call to add the css class 'active' to the link-tag of the choosen menu item using jQuery.

Thank you for quick reply but can you show me an example. I am not good at jquery sorry.

And i can show you my code to clear do it.

First menu:



<ul>


<li class="active"><?php echo CHtml::ajaxLink('Home',array('/site/home/'), array(


   'update'=>'#main',


)); ?></li>


<li><?php echo CHtml::ajaxLink('Contact',array('/site/contact/'), array(


   'update'=>'#main',


)); ?></li>

And I know there will a jquery script was generated like this:



<script type="text/javascript">


/*<![CDATA[*/


jQuery(document).ready(function() {


jQuery('#yt0').click(function(){jQuery.ajax({'url':'/website/index.php?r=site/home','cache':false,'success':function(html){jQuery("#main").html(html)}});return false;});


jQuery('#yt1').click(function(){jQuery.ajax({'url':'/website/index.php?r=site/contact','cache':false,'success':function(html){jQuery("#main").html(html)}});return false;});


});


/*]]>*/


</script>

So how to go next yoshi i am stuck  :-\

4

Hi all,

Me solved this problem, and here the way. Just put this script before </body>



<script type="text/javascript">





$(document).ready(function(){


	$("#menu ul li > a").click(function(e){


        var pid = $("#"+e.target.id).parent().attr("id"); //here we get parent element of active anchor





        switch(pid){


			case "lyt0": //parent <li> id of active anchor


				//change status & style menu


				$("#lyt0").addClass("active");


				$("#lyt1").removeClass("active");


			break;


			case "lyt1":


				//change status & style menu


				$("#lyt0").removeClass("active");


				$("#lyt1").addClass("active");


		}


		//alert(e.target.id);


		return false;


	});


});


</script>