新しい行を追加する 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>
return と processoutput なしでパーシャルをレンダリングすると、追加された行に対してすべてが正常に機能します。
$this->renderPartial('_milestone', array(
'milestoneModel' => $milestoneModel,
'i' => $index,
));
ただし、日付ピッカーは表示されませんが、テーブルは正しくレンダリングされます。
return を追加して出力を処理すると、datepicker が表示されますが、テーブルが壊れます。
$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>
return と process 出力がなければ、次のようにレンダリングされます。
<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>