Problems with my jQuery code in CGridView

Yii 1.1 General Discussion
1

Hello everyone,

I have some problems with my own jQuery code in a CGridView.

When i filter the table my own code does not work anymore.

Any ideas how I can fix this problem?

Thanks in advanced.

2

You did not post your code so to see what is the problem…

but

on every filter / sort operation… the grid is refreshed… so if your code is "binded" to an event, that does not work anymore… for this to work you need to use live() or delegate()

3

Your right here’s the code:




<?php

Yii::app()->clientScript->registerScript('search', "

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

$('input[name$=\"Articles[Id]\"]').css('display','none');

$('.search-button').click(function(){

	$('.search-form').toggle();

	return false;

});

$('.search-form form').submit(function(){

	$.fn.yiiGridView.update('productdata-grid', {

		data: $(this).serialize()

	});

	return false;

});

$('.button-column img:nth-child(1)').bind('click', function() {

	if($(this).attr('src') === '/images/basket.png'){

		$.get('/download/addajax', { id: $(this).attr('class') }, function(data){

			$('#mainmenu li:nth-child(4)').hide().html('<a href=\"/download\">Download (' + data + ')</a>').show();

		});

	} else {

		$.get('/download/removeajax', { id: $(this).attr('class') }, function(data){

			$('#mainmenu li:nth-child(4)').html('<a href=\"/download\">Download (' + data + ')</a>');

		});

	}	

	src = ($(this).attr('src') === '/images/basket.png') ? '/images/basket_checked.png' : '/images/basket.png';

	$(this).attr('src', src);

	

});

$('.button-column > a').replaceWith(function(){

	var img = $('img',this);

	img.attr('class',$(this).attr('href').replace('/download/add/',''));

	return $(img);

})

");

?>

But where can i use this live() or delegate() functions?

In the php code of the view?

4

I would suggest you first to read about "bind", "live" and "delegate" on jQuery site… so that you understand the difference…

In your example the code


$('.button-column img:nth-child(1)').bind('click', function() {

would become


$('.button-column img:nth-child(1)').live('click', function() {

…

The code


$('.button-column > a').replaceWith(function(){

is executed only once… so on every sort/filter when the grid is refreshed this code is not executed,

and you cannot put that on an event… so the best solution would be to make a function that will

be called from afterAjaxUpdate - http://www.yiiframework.com/doc/api/1.1/CGridView#afterAjaxUpdate-detail

5

Ok i tried this:




Yii::app()->clientScript->registerScript('after', 'jQuery.fn.after = function(){$(".button-column img:nth-child(1)").live("click", function() {

	if($(this).attr("src") === "/images/basket.png"){

		$.get("/download/addajax", { id: $(this).attr("class") }, function(data){

			$("#mainmenu li:nth-child(4)").hide().html("<a href=\"/download\">Download (" + data + ")</a>").show();

		});

	} else {

		$.get("/download/removeajax", { id: $(this).attr("class") }, function(data){

			$("#mainmenu li:nth-child(4)").html("<a href=\"/download\">Download (" + data + ")</a>");

		});

	}	

	src = ($(this).attr("src") === "/images/basket.png") ? "/images/basket_checked.png" : "/images/basket.png";

	$(this).attr("src", src);

	

});

$(".button-column > a").replaceWith(function(){

	var img = $("img",this);

	img.attr("class",$(this).attr("href").replace("/download/add/",""));

	return $(img);

});}');







<?php

$this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'productdata-grid',

	'afterAjaxUpdate'=>"after",

But now i get errors in firebug after is not defined

[Afbreken op deze fout] jQuery(’#productdata-grid’).yiiGridVie…cles_page’,‘afterAjaxUpdate’:after});

I did make an function after.

6

You really need to learn a bit more about jQuery and how it works…

Check again my previous post… I clearly wrote to change bind to live… and that’s all… no need to call this in afterAjaxValidation

Now… that part will work… problem is with the code that starts with - $(’.button-column > a’).replaceWith(function(){

It’s only this code that needs to be called after the grid has been updated…

Search a bit on the forum to see some examples of afterAjaxUpdate to get an idea on how to use it…

7

Solved the problem!

I had to register an regular javascript function instead of an jquery function.

Thanks for the help!