Submit Without Refreshing

Yii 1.1 General Discussion
1

can anyone tell me how to make a form to send without refreshing or redirecting to another view?. this is my form.




<div id='wrapper'>

    <div id='chatbox'>


    </div>

    <div id='chat'>

        <?php echo CHtml::beginForm(array(''), 'post'); ?>


        <?php echo CHtml::activeTextField($model, 'Text'); ?> <?php echo CHtml::SubmitButton('send', array('class'=>'btn btn-primary')); ?>


        <?php echo CHtml::endForm(); ?>

    </div>

</div>

it is meant to be a chat, if you need to see hows my controller action, here it is:




public function actionIndex()

{

    // renders the view file 'protected/views/site/index.php'

    // using the default layout 'protected/views/layouts/main.php'

    $model = new Chat;

    $chat = Chat::model()->findAll();


    if(Yii::app()->user->isGuest)

        $this->redirect(array('Login'));


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

    {

        $model->Text = $_POST['Chat']['Text'];


        $model->date = date("Y-n-j");

        $model->time = date("H:i:s");

        $model->users_id = Yii::app()->user->id;

        $model->save();

    }


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

}

i just need the text field or the button to not update the page or redirect when its submitting. its ajax but i dont know how it works on yii.

2

You have to use a ajaxSubmitButton and specifiy a div where the ajax-response will be displayed.





<div id='wrapper'>

    <div id='chatbox'>


    </div>

    <div id='chat'>

        <?php echo CHtml::beginForm(array(''), 'post'); ?>


        <?php echo CHtml::activeTextField($model, 'Text'); ?> 

        <?php echo CHtml::ajaxSubmitButton(

              'send', //the label

              '', //the url = index if empty (or set to another controllerAction)

               array('update'=>'#ajax-response',)  // the ajax-options: display the response inside this div  

               array('class'=>'btn btn-primary') //your htmlOptions

              ); 

              ?>


        <?php echo CHtml::endForm(); ?>

    </div>

    

    Your ajax-response here:   

    <div id='ajax-response'></div>


</div>

You controller action


public function actionIndex()

{

    // renders the view file 'protected/views/site/index.php'

    // using the default layout 'protected/views/layouts/main.php'

    $model = new Chat;

    $chat = Chat::model()->findAll();


    if(Yii::app()->user->isGuest)

        $this->redirect(array('Login'));


    if(Yii::app()->request->isAjaxRequest) //check if is an ajax request

    {

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

       {

         $model->Text = $_POST['Chat']['Text'];


         $model->date = date("Y-n-j");

         $model->time = date("H:i:s");

         $model->users_id = Yii::app()->user->id;


         if($model->save() //Response, only if no validation error 

         {

            echo $model->users_id .': ' .$model->Text; //your ajax response

         }   

         else 

         {

           echo CHtml::errorSummary($model); //return the validation errors

         }

           

         Yii::app()->end(); //stop yii to send the response 

       }

    }


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

}

This only shows the latest answer in the response-div.

You have to use the ‘success’ ajax-option instead of ‘update’ and use jQuery.append() to add the response to previous items.

Something like:




CHtml::ajaxSubmitButton(

 ...

 'success' => 'js:function(data){ //success instead of update

              

                   $("#ajax-response").append(data);                              

                }

             }',

Take a look at: ajax form submitting

Here is one of the simplest yii ajax example (not checking isAjaxrequest …)

Yii Playground (Example 3)