使用允許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);