CgridView and Javascript Onclick

Yii 1.1 General Discussion
1

Hi All

I need to make some ajax calls inside my Cgridview for searching. How do I call a javascript function inside CGridView?.

My aim is this, when I click on the link a javascript code gets executed that places some data on my search page.

Then if I click on the TVs link i.e. I should it’s subcategories which is determined by it’s parentID.

The link is inside admin.php I tried onclick like so which doesn’t get called.


array(

		'class'=>'CLinkColumn',

		'htmlOptions'=>array(

				'onclick'=> 'change();'

        ),

		  

		'labelExpression'=>'$data->Name',

So my question is how do I make javascript calls from CgridView and how do I achieve the above?

Thanks

2

Hello

Have you tried like this (inspired from a comment on the CLinkColumn API documentation, but not tested)?


array(

    'class'=>'CLinkColumn',

    'labelExpression'=>'$data->Name',

    'urlExpression'=>'"js:onChange();"',

),
3

No that doesn’t seem to do it. Thanks for the reply

4

Actually this works


'urlExpression'=>'"javascript:change();"',

js doesn’t work. I want to know how can I access those search boxes I have on the images I posted. Where you can enter some filters i.e. where I put 26 on Parent how do I access that. Do I get it by id Parent? and do I change the text in the box by value?

Basically I’m not sure how to access those things.

This my attempt


function change(){


document.getElementById("ParentID").value="10";





}

Thanks

5

In fact, '“js:onChange();”" should have been ‘“js:change();”’ I guess.

Anyway, the boxes in your screenshots are present when you specify the filter property for the CGridView.

To access them, you can use the ‘name’ property on the column you need.

Anyway, to be sure of the input’s name, you can use Firebug inspector, or specify a class on the column declaration, in order to use.

Example, the column’s name in the CGridView declaration is ‘parent’, you can use jQuery since it’s already included:


function change(){

    $('input[name="parent"]').val(10);

    // or, in case you added a class to the column

    // $('some-grid table.items th.parent input').val(10);

}
6 

'"js:change();"'

That didn’t work either.

Hi

So I tried


$('input[name="ParentID"]').val(10);

nothing seems to work. The name is ParentID.

I tried other ways such as


function change(){

document.getElementById("qaz").value="10";

  

}

and on CgridView


 array(

            'name'=>'ParentID',

			'htmlOptions'=>array( 'id'=>'ParentID'),

			),

That also doesn’t work. When I use innerHTML instead of value I can change the numbers outside the box. The actual text under parent but I can’t seem to access the textbox. I switched to normal JS because I know nothing on Jquery.

Thanks again

7

Can you share an excerpt of your CGridView code, including the column you want to access and the CLinkColumn?

8 

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

	'id'=>'eccategory-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'columns'=>array(

	 'ID',

  array(

            'name'=>'ParentID',

	    'htmlOptions'=>array( 'id'=>'ParentID'),

	),

 'eccount',

	

        array(

            'name'=>'Published',

			'value'=>'$data->Published==\'0\' ? "No":"Yes"',

            'filter'=>CHtml::activedropDownList($model, 'Published',  

			

                array(

		''=>'All',

                    '1'=>'Yes',

                    '0'=>'No',

                )

            ),

        ),

		

		array(

		'class'=>'CLinkColumn',

		'labelExpression'=>'$data->Name',

		'urlExpression'=>'"javascript:change()"',

  

		

		//'value'=>'CHtml::link(($data->ID), array("view", "id"=>$data->ID))',

		),

		'Description',

		

		'CatOrder',

		

		array(

			'class'=>'CButtonColumn',

		),

	),

)); ?>

Thr ClinkColoumn is on the name but the filter I’m trying to access is called ParentID.


function change(){

//document.getElementById("ParentID").innerHTML="10";

    $('input[name="ParentID"]').val(10);

    // or, in case you added a class to the column

    // $('some-grid table.items th.parent input').val(10);

}


</script>

The one you have given me line 2 has no response. The first line that’s commented changes the actual value rather than inputting value on the filter. If I try .value instead of innerHTML I also get no response.

Thanks

9

Ok, I think my approach is flawed or there’s something weird. I couldn’t even get the change() function to fire :D

Plus, my two JS suggestions were not working because:

  • 1st one: The input name begins with the model name so it’s NameOfYourModel[ParentID]. Thus my suggestion “Anyway, to be sure of the input’s name, you can use Firebug inspector” ;)

  • 2nd one: The class is not applied to the thead rowns, but only to the tbody ones. Bad idea.

So here’s what I suggest, drop the change() function and:

[list=1]

[*]In your registered script, add this js function


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

…

$('td.myLink a').live('click', function(){

    $('input[name=\"NameOfYourModel[ParentID]\"]').val(10);

});

…

[*]Change your CGridView with the following:


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

        'id'=>'eccategory-grid',

        'dataProvider'=>$model->search(),

        'filter'=>$model,

        'columns'=>array(

            'ID',

            array(

               'name'=>'ParentID',

               'htmlOptions'=>array( 'id'=>'ParentID'), // it's not really needed either, just drop it

            ),

            'eccount',

            array(

                'name'=>'Published',

                'value'=>'$data->Published==\'0\' ? "No":"Yes"',

                'filter'=>CHtml::activedropDownList($model, 'Published',

                    array(

                        ''=>'All',

                        '1'=>'Yes',

                        '0'=>'No',

                    )

                ),

            ),

            array(

                'class'=>'CLinkColumn',

                'labelExpression'=>'$data->Name',

                'htmlOptions'=>array('class'=>'myLink'),

            ),

            'Description',

            'CatOrder',

            array(

                'class'=>'CButtonColumn',

            ),

        ),

)); ?>

[/list]

On a side note, .live() is deprecated as of jQuery 1.7+ so, when the above works :) you could try also with


$(document).on('click', 'td.myLink a', function(){

    $('input[name=\"NameOfYourModel[ParentID]\"]').val(10);

});
10

When you’re done with your requirement, you’ll also want to change the ‘published’ column into


array(

                'name'=>'Published',

                'value'=>'$data->Published==\'0\' ? "No":"Yes"',

                'filter'=>CHtml::activedropDownList($model, 'Published',

                    array(

                        '1'=>'Yes',

                        '0'=>'No',

                    ),

                    array(

                        'empty'=>'All',

                    )

                ),

            ),
11

So it worked as you said, to my dissapointment though it did not produce the outcome I wanted. ??? The 10 shows on the filter box but nothing happens, the search never takes place even if I press enter afterwards. All is not doom though I will just make it into a php page and scrap javascript/ ajax.

You’ve been very helpful, Thank you.

12

So I decided to try it again and this made it search…


$(document).on('click', 'td.myLink a', function(){

    $('input[name=\"ECCategory[ParentID]\"]').val(10);

	

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

});

:D Thanks ben for all the help

13

Glad to hear that you’ve made it work.

Happy coding :)