1

我有一个表单，其中一部分具有里程碑的表格输入，带有 ajax 函数以添加新行。

这是ajax调用的函数：

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

这是带有 JS 的视图的表格部分，用于添加额外的行：

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

如果我在没有返回和处理输出的情况下渲染部分内容，则对于添加的行一切正常：

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

除了日期选择器不显示，但表格正确呈现。

当我添加返回和处理输出时，我得到了日期选择器，但它打破了表格：

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

表格行和表格单元格标签消失：

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

没有返回和处理输出，它呈现如下：

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

任何想法如何解决它，以便我获得添加行的表格行和日期选择器？

应 bool.dev 的要求添加 _milestone.php 部分视图；

<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>
4

1 回答 1

1

这里的问题是再次processOutput加载jquery.js、jquery-ui.min.js和jquery-ui.css，这会导致不正确的元素。即使CJuiDatePicker需要这些文件，加载一次（在第一次渲染期间）就足够了，在随后的 ajax 调用中，我们可以避免再次加载它们。

为此，您可以简单地修改_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 -->

发生的情况是，当processOutput遇到上述 3 个文件的 registerScript 调用时，它将被忽略，但所需的其余脚本（如激活）CJuiDatePicker将包含在脚本中。

于 2013-01-23T09:38:03.997 回答