yii - not - widget datepicker kartik

YII loading datepicker en la vista parcial rompe el diseño de la tabla

Question

Tengo un formulario, parte del cual tiene una entrada tabular para hitos con una función ajax para agregar una nueva fila.

Aquí está la función que llama ajax:

public function actionNewMilestoneRow($index)
{
  $milestoneModel = new TgifMilestone;
  $this->renderPartial(''_milestone'', array(
    ''milestoneModel'' => $milestoneModel,
    ''i'' => $index,
  ),false,true);
}

Aquí está la parte de la tabla de la vista con el JS para agregar una fila adicional:

  <table class="timeline">
  <tbody class="milestones">
  <tr><th>Milestone</th><th>Expected<br />Completion Date</th></th></tr>
  <?php foreach ($milestoneModels as $i=>$milestoneModel): ?>
  <tr>
  <td><?php echo $form->textField($milestoneModel,"[$i]milestone",array(''size''=>75,''maxlength''=>250)); ?>
  <?php echo $form->error($milestoneModel,"[$i]milestone]"); ?>
  </td>
  <td>
  <?php
  $date_value=empty($milestoneModel->expected_completion_date)?date(''l, M j, Y''):$milestoneModel->expected_completion_date;
  $this->widget(''zii.widgets.jui.CJuiDatePicker'',array(
      ''model''=>$milestoneModel, //Model object
      ''language''=>'''',
      ''attribute''=>"[$i]expected_completion_date", //attribute name
      ''options''=>array(
        ''dateFormat'' => ''DD, M d, yy'',// equivalent to PHP date ''l, M j, Y''
        ''defaultDate''=>$date_value,//see above
      ), // jquery plugin options
  ));
  ?>
<?php echo $form->error($milestoneModel,"[$i]expected_completion_date"); ?>
</td>
</tr>    <?php endforeach; ?>
</tbody>
</table>

<?php echo CHtml::button(''Add Another Milestone'', array(''class'' => ''milestone-add'')) ?>    
<script>
$(".milestone-add").click(function(){
  $.ajax({
    success: function(html){
      $(".milestones").append(html);
    },
    type: ''get'',
    url: ''<?php echo $this->createUrl(''newMilestoneRow'');?>'',
    data: {
      index: $(".milestones tr").size() - 1
    },
    cache: false,
    dataType: ''html''
  });
});    
</script>

Todo funciona bien para una fila adicional si renderizo parcial sin la devolución y la salida del proceso:

  $this->renderPartial(''_milestone'', array(
    ''milestoneModel'' => $milestoneModel,
    ''i'' => $index,
  ));

excepto que el marcador de fecha no se muestra, pero la tabla se representa correctamente.

Cuando agrego retorno y proceso de salida obtengo el datepicker pero rompe la tabla:

  $this->renderPartial(''_milestone'', array(
    ''milestoneModel'' => $milestoneModel,
    ''i'' => $index,
  ),false,true);

Las etiquetas de celda de la tabla y la fila desaparecen:

<tr><!-- this is the row befoe the added row -->
<td><input id="TgifMilestone_4_milestone" type="text" name="TgifMilestone[4][milestone]" maxlength="250" size="75"></td>
<td><input id="TgifMilestone_4_expected_completion_date" class="hasDatepicker" type="text" name="TgifMilestone[4][expected_completion_date]"></td>
</tr>
<link href="/requests/assets/f73aa0bb/jui/css/base/jquery-ui.css" type="text/css" rel="stylesheet">
<input id="TgifMilestone_5_milestone" type="text" name="TgifMilestone[5][milestone]" maxlength="250" size="75">
<input id="TgifMilestone_5_expected_completion_date" class="hasDatepicker" type="text" name="TgifMilestone[5][expected_completion_date]">
</tbody>
</table>

sin la devolución y el resultado del proceso, se representa así:

<tr>
<td><input id="TgifMilestone_5_milestone" type="text" name="TgifMilestone[5][milestone]" maxlength="250" size="75"></td>
<td><input id="TgifMilestone_5_expected_completion_date" type="text" name="TgifMilestone[5][expected_completion_date]"></td>
</tr>
</tbody>
</table>

¿Alguna idea de cómo solucionarlo, así que obtengo tanto la fila de la tabla como el datepicker para la fila agregada?

Añadiendo vista parcial _milestone.php a petición de bool.dev;

<tr>
<td><?php echo CHtml::activeTextField($milestoneModel,"[$i]milestone",array(''size''=>75,''maxlength''=>250)); ?></td>
<td>
<?php
$date_value=empty($milestoneModel->expected_completion_date)?date(''l, M j, Y''):substr($milestoneModel->expected_completion_date,0,10);//default date must be a date not a datetime
  $this->widget(''zii.widgets.jui.CJuiDatePicker'',array(
      ''model''=>$milestoneModel, //Model object
      ''language''=>'''',
      ''attribute''=>"[$i]expected_completion_date", //attribute name
      ''options''=>array(
        ''dateFormat'' => ''DD, M d, yy'',// equivalent to PHP date ''l, M j, Y''
        ''defaultDate''=>$date_value,//see above, date not datetime..

      ), // jquery plugin options

));
?> 
</td>
</tr>

Answer 1

El problema aquí es que processOutput está cargando jquery.js , jquery-ui.min.js y jquery-ui.css nuevamente, lo que da como resultado los elementos incorrectos. Aunque CJuiDatePicker necesita estos archivos, cargarlos una vez (durante la primera representación) es suficiente, y en las siguientes llamadas ajax, podemos evitar cargarlas nuevamente.

Para hacer eso, simplemente puede modificar el archivo de vista parcial _milestone.php :

<?php
    Yii::app()->clientScript->scriptMap[''jquery.js'']=false;
    Yii::app()->clientScript->scriptMap[''jquery-ui.css'']=false;
    Yii::app()->clientScript->scriptMap[''jquery-ui.min.js'']=false;
?>
<!-- rest of your _milestone.php -->

Lo que sucede es que cuando processOutput encuentra las llamadas de registerScript para los 3 archivos anteriores, simplemente se ignorará, pero el resto de los scripts (como la activación) necesarios para CJuiDatePicker se incluirán en el script.