Get Jquery Reference To Links In Cjuiaccordion Headers

Yii 1.1 General Discussion
1

Hi

I want all my links - except those in the accordion headers - to display a loading.gif file.




$('a:not(.ui-accordion-header a)').click(function(){

	$('#dvLoading').fadeIn(800);

});

It works, but unfortunately for the accordion header links as well. What should I do to exclude them?

This css also works, so I should be referencing the correct class:




.ui-accordion .ui-accordion-header a { color: gold;} /* Accordion panel links */

Thanx

2

You do not need the "a" after the ".ui-accordion-header" in the selector.

It should read:


$('a:not(.ui-accordion-header)')

If you place the following "a" the selector searches for all "a" children of elements with the class ".ui-accordion-header", but that style is applied to the anchor element, not its wrapper.

Fiddle: http://jsfiddle.net/84uJ4/1/

Edit:

After looking back at your question I realize that based on your note that the css selector applies that style to the header my solution my not work for you.

If you could post the output of the accordion widget for one of the panels and the code that generates it, it would be helpful in diagnosing your problem.

3

Hi Zane

Thanks for the info

Here is my widget:




<?php

	$this->widget('zii.widgets.jui.CJuiAccordion', array(

		'id'=>'leftAccordion',

		'panels'=>array(

			'Login / Register'=>$this->renderPartial('application.views.layouts._menul_home',false,true),

		),

		'options'=>array(

			'autoHeight'=>false, 

			'navigation'=>true

		),

	));

?>

And here is the resulting html:




<div id="leftAccordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">

	<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">

		<span class="ui-icon ui-icon-triangle-1-s"></span>

		<a href="#" tabindex="-1">Login / Register</a>

	</h3>

	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel">

</div>

The following code works, but it excludes all links in the accordion - and not just the accordion headers.




$('a:not(#leftAccordion a)').click(function(){

	$('#dvLoading').fadeIn(500);

});
4

Now that you know what elements the anchor lies in you can start selecting just that.

Try:


 $('a:not(#leftAccordion h3.ui-accordion-header a)')

That should select all the anchor elements in not your headers.

This could be further simplified to:


$('a:not(h3.ui-accordion-header a)')

To prevent the action on ALL accordion headers on the page.

5

Hi Zane

This is very weird.

I tried both your examples and $(‘a:not(.ui-accordion-header a)’).

They all work fine according to fire-bug, but in reality they do not work:

The debugger indicates that this statement only executes for links that are not in .ui-accordion-header - which is exactly right.

But still the loading.gif also appears when clicking on the link in .ui-accordion-header - even though the statement’s breakpoint did not cause fire-bug to halt (statement was not executed by fire-bug).

If I comment out the statement, then no loading.gif appears for all links. So there is no other statement somewhere else causing this behaviour.

6

Gerhard,

Make sure that you are wrapping that statement in


$(document).ready(function(){ ... })

The only guess that I would have as to why it works correctly after page load (i.e. in the debugger) but not normally is that the UI styles have not yet been applied to the elements when you are calling the selector.

7

Thanx for your input Zane.

However, I abandoned this mission, since my statement simply selects too much other unwanted links on the page as well. So I was forced to be more precise and had to rather stipulate the individual links I wanted to be selected. I gave them all a separate css class.

Regards