In a YII based project I have a cgridview. Requirement is to make whole row or every column value a link and clicking on any of link in row will fire an ajax call. I have tried it from here
How to display rows of CGridView as a link
but issue it that If i make whole row as clickable it takes me to view action.
If I make individual column values in a row as a link and call ajax function i get following error.
Property "CDataColumn.options" is not defined.
I need help in making whole row as clickable and call an ajax function or individual row values to call an ajax function on click.
Any help or guidance in right direction is greatly appreciated.
//code for making trading name column in cgridview as clickable and call ajax
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'customer-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'id',
array(
'name' => 'trading_name',
'value' => 'CHtml::link($data->trading_name, Yii::app()
->createUrl("customer/view/",array("id"=>$data->primaryKey)))',
'type' => 'raw',
'options' => array('ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")',
'success' => 'js:function(data) {
$("#tab1").html(data);')
),
),
'email',
'site_code',
array(
'class'=>'CButtonColumn',
),
After some hassle I was able to make the row of the cgridview a link and on clicking on the each row calls an AJAX function. Below is the code. May be it is helpful for someone.
selectionChanged did the trick. On clicking any row calls an ajax function and displays
each customer's information a div below grid.
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'customer-grid',
'dataProvider'=>$model->search(),
'selectionChanged'=>'js:function(id){
n = $.fn.yiiGridView.getSelection(id);
if (n>0){
$.ajax({
url: "'.Yii::app()->urlManager->createUrl('customer/view/').'",
type: "GET",
data: {"id": parseInt(n)},
dataType: "html",
success: function(data) {
$("#customer-div").html(data);
}
});',
'filter'=>$model,
'columns'=>array(
'id',
array(
'name' => 'trading_name',
'value' => 'CHtml::link($data->trading_name, Yii::app()
->createUrl("customer/view/",array("id"=>$data->primaryKey)))',
'type' => 'raw',
'options' => array('ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")',
'success' => 'js:function(data) {
$("#tab1").html(data);')
),
),
'email',
'site_code',
array(
'class'=>'CButtonColumn',
),
'options' is not possible for a cgridview column as said in yii documentation :
http://www.yiiframework.com/doc/api/1.1/CGridColumn#htmlOptions-detail
You have to use 'htmlOptions' if you wan to set options.
But if you want to use ajax with a link, you have to use Chtml::ajaxLink() :
http://www.yiiframework.com/doc/api/1.1/CHtml#ajaxLink-detail
I hope it helps you
I'm using tbTabs, but when submit, only the first tab _audio view get $_post request. what happened with other render partials view's $_post data?
create.php
Contain
$this->widget('bootstrap.widgets.TbTabs', array(
'tabs'=>array(
array(
'id'=>'tab1',
'active'=>true,
'label'=>'audio',
'content'=>$this->renderPartial("_audio", array('model' => $model),true),
),
array(
'id'=>'tab2',
'active'=>false,
'label'=>'videos',
'content'=>$this->renderPartial("_videos", array('model' => $model),true),
),
array(
'id'=>'tab3',
'active'=>false,
'label'=>'games',
'content'=>$this->renderPartial("_games", array('model' => $model),true),
),
),
));
If there are three separate forms in the tabs, they are independent of each other.
You will need to use JavaScript/jQuery to post the three forms via AJAX, before refreshing/redirecting the page.
I'm currently using the following code to send an Ajax get request to my controller:
echo CHtml::ajaxLink('clickMe', array('ajax'), array('update'=>'#results'));
This works fine, the controller receives the request and updates the view accordingly.
Now, I want to send in this request attributes of the model, i.e. from model->getAttributes();
How should I do this? Create a JSON object of the attributes and send that with the request?
Just pass 'data' attribute and 'type' if needed:
echo CHtml::ajaxLink('clickMe', array('ajax'), array(
'update' => '#results'
'data' => CJSON::encode($model->attributes),
'type' => 'post',
));
This code just replaces #results contents with json. If you need something different, use 'success' instead of 'update' like this:
echo CHtml::ajaxLink('clickMe', array('ajax'), array(
'success' => 'function (response) {
// do everything you need
}',
'data' => CJSON::encode($model->attributes),
'type' => 'post',
));
Take a look at jquery ajax options for more information.
I am generating a checkbox using the corresponding method of CHtml, and I want to run some JavaScript code before and after the AJAX request. Here is the code:
echo CHtml::checkBox('markComplete', FALSE,
array(
'class' => 'markComplete',
'ajax' => array(
'type' => 'POST',
'url' => $this->createUrl('/events/events/MarkComplete'),
'data' => 'event_status='.$events['id'],
'beforeSend' => 'function(){ $(this).parent("TR").hide(); }',
'success' => 'function(resp) { $("#right").append(resp); }'
),
)
);
How can I tell Yii that beforeSend and success are JavaScript code and not plain strings?
Better option available starting from Yii 1.1.11
All framework classes now support custom JavaScript snippets through CJavaScriptExpression. Use it like this:
'ajax' => array(
'beforeSend' => new CJavaScriptExpression(
'function(){ $(this).parent("TR").hide(); }'
),
// ...
)
The option of prefixing strings with js: is still available by default, but it can now be disabled as required using an optional parameter on CJavaScript::encode.
Original answer
If you want to include literal JavaScript code as part of options, the convention in Yii is to prefix the code with js:. So you would write it like this:
'ajax' => array(
'type'=>'POST',
'url'=>$this->createUrl('/events/events/MarkComplete'),
'data'=>'event_status='.$events['id'],
'beforeSend' => 'js:function(){
$(this).parent("TR").hide();
}',
'success'=>'js:function(resp) {
$("#right").append(resp);
}'
),
)
Unfortunately this is not well documented, which is why people run into exactly this problem every now and then.
I have a gridview which contains a checkbox column and also uses pagination. When I check some checkboxes in the first page and navigate to the second page and check another one in the second page, the options I checked in the first page is not retained there. Is it posssible to retain the checkbox values during pagination?
Code for Gridview is
$widget = $this->widget('zii.widgets.grid.CGridView', array(
'dataProvider' => $model->search(),
'cssFile' => Yii::app()->baseUrl . '/media/js/admin/css/admingridview.css',
//'filter' => $model,
'ajaxUpdate' => true,
'enablePagination' => true,
'columns' => array(
array(
'name' => 'id',
'header' => '#',
'value' => '$this->grid->dataProvider->pagination->currentPage * $this->grid->dataProvider->pagination->pageSize + ($row+1)',
),
array(
'class' => 'CCheckBoxColumn',
'selectableRows' => '2',
'header' => 'Selected',
),
array(
'name' => 'fb_user_id',
'header' => 'FaceBook Id',
'value' => 'CHtml::encode($data->fb_user_id)',
),
array(
'name' => 'first_name',
'header' => 'Name',
'value' => 'CHtml::encode($data->first_name)',
),
array(
'name' => 'email_id',
'header' => 'Email',
'value' => 'CHtml::encode($data->email_id)',
),
array(
'name' => 'demo',
'type' => 'raw',
'header' => "Select",
'value' => 'CHtml::checkBox("email[]","",array("class"=>"check","value"=>$data->email_id))',
),
),
));
Edit:
Extension for remembering the selected options in gridview,check this link Selgridview
Thanks to bool.dev
You could use sessions/cookies to store the checked values. I'm not very sure how to make cookies work, so i'll tell you how to do it with sessions. Specifically the user session that yii creates.
Now to use sessions we need to pass the checked (and unchecked) ids to the controller, therefore we'll modify the data being sent to the controller on every ajax update(i.e between paginations), to do this we exploit the beforeAjaxUpdate option of CGridView.
I'm also using CCheckBoxColumn instead of the following in your code(of course you can modify the solution to suit your own needs):
array(
'name' => 'demo',
'type'=>'raw',
'header' => "Select",
'value' => 'CHtml::checkBox("email[]","",array("class"=>"check","value"=>$data->email_id))',
),
GridView Changes:
<?php $this->widget('zii.widgets.grid.CGridView', array(
// added id of grid-view for use with $.fn.yiiGridView.getChecked(containerID,columnID)
'id'=>'first-grid',
'dataProvider'=>$model->search(),
'cssFile' => Yii::app()->baseUrl . '/media/js/admin/css/admingridview.css',
// added this piece of code
'beforeAjaxUpdate'=>'function(id,options){options.data={checkedIds:$.fn.yiiGridView.getChecked("first-grid","someChecks").toString(),
uncheckedIds:getUncheckeds()};
return true;}',
'ajaxUpdate'=>true,
'enablePagination' => true,
'columns' => array(
array(
'name' => 'id',
'header' => '#',
'value' => '$this->grid->dataProvider->pagination->currentPage * $this->grid->dataProvider->pagination->pageSize + ($row+1)',
),
array(
'name' => 'fb_user_id',
'header' => 'FaceBook Id',
'value' => 'CHtml::encode($data->fb_user_id)',
),
array(
'name' => 'first_name',
'header' => 'Name',
'value' => 'CHtml::encode($data->first_name)',
),
array(
'name' => 'email_id',
'header' => 'Email',
'value' => 'CHtml::encode($data->email_id)',
),
/* replaced the following with CCheckBoxColumn
array(
'name' => 'demo',
'type'=>'raw',
'header' => "Select",
'value' =>'CHtml::checkBox("email[]","",array("class"=>"check","value"=>$data->email_id))',
),
*/
array(
'class' => 'CCheckBoxColumn',
'selectableRows' => '2',
'header'=>'Selected',
'id'=>'someChecks', // need this id for use with $.fn.yiiGridView.getChecked(containerID,columnID)
'checked'=>'Yii::app()->user->getState($data->email_id)', // we are using the user session variable to store the checked row values, also considering here that email_ids are unique for your app, it would be best to use any field that is unique in the table
),
),
));
?>
Pay special attention to the code for beforeAjaxUpdate and CCheckBoxColumn, in beforeAjaxUpdate we are passing checkedIds as a csv string of all the ids(in this case email_ids) that have been checked and uncheckedIds as a csv string of all the unchecked ids, we get the unchecked boxes by calling a function getUncheckeds(), which follows shortly. Please take note here, that when i was testing i had used an integer id field (of my table) as the unique field, and not an email field.
The getUncheckeds() function can be registered like this anywhere in the view file for gridview:
Yii::app()->clientScript->registerScript('getUnchecked', "
function getUncheckeds(){
var unch = [];
/*corrected typo: $('[name^=someChec]') => $('[name^=someChecks]') */
$('[name^=someChecks]').not(':checked,[name$=all]').each(function(){unch.push($(this).val());});
return unch.toString();
}
"
);
In the above function pay attention to the selectors and each and push function.
With that done, we need to modify the controller/action for this view.
public function actionShowGrid(){
// some code already existing
// additional code follows
if(isset($_GET['checkedIds'])){
$chkArray=explode(",", $_GET['checkedIds']);
foreach ($chkArray as $arow){
Yii::app()->user->setState($arow,1);
}
}
if(isset($_GET['uncheckedIds'])){
$unchkArray=explode(",", $_GET['uncheckedIds']);
foreach ($unchkArray as $arownon){
Yii::app()->user->setState($arownon,0);
}
}
// rest of the code namely render()
}
That's it, it should work now.
For developing that scheme you would need to know working of what happens when you navigate.
When ever you navigate to a pagination page ajax calls are made and new data is received and it is fetched from CActive Record or what ever the data source. New data is in accordance of database records or source records. when you come back to previous page again Ajax call is made and content is updated so same comes as it is in database.
what i feel is you should save data of checked items temporary and make it permanent if action is made.
You can do something like this
<script type="text/javascript">
$("input:checkbox").click(function () {
var thisCheck = $(this);
if (thisCheck.is (':checked')){
// do what you want here, the way to access the text is using the
// $(this) selector. The following code would output pop up message with
// the selected checkbox text
$(this).val());
}
});
</script>
you can save temporary storage somewhere
Also make this work on normal form submit:
I wanted to add this as a comment on bool.dev's answer, but I do not have enough reputation to do that yet. So I had to put it in a separate answer.
bool.dev, your answer is great and it works well, thanx.
However, as intended, it only works when ajax calls update the gridview. I have the gridview forming part of a form, so I wanted it to also work on normal submission of the form, otherwise the checkboxes are not loaded again when there are other validation errors on the form.
So, in ADDITION to what you did, I added hidden fields on my form e.g.:
<input type="hidden" name='checkedBox1' id='checkedBox1' value=''>
<input type="hidden" name='uncheckedBox1' id='uncheckedBox1' value=''>
Then, before submitting the form, my sumbit button runs your getChecked() and getUncheckeds() functions and store their results in the hidden fields:
if ($('#checkedBox1').length >0) {$('[name=checkedBox1]').val(getChecked());}
if ($('#uncheckedBox1').length >0) {$('[name=uncheckedBox1]').val(getUncheckeds());}
In the controller, besides from checking for $_GET['checkedIds'], you also check for $_POST['checkedBox1'] and store its values to session in the same way you do for $_GET['checkedIds'], using the same session variable.
Do the same with $_POST['uncheckedBox1'].
That should work.