使用允许POST请求的表单创建窗口小部件
在几页上,我需要包含一个窗口和一个提交按钮。视图文件使用DatePicker来允许用户填写输入框。点击“开始”(提交)按钮后,我会根据日期更改以下内容。使用允许POST请求的表单创建窗口小部件
我目前正在尝试使用小部件,因为此代码将用于多个页面。我现在的问题是我想知道如何从窗体中获取POST请求并使用它。我需要一个模型吗?我将附上我目前的代码,但现在我得到一个错误,$日期是未定义的。我知道它会给出一个错误,但我对我需要为此做些什么感到困惑。
为插件当前代码:
/protected/views/dateWidget.php
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'date-form',
'enableAjaxValidation'=>false,
'enableClientValidation' => true,
)); ?>
<p class="note">
Fields with <span class="required">*</span> are required.
</p>
<?php echo $form->errorSummary($date); ?>
<div class="row">
<?php echo $form->labelEx($date,'date'); ?>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model' => $model,
'attribute' => 'date',
'language' => 'ja',
'i18nScriptFile' => 'jquery.ui.datepicker-ja.js',
'options' => array(
'showOn' => 'both', // also opens with a button
'dateFormat' => 'yy-mm-dd', // format of "2012-12-25"
),
'htmlOptions' => array(
'size' => '10', // textField size
'maxlength' => '10', // textField maxlength
),
));
?>
<?php echo $form->error($date,'date'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton('Add'); ?>
</div>
<?php $this->endWidget(); ?>
</div>
<!-- form -->
/protected/components/DateWidget.php
<?php
class DateWidget extends CWidget
{
/**
* @var CFormModel
*/
public $form;
public function run()
{
// if (! $this->form instanceof CFormModel) {
// throw new RuntimeException('No valid form available.');
// }
$this->render('application.views.dateWidget', array('form'=>$this->form));
}
}
?>
问题是:如何使用DateForm中的$ _POST来影响其他视图/模型。
由于$form
变量在您的dateWidget.php
视图中不明确,因此不清楚您要根据选定日期更改哪些数据。开始日期的表单小部件,如$form = $this->beginWidget('CActiveForm', array(...))
您将取代CFormModel
实例从DateWidget
通过CActiveForm
实例。这就是令人困惑的...你是否想使用DateWidget
的日期字段作为其他表单的一部分或作为单独的嵌套表单?
总之,要改变只是表单提交之前可以附加onSubmit
处理这种形式的任何数据:
jQuery('#date-form').submit(function(event) {
// Any actions before submission
}
考虑到与嵌套形式的更一般的情况,并假定$form
是在你看来,我们可以CActiveForm
实例请在视图脚本的末尾注册以下脚本(或以您的DateWidget
的单独JS文件 - 以任何您喜欢的方式),如下所示。请注意,您必须编写自己的JavaScript函数collectFormData
(它将收集主窗体的字段值并将它们放置在最终的普通JavaScript对象中)和populateFormData
(这将设置字段的新值)。这是因为CActiveForm
的某些字段是自定义的,并且包含多个输入元素(如复选框或单选按钮列表)。您可以将这些函数放置在您的小部件的单独JS文件中。
还要使DateWidget
适于以任何形式与我们与改变表单的数据移动这些片段为可以通过DateWidget
$url
属性被称为单独的PHP脚本代码段限制它的任何数据。
Yii::app()->clientScript->registerScript("alterPost", "
jQuery('#" . $form->id . "').submit(function(event, submit) {
// Checking whether form's submission has been requested
if (submit) {
// Allowing form submission
return;
}
// Preventing form submission
event.preventDefault();
event.stopPropagation();
// Getting selected date
var dateString = jQuery(this).find('input[name$=\"[date]\"]').val();
// Collecting data of main form...
var jqMainForm = jQuery(this).parents('form');
var mainFormData = collectFormData(jqMainForm.attr('id'));
var self = jQuery(this);
jQuery.ajax('" . $this->url . "', {
'type': 'POST',
'data': jQuery.extend({'dateString': dateString}, mainFormData),
'dataType': 'json',
'success': function(data, textStatus, jqXHR) {
// Populating main form by new values
if (data['result'] === true)
populateFormData(jqMainForm.attr('id'), data['alteredFormData']);
self.trigger('submit', true);
}
});
})
", CClientScript::POS_READY);
一个PHP脚本改变表单数据必须返回JSON作为结果:
<?php
$response = array(
'result' => false
);
if (isset($_POST))
{
// Analyzing dateString and form data, altering form data
// $response['alteredFormData'] = ...;
$response['result'] = true;
}
header("Content-Type: application/json");
print json_encode($response);