Using MooTools on pages using CListView

In my Yii project I have used a small Moo Tools script to add some effects to the standard Index view. These effects all work well enough, until I click onto the next page [via the pager at the bottom of the page]. My MooTools effects no longer work.

I imagine it is to do with the jQuery script at the bottom of the page:


<script type="text/javascript" src="/ctms/assets/45996ecf/listview/jquery.yiilistview.js"></script>

<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

jQuery('#yw0').yiiListView({'ajaxUpdate':['yw0'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter'});

});

/*]]>*/

</script>

I declare my scripts in the page header.


<!-- MooTools! -->

<script type="text/javascript" src="blah/javascript/mootools-core-1.4.1-full-compat-yc.js"></script>

<script type="text/javascript" src="blah/javascript/_view.js"></script>

Now I understand the problem is due to the two frameworks conflicting, but the fact my effects work to start with suggests to me there might be a way around the issue. I suppose I could just rewrite my script to use jQuery, but that would be wasted time having to relearn stuff.

Is there a way to have the two scripts co-exist. Better yet, can Yii do pagination without jQuery?

As always, your help would be greatly appreciated! :)

From Jquery site:


<script type="text/javascript" src="other_lib.js"></script>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

  $.noConflict();

  // Code that uses other library's $ can follow here.

</script>

http://api.jquery.com/jQuery.noConflict/

All Yii scripts use jquery() and not $(), so it should work. But if you use Yii the best would be to learn some jquery: it does not take long if you already know javascript and another framework.

All Yii jQuery code is encapsulated in a code block so it does not conflict with other js frameworks… and that you can see as it works on your fist page…

When you get to the next page… the page code is updated so even jQuery can have has some problems in those cases, for example it can depend on how a handler is binded on page (DOM) elements that are replaced by the ajax code

so it’s possible that the same is happening to your mootools code, but I never used it and can’t help you with it…

I discovered this morning that the two frameworks are not conflicting. The issue is with dynamically loaded elements.

My Moo Tools script targets the divs with class view in CListView. On the first page load everything works fine as my script can see the div.view elements, applies the events etc and all is good. However, when you click through the pages, the paginator dynamically creates the next set of div.view elements, which are not being targeted by my script.

The solution is probably element delegation in Moo Tools, which would be fine if I didn’t also need the attributes of the newly created elements. Oh well, this is a matter for a Moo Tools/JS board and not Yii. :)

yes of course. btw if you want to use jquery you can use the ajaxComplet event handler, to easily handle ajax uploaded content.

http://api.jquery.com/ajaxComplete/