№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.
Manba:
Birinchi bo‘ling!