Yii Framework Forum: CgridView and Javascript Onclick - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

CgridView and Javascript Onclick Make some ajax calls inside Cgridview Rate Topic: -----

#1 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 25 July 2012 - 08:37 AM

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.

Posted Image

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

Posted Image

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
0

#2 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 25 July 2012 - 09:21 AM

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();"',
),

1

#3 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 28 July 2012 - 06:55 AM

View Postbennouna, on 25 July 2012 - 09:21 AM, said:

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();"',
),




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

#4 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 28 July 2012 - 07:26 AM

View PostItsYii, on 28 July 2012 - 06:55 AM, said:

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


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
0

#5 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 28 July 2012 - 07:46 AM

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);
}

0

#6 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 28 July 2012 - 09:33 AM

View Postbennouna, on 28 July 2012 - 07:46 AM, said:

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);
}



'"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
0

#7 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 28 July 2012 - 10:08 AM

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

#8 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 29 July 2012 - 06:06 AM

View Postbennouna, on 28 July 2012 - 10:08 AM, said:

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

<?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
0

#9 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 29 July 2012 - 06:41 AM

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:
  • 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',
                ),
            ),
    )); ?>


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);
});

1

#10 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 29 July 2012 - 06:47 AM

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',
                    )
                ),
            ),

0

#11 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 29 July 2012 - 08:27 AM

View Postbennouna, on 29 July 2012 - 06:41 AM, said:





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.
0

#12 User is offline   ItsYii 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 117
  • Joined: 24-January 12

Posted 30 July 2012 - 08:07 AM

View PostItsYii, on 29 July 2012 - 08:27 AM, said:

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.



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
0

#13 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 30 July 2012 - 08:40 AM

Glad to hear that you've made it work.
Happy coding :)
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users