css внутри gridview не отображается после ajaxupdate

внутри gridview у меня есть встроенный график на основе css. все работает нормально, пока я что-то не отфильтрую, и gridview не обновится. то css больше не регистрируется внутри сетки. кто-нибудь знает решение? честно говоря, я даже не знаю, что делать в этой ситуации. css не является одной из моих сильных сторон.

это элемент перед ajaxupdate:

это элемент перед ajaxupdate

Это после обновления ajax

введите здесь описание изображения

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

}

насколько я вижу, первый раз, когда создается сетка, css генерирует тег холста, например так

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

но после обновления ajax и обновления сетки этот тег больше не будет отображаться.

Я пытался поместить данные графика в тег холста, но безуспешно.

вот код сетки:

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

вот функция клиента:

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

Редактировать 1: как рекомендовано в ответе 1, я использовал removeClass() и addClass() для обновления css после обновления ajax. ничего не происходит, тег холста все равно не появится.

я попытался использовать replaceWith() и просто вставить тег холста таким образом, но тогда это затормозит фильтрация.

вот функция переустановки DatePicker

<?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\" );

}"); ?>

Редактировать 2:

я не использовал renderPartial в качестве содержимого столбца. просто функция, которая вернула нужный мне контент. после исчерпания всех возможных идей я перешел на renderpartial и с renderpartial + регистрация скриптов/css в partialview и removeclass/addclass теперь все работает нормально.


css ajax yii cgridview
person Tavi    schedule 14.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня тоже иногда возникает эта проблема.

Во-первых: если вы используете частичные представления, включите CSS и в частичное представление.

Если нет, вам, вероятно, придется повторно применять стиль после каждого обновления ajax.

Я вижу, что вы используете "afterAjaxUpdate"=>"reinstallDatePicker", поэтому один из способов решить вашу проблему — добавить этот CSS в .stat-block .stat-graph внутри этой функции. Вы можете использовать функции jquery, такие как css(), addClass() и многие другие.

Но важно то, что вы стилизуете свои элементы после каждого обновления ajax. Поскольку ваша функция reinstallDatePicker вызывается после каждого обновления ajax, вы можете просто добавить в эту функцию некоторый код, чтобы делать то, что вы хотите (то есть изменять стиль элементов).

person Felipe    schedule 15.06.2014

arrow_upward
0
arrow_downward

я пробовал все, что я могу придумать, но безуспешно. единственный способ, которым я мог заставить его работать, - это сохранить данные фильтра в моем сеансе, а затем после ajaxupdate принудительно перезагрузить. (на самом деле не рекомендуется, потому что, если ваш запрос не оптимизирован, я думаю, это может замедлить работу вашей страницы)

я просто публикую это здесь на случай, если у кого-то еще возникнет эта проблема, и я хочу, чтобы она заработала, прежде чем кто-то другой найдет правильное решение.

так что теперь в моем контроллере у меня есть это

public function actionAdmin()
{
    $model=new Cartuse('search');
    $model->unsetAttributes();  // clear any default values
    if(isset($_GET['Cartuse']))
                $_SESSION['filterData'][$this->id][$this->action->id] = $_GET['Cartuse'];
                $model->attributes=$_SESSION['filterData'][$this->id][$this->action->id];
    if (isset($_GET['pageSize'])) {
        Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
        unset($_GET['pageSize']);
    }
    $this->render('admin',array(
        'model'=>$model,
    ));
}

и в моем сетке

$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'cartuse-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'afterAjaxUpdate' => 'reinstallDatePicker',
    'columns' => array(/*
            .....
        )
));

и переустановить средство выбора даты (по какой-то причине, если я помещу location.reload() непосредственно в поле afterajaxupdate, мои средства выбора даты не будут регистрироваться (даже в первый раз), и фильтрация перестанет работать, поэтому я поместил ее в функцию reinstalldatepicker. никаких проблем до сих пор.

<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
    function reinstallDatePicker(id, data) {
            location.reload();
       $('#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,
                                          });
       $.datepicker.setDefaults($.datepicker.regional['ro']);
     }
");

на самом деле это не решение, это просто дешевый обходной путь, поэтому, если у кого-то есть решение, я буду его ждать.

person Tavi    schedule 15.06.2014