2

在几页上，我需要包含一个框和一个提交按钮。视图文件使用 DatePicker 允许用户填写输入框。点击“开始”（提交）按钮后，我将根据日期更改以下内容。

我目前正在尝试使用小部件，因为此代码将在多个页面上使用。我现在的问题是我想知道如何从表单中获取 POST 请求并使用它。我需要一个模型吗？我将在下面附上我当前的代码，但现在我收到 $date 未定义的错误。我知道这会出错，但我对我到底需要做什么感到有点困惑。

小部件的当前代码：

/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 来影响其他视图/模型。

4

1 回答 1

1

$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您视图中的实例，我们可以在视图脚本的末尾（或在您的单独 JS 文件中DateWidget- 以您喜欢的任何方式）注册以下脚本，如下所示。

请注意，您必须编写自己的 JavaScript 函数collectFormData（这将收集主表单的字段值并将它们放置在生成的纯 JavaScript 对象中）和populateFormData（这将设置字段的新值）。这是因为某些字段CActiveForm是自定义的，并且包含多个输入元素（例如复选框或单选按钮列表）。您可以将这些函数放在小部件的单独 JS 文件中。

此外，为了DateWidget适用于任何具有任何数据的表单，我们使用代码片段来限制它，这些代码片段会改变表单的数据，将这些片段移动到单独的 PHP 脚本中，该脚本可以$url由DateWidget.

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);
于 2013-04-09T19:08:32.160 回答