[SOLVED] Problems using JQuery's toggle()

Archives Yii 1.0.x Discussions
1

Hello there, Im a new Yii user and really love it! I've come across some problem I can't seem to be able to solve by myself:

I have in one of my creation form a list of links that can be activated or not (a list of predifened tags). I have used ajaxLinks in combination with a controller action that saves which links have been clicked. It works pretty well except on the visual side, I would like the link class to toggle each time I click on it. My current code is the following:

echo CHtml::ajaxLink($tag,array(‘Task/selectTag’),array(

	'type'=>'POST',


	'success'=>"js:function(html){jQuery(\"#Tags_$tag\").addClass(\"tagSel\");}",


	'data'=>array('tagId'=>$tag)),


	array(&#039;id&#039;=&gt;&#039;Tags_&#039;.$tag)); </span>

This will correctly add the class "tagSel" to the link you click on, but it lacks the toggle back (removeClass). I've tried to use the JQuery toggle() function but it doesn't work. Here is the JQuery example for it:

$("p").toggle(function(){

  $(this).addClass("selected");

},function(){

  $(this).removeClass("selected");

});

How am I supposed to adapt my 'success' function? I've tested several solutions without results… thanks for any help!

2

not sure what is your spec. if you are trying to hide the link when clicking it and show it on success, you could try to call removeClass() in onclick event.

3

I think you would better place call of toggle function in your 'success' attribute, and do not forget to define toggle function.

It should be something like this:



 jQuery("p").toggle(function(){


   jQuery(this).addClass("selected");


 },function(){


   jQuery(this).removeClass("selected");


 });





<?php 


echo CHtml::ajaxLink($tag,array('Task/selectTag'),array(


      'type'=>'POST',


      'success'=>"js:function(html){jQuery("#Tags_$tag").toggle();}",


      'data'=>array('tagId'=>$tag)),


      array('id'=>'Tags_'.$tag));

I think this will work.

4

Actually I got it to work by registering an additional script for each link and without using the success condition. I had already tried your solution Vasiliy but it didn't work as supposed, the links needed TWO clicks to toggle. I guess it is because the registering of the script was issued after the success of the ajax request (click on a link => ajax request => success=registering of the toggle function…=>another click actual function is called).

My final solution:

Yii::app()->clientScript->registerScript('Script_'.$tag,"jQuery("#Tags_$tag").toggle(


     function(){$("#Tags_$tag").addClass("tagSel");},


     function(){$("#Tags_$tag").removeClass("tagSel");})");





echo CHtml::ajaxLink($tag,array('Task/selectTag'),array(


     'type'=>'POST',


     'data'=>array('tagId'=>$tag)),


     array('id'=>'Tags_'.$tag));

Thank you very much for your help!

5

Quote

I had already tried your solution Vasiliy but it didn't work as supposed, the links needed TWO clicks to toggle. I guess it is because the registering of the script was issued after the success of the ajax request (click on a link => ajax request => success=registering of the toggle function...=>another click actual function is called).

Sure, if you tried to register script in ajax response, then it's expected behavior.

Of course, I meant that you should register toggle function before any httprequest  - in page body.