№10 Dars - Yii da modal va ajaxdan foydalanish.

Ajax so`rovi bilan ma`lumotlar omboriga modaldan foydalanib ma`lumotlar qo`shish masalasini ko`rib chiqamiz. Avvalambor ma`lumotlar omborida jadval yaratishdan boshlaymiz. Buning uchun quyidagi havoladagi koddan foydalanib jadval yaratamiz. Model hosil qilamiz va index.php viewimizga quyidagicha kod kiritamiz.

/protected/views/site/index.php

<?php
    $this->widget('bootstrap.widgets.TbButton',array(
        'label' => Yii::t('Message', 'Add'),
        'type' => 'primary',
        'size' => 'medium',
        'htmlOptions'=>array(
            'onclick'=>' 
                $(".ui-dialog-titlebar > #ui-dialog-title-dialog_form").text("Modal");
                $("#dialog_form .update-dialog-content ").html("<h4><i>Loading... </i><h4>");
                addcompany();
                $("#dialog_form").dialog("open");
                return false;'
        ),
    ));
?>
<?php
    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
        'id' => 'dialog_form',
        'options' => array(
            'title' => 'qale',
            'autoOpen' => false,
            'modal' => true,
            'position' => array(center,60),
            'width' => 550,
            'resizable' => false,
        ),
        'htmlOptions'=>array('style'=>'opacity:1;'),
    ));
?>
<div class="update-dialog-content"></div>
<?php $this->endWidget(); ?>
<script type="text/javascript">
 function addcompany()
{
    <?php echo CHtml::ajax(array(
        'url'=>array( 'site/create' ),
        //  modal formasining ichidagi qiymatlarni serverga jo`natmoqda
        'data'=> "js:$('#dialog_form div.form form' ).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data){
        // natija birinchi bor "failure" qaytadi. Agarda xatolik bo`lib "save" qila olmasa ham "failure" qaytadi
                if (data.status == 'failure')
                {
                    $('.ui-dialog-titlebar > #ui-dialog-title-dialog_form').text('Add company');
                    $('#dialog_form .update-dialog-content ').html(data.div);                      
                    //  qachonki "add" viewimizdagi button bosilsa yana shu funksiyaga murojaat qiladi
        $('#dialog_form div.form form').submit(addcompany);                     
                }
                if(data.status == 'success')
                {
                     // yuborilgan qiymatlar jadvalga qo`shilishi muvofaqiyatli tugasa, modal oynamiz yopiladi
                    $('#dialog_form').dialog('close');
                    // $.fn.yiiGridView.update('add-grid');
                }
                if(data.status == 'exist')
                {
                    // serverdan qandaydir xatolik qaytsa
                    alert('xato');
                }
            }",
            ))
    ?>
    return false;
}
</script>

va "site" controllerimizga quyidagicha action qo`shamiz:

/protected/controllers/site

public function actionCreate()
 {
  $model = new Company;
        if( isset( $_POST['Company'] ) )
        {  
             // kelgan POST qiymatlar model attributlariga berilmoqda
             $model->attributes = $_POST['Company'];
             if( $model->save() ) 
             {
                      if (Yii::app()->request->isAjaxRequest)
                      {
                              Yii::app()->clientScript->scriptMap['jquery.js'] = false;
                               echo CJSON::encode( array(
                'status' => 'success',
                'div' => 'created',
          ));
          exit();
 }
 else
          $this->redirect( array( 'add' ) );
                }
       }
       if (Yii::app()->request->isAjaxRequest)
       {
               Yii::app()->clientScript->scriptMap['jquery.js'] = false;
               Yii::app()->clientScript->scriptMap['bootstrap.min.js'] = false;
               Yii::app()->clientScript->scriptMap['bootstrap.notify.js'] = false;
               Yii::app()->clientScript->scriptMap['bootstrap.bootbox.min.js'] = false;
               echo CJSON::encode( array(
                    'status' => 'failure',
                    'div' => $this->renderPartial('add',array(
                    'model'=>$model,
                    ),true,true),
                ));
                exit();
}
}

"add" viewimizning ko`rinishi quyidagicha bo`ladi:

/protected/views/site/add.php

<div class="form">
    <?php
    $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
        'id'=>'add-form',
        // forma ichidagi komponentlarimizning tartiblanishini belgilash
        'type'=>'horizontal',
    )); ?>
    <table>
        <tbody>
            <tr>
                <td>
                    <?php echo $form->label($model,'company'); ?>
                </td>
                <td colspan="2">
                    <?php echo $form->textField($model,'company'); ?>
                    <div><?php echo $form->error($model,'company'); ?></div>
                </td>
            </tr>
            <tr>
                <td>
                    <?php echo $form->label($model,'site'); ?>
                </td>
                <td colspan="2">
                    <?php echo $form->textField($model,'site'); ?>
                    <div><?php echo $form->error($model,'site'); ?></div>
                </td>
            </tr>    
        </tbody>
    </table>
    <div class="buttonswrap">
        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'type'=>'primary', 'label'=>'Save')); ?>
    </div>
   <?php $this->endWidget(); ?>
</div><!-- form -->

Ko`rib turganingizdek ma`lumotlarni modal komponenti orqali qo`shmoqdamiz. Bu yerda web ilovamiz qayta yuklanmay turib server bilan ishlamoqda. Bu ishimiz web ilovalarni client interfeysini qilayotganimizda ancha foydali bo`ladi. Ancha qulay va samarali.