YII在部分视图中加载日期选择器会打断表布局
我有一个表单,其中一部分有表格输入,用于里程碑,并使用ajax函数添加新行 以下是ajax调用的函数:YII在部分视图中加载日期选择器会打断表布局,yii,Yii,我有一个表单,其中一部分有表格输入,用于里程碑,并使用ajax函数添加新行 以下是ajax调用的函数: public function actionNewMilestoneRow($index) { $milestoneModel = new TgifMilestone; $this->renderPartial('_milestone', array( 'milestoneModel' => $milestoneModel, 'i' => $index
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>
除了datepicker不显示,但是表正确呈现
当我添加return和processoutput时,我得到了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>
如果没有返回和进程输出,它的呈现方式如下:
<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>
这里的问题是
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调用时,它将被忽略,但cguidatepicker
所需的其余脚本(如激活)将包含在脚本中。这里的问题是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
所需的其余脚本(如激活)将包含在脚本中。能否显示您的_milestone.php部分视图?根据请求添加。我使用datetimepicker的默认日期,因此可以根据请求添加cruftcan you show您的_milestone.php部分视图。我使用默认日期作为datetimepicker,也因此使用了CruftIt,这太棒了!谢谢您已经解决了这个问题,并将YII表格输入的动态行添加到知识库中。遗憾的是,没有好的解决方案来验证添加的行。那会让我很开心。也许我应该为此悬赏。很乐意帮忙!为了验证,看看你是否能从中得到一些想法。稍微更改脚本映射这是一个微妙的区别。在我看来:添加还是覆盖整个地图。感谢验证链接。我发现对于使用表格输入和多个模型的ajax验证,这篇文章作为启动点非常有用:太棒了!谢谢您已经解决了这个问题,并将YII表格输入的动态行添加到知识库中。遗憾的是,没有好的解决方案来验证添加的行。那会让我很开心。也许我应该为此悬赏。很乐意帮忙!为了验证,看看你是否能从中得到一些想法。稍微更改脚本映射这是一个微妙的区别。在我看来:添加还是覆盖整个地图。感谢验证链接。对于使用表格输入和多个模型的ajax验证,我发现这篇文章作为启动点非常有用: