CBreadcrumbs with JS code in links?

Yii 1.1 General Discussion
1

Is there anyway to have one on more item (link) in Breadcrumbs executing JavaScript code (onclick) or URL arrays in CBreadcrumbs.links is the only option?

2

It looks like you can’t.

If you take a look to the code of CBreadCrumb, you will notice that are 116 lines of code, 90 of wich comment, so it abslolutely don’t worth to extends, just take inspiration from it and write your own breadcrumb widget.

3

Thanks zaccaria (+1), and sorry for not looking into source code myself, before asking.

I will investiage it later. Maybe you’re right, that it is not work extending it, but on the other hand, changing it, so it would accept fully operational htmlOptions (where you can pass both href for address and onclick for JS) shouldn’t be that hard to achieve - it is just about copying this piece of code from for example CMenu.renderRecurisve method and adapting it to CBreadcrumbs.

Anyway, like I said, thanks, and I’ll investigate this later.

4

And on the other side… you can use plain jQuery to bind a click event on the current breadcrumbs ;)

5

I know, mdomba , that you’re big fan (maniac? :]) of jQuery, but… how would I do this, if each piece of breadcrumbs doesn’t has it’s own ID and I don’t see how could I set it, if it doesn’t support htmlOptions, only label-url pairs?

6

nth-child selector comes to mind ;) …

7

Got me! :] (+1)

8

Continuing thread into a bit different area…

How can I attach onclick to CGridView’s header (sorting) and paginator (changing pages) to do some additional JS codes, when this operation happens? I believe that nth-child operator won’t work here, as number of pages and columns can vary from time to time.

When I looked into code generated by CGridView I saw only headers being referenced by ID - with the same name and continuing numeration. This doesn’t seems to be a good point to start looking for a good entry to attaching own on-click to these elements…

9

The nth-child is used if you need to attach an event to a specific child… for example attach a click event only to the 3rd header/page/breadcrumb…

If you want to attach to all elements than you can do something like this for the headers


$('#grid_id th').live('click',function...

This way you attach a click event handler to any TH under the grid_id

10 



$('.yiiPager a').live('click', function() {

    var page = this.href.match(/page=(\d+)/);

    page = page ? page[1] : 1;

});

Will get the page number on a click.

11

Thanks guys, for your examples. This sounds interesting and I think I follow this way.