Ajax Form Submit, Reloads The Page

Hi,

I have created a widget, which is a form that takes two values and adds them with each other.

What I am trying to do is submit that from without refreshing the page, but after trying everything, still the page reloads.

protected/models/Calculator.php




<?php

class Calculator extends CFormModel 

{

  public $first;

  public $second;


  public function rules() {

    return array(

        array('first,second', 'required'),

    );

  }


  public function attributeLabels() {

    return array(

        'first' => 'First Value',

        'second' => 'Second Value',

    );

  } 

}



protected/extension/CalculatorWidget/CalculatorWidget.php




<?php


require_once '../protected/models/Calculator.php';


class CalculatorWidget extends CWidget 

{

  public $model;

  

  public $first;

  public $second;

  public $result;


  public function init() 

  {


  // if(Yii::app()->getRequest()->getIsAjaxRequest())

  //  {

  //    echo CActiveForm::validate( array( $this->model)); 

  //   Yii::app()->end(); 

  //  }

    

    $this->model = new Calculator;


    if (isset($_POST['Calculator'])) 

    {

      $this->model->attributes = $_POST['Calculator'];

      

      if ($this->model->validate()) 

      {

        $this->first = $this->model->first;

        $this->second = $this->model->second;

        

        $this->result = $this->first + $this->second;

        

        echo '<strong>Result: </strong> ' . $this->result;

        

      }

    }   

  } // end init


  public function run() 

  {

    $this->render('calculatorWidget', array('model' => $this->model));

  }


}



and View file:

protected/extension/CalculatorWidget/views/calculatorWidget.php




<div class="form">

  <?php

  $form = $this->beginWidget('CActiveForm', array(

      'id' => 'form',

      'enableClientValidation' => true,

      'enableAjaxValidation' => true,

   //   'clientOptions' => array('validateOnSubmit' => TRUE)

      

  ));

  ?>


  <?php echo $form->errorSummary($this->model); ?>


  <div class="row">

   

  <div class="">

    <?php echo $form->labelEx($this->model, 'first'); ?>

    <?php echo $form->textField($this->model, 'first'); ?>

    <?php echo $form->error($this->model, 'first'); ?>

  </div>


  <div class="">

    <?php echo $form->labelEx($this->model, 'second'); ?>

    <?php echo $form->textField($this->model, 'second'); ?>

    <?php echo $form->error($this->model, 'second'); ?>

  </div>

  

  <div class="row buttons">

    <?php echo CHtml::submitButton('Submit'); ?>

  </div>


  <?php $this->endWidget(); ?>


</div><!-- form -->




Can anyone please tell me how can I get the result without refreshing the page.

Thanks

check the AJAX form submit example in the below link

http://www.yiiframework.com/wiki/388/ajax-form-submiting-in-yii/

Hi,

please see it…

http://www.yiiframework.com/forum/index.php/topic/43977-ajax-client-side-validation-without-refreshing-page/page__p__208536__fromsearch__1#entry208536