使用允许POST请求的表单创建窗口小部件

Question

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

我目前正在尝试使用小部件，因为此代码将用于多个页面。我现在的问题是我想知道如何从窗体中获取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来影响其他视图/模型。

Answer 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实例请在视图脚本的末尾注册以下脚本（或以您的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);