How To Override Listview Js In Yii Base Folder?

Yii 1.1 General Discussion
1

This is code by default:





		var settings = $.fn.yiiListView.settings[id];

		$('#'+id).addClass(settings.loadingClass);

		options = $.extend({

			type: 'GET',

			url: $.fn.yiiListView.getUrl(id),

			success: function(data,status) {

				$.each(settings.ajaxUpdate, function(i,v) {

					var id='#'+v;

					$(id).replaceWith($(id,'<div>'+data+'</div>'));

				});

				if(settings.afterAjaxUpdate != undefined)

					settings.afterAjaxUpdate(id, data);

				$('#'+id).removeClass(settings.loadingClass);

			},

			error: function(XMLHttpRequest, textStatus, errorThrown) {

				$('#'+id).removeClass(settings.loadingClass);

				alert(XMLHttpRequest.responseText);

			}

		}, options || {});


		if(options.data!=undefined && options.type=='GET') {

			options.url = $.param.querystring(options.url, options.data);

			options.data = {};

		}

		options.url = $.param.querystring(options.url, settings.ajaxVar+'='+id);


		if(settings.beforeAjaxUpdate != undefined)

			settings.beforeAjaxUpdate(id);

		$.ajax(options);

	};

And this is what I need:





	$.fn.yiiListView.update = function(id, options) {

		var settings = $.fn.yiiListView.settings[id];

		$('#'+id).addClass(settings.loadingClass);

		options = $.extend({

			type: 'GET',

			url: $.fn.yiiListView.getUrl(id),

			beforeSend: function(){

				$('.loader').css('display', 'block');

			},

			success: function(data,status) {

				$.each(settings.ajaxUpdate, function(i,v) {

					var id='#'+v;

					$(id).replaceWith($(id,'<div>'+data+'</div>'));

				});

				if(settings.afterAjaxUpdate != undefined)

					settings.afterAjaxUpdate(id, data);

				$('#'+id).removeClass(settings.loadingClass);

				 $('.loader').css('display', 'none');

			},

			error: function(XMLHttpRequest, textStatus, errorThrown) {

				$('#'+id).removeClass(settings.loadingClass);

				alert(XMLHttpRequest.responseText);

			}

		}, options || {});


		if(options.data!=undefined && options.type=='GET') {

			options.url = $.param.querystring(options.url, options.data);

			options.data = {};

		}

		options.url = $.param.querystring(options.url, settings.ajaxVar+'='+id);


		if(settings.beforeAjaxUpdate != undefined)

			settings.beforeAjaxUpdate(id);

		$.ajax(options);

	};

As you can see, I’ve added $(’.loader’).css(); beforeSend and on success? Is there a way not to change Yii base folder, because when I update, new version will override it again.

Also, is there a smarter way to solve this problem? I have a new loader with fixed position, with border, etc.

Thanks.

2

In the current implementation, an animation gif ("loading …") is displayed while the list get "list-view-loading" class added.




                $('#'+id).addClass(settings.loadingClass);

...

                                $('#'+id).removeClass(settings.loadingClass);

Also see the reference.

http://www.yiiframework.com/doc/api/1.1/CListView#loadingCssClass-detail

And in listView.css




.list-view-loading

{

	background:url(loading.gif) no-repeat 8px 8px;

}

So, you can change the loading image without touching the core code.

  1. Change "loadingCssClass" to something else, eg. "my-list-view-loading".

  2. Add the following lines in your own css file.




.my-list-view-loading

{

	background:url(my-loading.gif) no-repeat 8px 8px;

	/* or whatever you like */

}

Well, but you need the position of the image fixed …

If the above doesn’t suite your needs, you may want to use ‘beforeAjaxUpdate’ and ‘afterAjaxUpdate’.

http://www.yiiframework.com/doc/api/1.1/CListView#beforeAjaxUpdate-detail

http://www.yiiframework.com/doc/api/1.1/CListView#afterAjaxUpdate-detail