Yii 1.1: formdialog

Form dialog allow you to transform each create link in a ajax/dialog link.
12 followers

This extension provide an easy way to implement this wiki.

Requirements

Yii 1.1 or above

Usage

Extact the folder in the extensions folder.

Enhance the action create

We need to enhance the action create of the classroom controller.

Let's change it this way:

public function actionCreate()
    {
        $model=new Classroom;
 
        // Uncomment the following line if AJAX validation is needed
        // $this->performAjaxValidation($model);
 
        if(isset($_POST['Classroom']))
        {
            $model->attributes=$_POST['Classroom'];
            if($model->save())
            {
                if (Yii::app()->request->isAjaxRequest)
                {
                    exit CJSON::encode(array(
                        'status'=>'success', 
                        'message'=>"Classroom successfully added"
                        ));
 
                }
                else
                    $this->redirect(array('view','id'=>$model->id));
            }
        }
 
        if (Yii::app()->request->isAjaxRequest)
        {
            exit CJSON::encode(array(
                'status'=>'failure', 
                'form'=>$this->renderPartial('_form', array('model'=>$model), true)));
 
        }
        else
            $this->render('create',array('model'=>$model,));
    }

We add some small changes: in case of ajax request we write a json encoded array.

In this array we return a status (failure/success) and the whole form created with renderPartial.

Change the link

Choose the link you want to make dialog and change from this:

<?php echo CHtml::link('Create', array('create')) ?>

To this:

<?php echo CHtml::link('Create', array('create'), array('class'=>'create')) ?>
<?php $this->widget('application.extensions.formDialog.FormDialog', array('link'=>'a.create', 'options'=>array('onSuccess'=>'js:function(data, e){alert(data.message)}')))?>

In this way there at the on click instead of redirecting on the page create the create form will be open in a dialog, will be resubmitted all times needed for correct eventually input errors, and at success the message will be displayed.

You can use the option 'onSuccess' for do more interesting stuffs, like redirecting on the view page of the newly created item or reloading the CGridView if you are in the action index.

Total 7 comments

#10088 report it
zaccaria at 2012/10/04 01:41am
re: js error

Good point, I fixed it, thank

#10087 report it
yiqing95 at 2012/10/03 09:36pm
js error : TypeError: dialog.close is not a function [Break On This Error] dialog.close().detach();

after change :

dialog.close().detach();

to this :

dialog.dialog('close').detach();

every thing is ok now

#10071 report it
zaccaria at 2012/10/03 09:08am
duplicate css

Very interesting solution for duplicated input.

Using this widget you will get a json, so your solution has to be adapted.

About using a script, it is also a solution. This extension is meant to be an example of json form, and in fact consist only in a js file that does more or less the same of your script, I guess, + registering an activation script.

In this activation script you can pass a js function for choose what to do after the update.

It's more or less 30 lines of js code, I guess that there are tons of variant, this extension is only one of them

#10065 report it
phreak at 2012/10/03 06:27am
duplicate css/js

I have solved the problem with duplicate files with this(very clever) solution http://www.eirikhoem.net/blog/2011/08/29/yii-framework-preventing-duplicate-jscss-includes-for-ajax-requests/

I dont think we need a widget/component for this functionality(no offence). I have created a simple JS file which handles all $(a.ajax-link) elements and opens their href in modal window. With the above script I remove duplicate resources and everythink works fine. I can write a short wiki showing my implementation as it seems simpler.

#10060 report it
zaccaria at 2012/10/03 01:37am
you can with ajax/css

Load asyncronous script can add some problems, expecially if you rely on yii authomatically generated id.

First of all, try setting the fourth parameter of render partial to true:

'form'=>$this->renderPartial('_form', array('model'=>$model), true, true)));

This will process the client script and embed in the form.

Pay attention that if you reload jquery (and if you have a standard jquery script it will) you will kill all previously registered script, so you have to exclude jquery from scriptmap in case of ajax request.

#10053 report it
phreak at 2012/10/02 08:19am
yes

It works fine. May be if you run in debug mode FROM IDE it doesnt work.

Can I use this to load forms which contain ajax and other css/js files ? Or this works only on simple HTML forms ?

#10052 report it
Maxxer at 2012/10/02 07:12am
isAjaxRequest

does it work fine for you? I tried implementing the same wiki page but the isAjaxRequest wasn't reliable at all!

Leave a comment

Please to leave your comment.

Create extension
Downloads