css inside gridview not showing after ajaxupdate

Question

inside a gridview i have a css based inline graph. everything is working fine untill i filter something and the gridview gets updated. then css is not registering inside the grid anymore. anyone knows a solution? to be honest i don't even know what to try in this situation. css is not one of my strong points.

---

this is the element before ajaxupdate:

---

This is after the ajax update

.stat-block .stat-graph {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D7D7D7;
border-radius: 3px;
margin-right: 10px;
padding: 10px 10px 8px;
text-align: center;
width: auto;

}

as far as i can see first time the grid is generated css generates a canvas tag like so

<canvas style="display: inline-block; width: 29px; height: 20px; vertical-align: top;" width="29" height="20"></canvas>

but after the ajax update and the refresh of the gridview that tag won't appear anymore.

i have tried to put the graph data inside the canvas tag whit no success.

here is the gridview code:

this->widget('zii.widgets.grid.CGridView', array(
'id' => 'cartuse-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'afterAjaxUpdate' => 'reinstallDatePicker',
'columns' => array(
    array(
        'id' => 'autoId',
        'class' => 'CCheckBoxColumn',
        'selectableRows' => '50',
    ),
    //  'id',
    array(
        'name'=>'client',
        'type'=>'raw',
        'value'=>'client($data->client)',
        'htmlOptions' => array(
            'align'=>'center',
            //'width'=>'35%'
        )

here is the client function:

       function client($client)   {     

...

return '<div class="stat-block" id="graph">
            <ul>
                <li class="stat-graph inlinebar" id="activitate-lunara">
                '.$data.'
                </li>
                <li class="stat-count">
                    <span>'.$data['0'].'
                    </span>       
                </li> 
                <li class="stat-percent">
                    <span class="text-info stat-percent">'.$target.'</span>
                </li>               
            </ul>
        </div>';
}

Edit 1 : as recomended in answer 1 i used the removeClass() and addClass() functions to refresh css after ajax update. nothing hapens, the canvas tag still won't appear.

i tryed to use replaceWith() and just insert the canvas tag that way but then it will brake the filtering.

here's the reinstallDatePicker function

<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
   $('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
                                      showOtherMonths: true,
                                      selectOtherMonths: true,
                                      changeYear: true,
                                      changeMonth: true,
                                      });
   $('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
                                      showOtherMonths: true,
                                      selectOtherMonths: true,
                                      changeYear: true,
                                      changeMonth: true,
                                      });
   $( \"#activitate-lunara\" ).removeClass( \"stat-graph inlinebar\" );
   $( \"#graph\" ).removeClass( \"stat-block\" );
   $( \"#graph\" ).addClass( \"stat-block\" );
   $( \"#activitate-lunara\" ).addClass( \"stat-graph inlinebar\" );

}"); ?>

Edit 2:

i wasn't using renderPartial as column content. just a function that returned the content i wanted. after exhausting All posible ideeas i moved to renderpartial and with renderpartial + registering scripts / css in the partialview and removeclass / addclass everything is working fine now.

Answer 1

I have this issue sometimes as well.

First thing: If you're using partial views, include the CSS in the partial view as well.

If not, you will probably have to re-apply the style after each ajax update.

I see that you are using "afterAjaxUpdate"=>"reinstallDatePicker" so one way to fix your problem is to add that CSS to .stat-block .stat-graph inside that function. You can use jquery functions like css(), addClass() and many others.

But the important thing is that you style your elements after each ajax update. Since your function reinstallDatePicker is being called after each ajax update, you can just add some code to this function to do what you want (that is, re-style the elements).