Hi All!
In my first Yii project I’m using CTreeView class (to be more exact I use MTreeView extension but it is based on CTreeView) and the problem I’m facing now is mostly related to JQuery part of this class.
The thing is that I’m using tree views on several pages loaded with AJAX and click handlers of TreeView links loaded on first page are staying active after new page with new TreeView is loaded.
Here’s what I mean.
Initially I load the screen of products and categories:
In one of JQuery scenarios in Firebug I see:
jQuery("body").undelegate("#yt0", "click").delegate("#yt0", "click", function () {jQuery.ajax({url: "/admin/product/admincategoryproducts/id/5", cache: false, success: function (html) {jQuery("#products").html(html);}});return false;});
jQuery("body").undelegate("#yt1", "click").delegate("#yt1", "click", function () {jQuery.ajax({url: "/admin/product/admincategoryproducts/id/0", cache: false, success: function (html) {jQuery("#products").html(html);}});return false;});
jQuery("body").undelegate("#yt2", "click").delegate("#yt2", "click", function () {jQuery.ajax({url: "/admin/product/admincategoryproducts/id/7", cache: false, success: function (html) {jQuery("#products").html(html);}});return false;});
jQuery("body").undelegate("#yt3", "click").delegate("#yt3", "click", function () {jQuery.ajax({url: "/admin/product/admincategoryproducts/id/2", cache: false, success: function (html) {jQuery("#products").html(html);}});return false;});
jQuery("body").undelegate("#yt4", "click").delegate("#yt4", "click", function () {jQuery.ajax({url: "/admin/product/admincategoryproducts/id/1", cache: false, success: function (html) {jQuery("#products").html(html);}});return false;});
Then I load screen of attributes (this page is loaded with AJAX - link ‘Attributes’ is AjaxLink):
And after that I still see in Firebug both new scenario:
jQuery("body").undelegate("#yt0", "click").delegate("#yt0", "click", function () {jQuery.ajax({url: "/admin/attribute/admingroupattributes/id/1", cache: false, success: function (html) {jQuery("#attributes").html(html);}});return false;});
and old scenario available.
As a result when I click on the tree node I get the following in Firebug console:
How such things are usually resolved? I had an idea for start to rename link id’s for second tree but didn’t find where they are set at all.
But generally: is there some way to "cleanup" all event handlers of recreated objects when some AJAX call is happening?
Thanks a lot in advance for any input!