Dynamics jquery forms without refresh page

jacko12 · June 7, 2012, 1:35pm

Hello,


==== Transport ====

  id

  TransportName


=== Customer ===

  id

  CustomerName

  CustomerPhone

I would like to know how to add a Customer from the Transport form. There is a dropdownlist like that who you can choose Customer from the Transport :

In the _form file:


			

<label for="Customer">Belonging customer</label>

<?php echo $form->dropDownList($model,'Customer_id', CHtml::listData(Customer::model()->findAll(), 'id', 'concatened')); ?>

I would like t

o add a "ADD" button or "+" to dynamically open a jquery pop up with the company form, after submit this form, it will update the dropdownList to continue complete the customer form and then submit the form.

Could you help me please ?

thanks

abennouna · June 7, 2012, 2:38pm

Hello and welcome to the forum

This is a classic, you have two wikis covering your situation:

[list=1]

[*]CJuiDialog and AjaxSubmitButton

[*]CJuiDialog for create new model

[/list]

Happy coding and testing

jacko12 · June 7, 2012, 2:46pm

Thank you very much, that seems exactly what I want. I didn’t find it.

jacko12 · June 7, 2012, 5:50pm

So, I tried the both

I have a problem with that one:

http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton

I replace that from the tutorial


<?php echo $form->dropDownList([b]$person,'jid'[/b],CHtml::listData(Job::model()->findAll(),'jid','jdescr'),array('prompt'=>'Select')); ?>

by


<?php echo $form->dropDownList([b]$model,'Customer_id'[/b],CHtml::listData(Customer::model()->findAll(),'id','CustomerName'),array('prompt'=>'Select')); ?>

because I had an error and I did not understand what does It means.

When I clic on create button, the Ajax pop-up appear but when I clic on "Create Customer" the dialogBox close and :

The database has not updated with the new Customer
The dropDownMenu does not update with the new value

Help me please,

Here my files:

_form (from the model Transport)




<div class="row">

.....

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

<div id="customer">

    <?php echo $form->dropDownList($model,'Customer_id',CHtml::listData(Customer::model()->findAll(),'id','CustomerName'),array('prompt'=>'Select')); ?>

	<?php echo CHtml::ajaxLink(Yii::t('customer','Create Job'),$this->createUrl('Customer/addnew'),array(

        'onclick'=>'$("#customerDialog").dialog("open"); return false;',

        'update'=>'#customerDialog'

        ),array('id'=>'showcustomerDialog'));?>

    <div id="customerDialog"></div>

</div>

.....

</div>

CustomerController.php




	public function actionAddnew() 

	{

                $model=new Customer;

        // Ajax Validation enabled

        $this->performAjaxValidation($model);

        // Flag to know if we will render the form or try to add 

        // new jon.

                $flag=true;

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

        {       $flag=false;

            $model->attributes=$_POST['Customer'];

 

            if($model->save()) {

                //Return an <option> and select it

                            echo CHtml::tag('option',

							array (

                                'value'=>$model->id,

                                'selected'=>true

                            ),

							CHtml::encode($model->CustomerName),true);

                        }

                }

                if($flag) {

                    Yii::app()->clientScript->scriptMap['jquery.js'] = false;

                    $this->renderPartial('createDialog',array('model'=>$model,),false,true);

                }

	}

My createDialog.php


<?php 

$this->beginWidget('zii.widgets.jui.CJuiDialog',array(

                'id'=>'customerDialog',

                'options'=>array(

                    'title'=>Yii::t('customer','Create customer'),

                    'autoOpen'=>true,

                    'modal'=>'true',

                    'width'=>'auto',

                    'height'=>'auto',

                ),

                ));

echo $this->renderPartial('_formDialog', array('model'=>$model)); ?>

<?php $this->endWidget('zii.widgets.jui.CJuiDialog');?>

_formDialog




<div class="form" id="customerDialogForm">


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

    'id'=>'customer-form',

    'enableAjaxValidation'=>true,

)); 

//I have enableAjaxValidation set to true so i can validate on the fly the

?>

 

    <p class="note">Fields with <span class="required">*</span> are required.</p>

 

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

 

    <div class="row">

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

        <?php echo $form->textField($model,'id',array('size'=>60,'maxlength'=>90)); ?>

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

    </div>

 

    <div class="row">

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

        <?php echo $form->textField($model,'CustomerName',array('size'=>60,'maxlength'=>180)); ?>

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

    </div>

 

    <div class="row buttons">

        <?php echo CHtml::ajaxSubmitButton(Yii::t('Customer','Create Customer'),CHtml::normalizeUrl(array('Customer/addnew','render'=>false)),array('success'=>'js: function(data) {

                        $("#model").append(data);

                        $("#customerDialog").dialog("close");

                    }'),array('id'=>'closecustomerDialog')); ?>

    </div>

 

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

 

</div>

Thank you, (I’m a beginner)

abennouna · June 7, 2012, 5:55pm

Hi again.

Can you inspect the ajax error description in Firebug? If not, you should.

OTOH, have you allowed the addnew action in the accessRules of your controller?

jacko12 · June 7, 2012, 6:33pm

Hi bennouna

Yes, I added it in the accessRules,

Thank you for the tips, I instaled it and tried with Firebug, the problem was I can’t create a customer without a company, so I just add a fiel form the company and that’s now ok, the Customer has been created by the actionAddnew =)

there is a probleme that persists, the return has not sent to the dropdown menu.

I think the probleme has here because I replace that from the tutorial


<?php echo $form->dropDownList([b]$person,'jid'[/b],CHtml::listData(Job::model()->findAll(),'jid','jdescr'),array('prompt'=>'Select')); ?>

by


<?php echo $form->dropDownList([b]$model,'Customer_id'[/b],CHtml::listData(Customer::model()->findAll(),'id','CustomerName'),array('prompt'=>'Select')); ?>

I don’t know how to redirect the result to my dropdownmenu bellow

In the tutorial it is explain that :

abennouna · June 7, 2012, 6:41pm

Hi again

I think that you should change the end of your _formDialog into:


   <div class="row buttons">

        <?php echo CHtml::ajaxSubmitButton(Yii::t('Customer','Create Customer'),CHtml::normalizeUrl(array('Customer/addnew','render'=>false)),array('success'=>'js: function(data) {

                        $("#Transport_Customer_id").append(data);

                        // or

                        // $("#' . CHtml::activeId($model, 'Customer_id') . '").append(data);

                        $("#customerDialog").dialog("close");

                    }'),array('id'=>'closecustomerDialog')); ?>

    </div>

jacko12 · June 7, 2012, 6:46pm

bennouna:

Hi again

I think that you should change the end of your _formDialog into:


   <div class="row buttons">

        <?php echo CHtml::ajaxSubmitButton(Yii::t('Customer','Create Customer'),CHtml::normalizeUrl(array('Customer/addnew','render'=>false)),array('success'=>'js: function(data) {

                        $("#Transport_Customer_id").append(data);

                        // or

                        // $("#' . CHtml::activeId($model, 'Customer_id') . '").append(data);

                        $("#customerDialog").dialog("close");

                    }'),array('id'=>'closecustomerDialog')); ?>

    </div>

Thank you very much for your help, that solve my problem ! =)

jacko12 · June 8, 2012, 10:16am

Hello, =)

I have a probleme with the controler, it add several entry in the database (first time I clicked => One entry, second time I clicked => 2 entry, Third time I clicked New customer and submit => 3 entry). [BelongingCustomer.jpg]

The same, if I open and close 3 time the box, and then open the box and finally create a customer, I will have 4 times the same client.

I think there is a problem with the scriptmap:

In my CustomerController the action Addnew()


	public function actionAddnew() 

	{

                $model=new Customer;

        // Ajax Validation enabled

        $this->performAjaxValidation($model);

        // Flag to know if we will render the form or try to add 

        // new jon.

                $flag=true;

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

        {       $flag=false;

            $model->attributes=$_POST['Customer'];

 

            if($model->save()) {

                //Return an <option> and select it

                            echo CHtml::tag('option',

							array (

                                'value'=>$model->id,

                                'selected'=>true

                            ),

							CHtml::encode($model->CustomerName),true);

                        }

                }

                if($flag) {

                    Yii::app()->clientScript->scriptMap['jquery.js'] = false;

                    $this->renderPartial('createDialog',array('model'=>$model,),false,true);

                }

	}

Thank you

abennouna · June 8, 2012, 10:21am

Hi again

This is also a classic. I may be wrong, but I guess that you have debug disabled in your webapp, so you’ll need


Yii::app()->clientScript->scriptMap['jquery.min.js'] = false;

or to solve it regardless of debug mode:


…

if($flag) {

    Yii::app()->clientScript->scriptMap=array(

                        (YII_DEBUG ? 'jquery.js' : 'jquery.min.js') => false,

                        //'jquery-ui.min.js' => false,

                        //'jquery-ui-i18n.min.js' => false,

                        //'jquery.yiiactiveform.js' => false,

                    );

    $this->renderPartial('createDialog',array('model'=>$model),false,true);

}

…

I also added the three other commented lines for one reason: I register them in the main view in order to load them (if needed in the view or the modal dialog) before the dialog is opened. Otherwise, Yii tries to load them again when opening the dialog and when you’re live, that would cause longer loading times…

jacko12 · June 8, 2012, 11:04am

Hi bennouna, thank you again to help me.

It didn’t work then I tried that :

anandhi at 2011/03/15 06:37pm

Multiple ajax submission If you have submit button on Dialog

/*This will fix multiple ajax submittion problem */
$this->beginWidget('zii.widgets.jui.CJuiDialog',array( 'id'=>"dmaDialog", 'options'=>array( 'closeOnEscape'=>true, 'title'=>Yii::t("dma",'CREATE DMA'), 'autoOpen'=>true, 'modal'=>'true', 'width'=>'450px', 'height'=>'auto', 'resizable' =>false, 'close'=>"js:function(e,ui){
/* Use the below undelegate function to destroy JQuery event. Otherwise when you open dialog 1st time, It will do ajax submission 1 time, if you open 2end time, It will submit 2 times etc… You could see the ajax submission in firebug */ jQuery(‘body’).undelegate(’#closeDmaDialog’, ‘click’);
                    jQuery('#dmaDialog').empty();

                 }",

            ),

            ));

But event if I add that I have multiple ajax submission,


   

<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog',array( 

				'id'=>"customerDialog", 

				'options'=>array( 

					'closeOnEscape'=>true, 

					'title'=>Yii::t("customer",'Create customer'), 

					'autoOpen'=>true, 

					'modal'=>'true', 

					'width'=>600, 

					'height'=>500, 

					'close'=>"js:function(e,ui){jQuery('#customerDialog').empty();}",

            ),

            ));

			echo $this->renderPartial('_formDialog', array('model'=>$model)); ?>


?>

<?php $this->endWidget('zii.widgets.jui.CJuiDialog');?>

Thank you

abennouna · June 8, 2012, 11:12am

Yes, I totally forgot about that. I had implemented that fix as well but it wasn’t enough, I googled and searched on this forum, tested many options, debugged a bit, and ended with a code, like this:


/*This will fix multiple ajax submission problem */

/* Unless the user clicks very fast (eg double-click) on the dialog submit,

    then another test should be done at the controller side */

// http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton/#c3095

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

                    'id'=>'customerDialog',

                    'options'=>array(

                        'closeOnEscape'=>true,

                        'title'=>Yii::t('customer','Create customer'),

                        'autoOpen'=>true,

                        'modal'=>'true',

                        'width'=>'600',

                        'height'=>'500',

                        'close'=>"js:function(e,ui){

                            $('body').undelegate('#closecustomerDialog', 'click');

                            $('#customerDialog').empty();

                            $('.ui-dialog').empty();

                        }",

                    ),

            ));

abennouna · June 8, 2012, 11:18am

And to resolve also the double-click problem (yes, some users tend to double-clicks on submit buttons…), I do it in the controller, but it’s more up to you. For instance, you could say that something should be unique (customer name), or greater (in my case, I had bids, and obviously one cannot submit the same bid amount twice), etc.

Anyway, it’s either a simple matter of validation. In your case, setting your customer name as unique in the validation rules should prevent Yii from saving the customer again, maybe even without applying the fixes above, see what I mean?

jacko12 · June 8, 2012, 2:57pm

bennouna:

Yes, I totally forgot about that. I had implemented that fix as well but it wasn’t enough, I googled and searched on this forum, tested many options, debugged a bit, and ended with a code, like this:


/*This will fix multiple ajax submission problem */

/* Unless the user clicks very fast (eg double-click) on the dialog submit,

    then another test should be done at the controller side */

// http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton/#c3095

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

                    'id'=>'customerDialog',

                    'options'=>array(

                        'closeOnEscape'=>true,

                        'title'=>Yii::t('customer','Create customer'),

                        'autoOpen'=>true,

                        'modal'=>'true',

                        'width'=>'600',

                        'height'=>'500',

                        'close'=>"js:function(e,ui){

                            $('body').undelegate('#closecustomerDialog', 'click');

                            $('#customerDialog').empty();

                            $('.ui-dialog').empty();

                        }",

                    ),

            ));

Thank you bennouna, that solve my probleme

So I did the same stuff as “Customer for transport” to “Company for Customer”, that works when I go to the Customer\create form, I can add a company if it doesn’t exist.

Now, because I tried to add a ajax form in an other ajax form (a transport have a customer, a customer have a company !), I have an other probleme.

Because if I insert the code below (#3) in my customer’s _formDialog that doesn’t works (both dialogs boxes are close after submit the company form).

b[/b]


<div class="row buttons">

        <?php echo CHtml::ajaxSubmitButton(Yii::t('Company','Create company'),CHtml::normalizeUrl(array('Company/addnew','render'=>false)),array('success'=>'js: function(data) {

                        $("#Customer_Company_id").append(data);

                        // or

                        //$("#' . CHtml::activeId($model, 'Company_id') . '").append(data);

                        $("#companyDialog").dialog("close");

                    }'),array('id'=>'closecompanyDialog')); ?>

    </div>

So thats what I tried :

(Comment the code b[/b]


close'=>"js:function)

that solve the probleme of the multiple closed Dialogboxes (it close only the company dialog boxe like I want) but I came back with the precedent probleme => several submission for company.

An other problem : the create button doesn’t close the customer’s Dialogbox (only after added a new company, else it works)

b[/b]


<?php


$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

                    'id'=>'companyDialog',

                    'options'=>array(

                        'closeOnEscape'=>true,

                        'title'=>Yii::t('company','Create company'),

                        'autoOpen'=>true,

                        'modal'=>'true',

                        'width'=>'600',

                        'height'=>'500',

                        // 'close'=>"js:function(e,ui){

								// $('body').undelegate('#closecompanyDialog', 'click');

								// $('#companyDialog').empty();

								// $('.ui-dialog').empty();

                        // }",

                    ),

            ));

			

			echo $this->renderPartial('_formDialog', array('model'=>$model)); ?>

			<?php $this->endWidget('zii.widgets.jui.CJuiDialog');

			

			?>

Have you already tried to do something like that ? (dialog in dialog )

Thank you,

Jack

jacko12 · June 8, 2012, 3:08pm

Maybe there is an easier way to add my company (not necessarily with a complete form) if it is missing in my dropdown list ?

abennouna · June 8, 2012, 3:17pm

Hi Jack.

No, I haven’t had the opportunity yet, and it’ll certainly need some tweaks.

Have you debugged the code in your browser to see what happens exactly? Have you googled it?

Cheers