Ajax - Change 4 Fields with one AJAX Request..

Andreas123 · March 15, 2011, 9:28pm

Hi Guys,

I have a dropDown field with AJAX code…

Once a user changes selection I want to update the content of 4 different TextFields.

How do I do that? Right now I can only update one textField.

THX

Here is the form snippet:




		<?php echo $form->label($model,'country'); ?>

		<?php 

			echo CHtml::activedropDownList($model,'country',$model->getCountryOptions(),

				array(

					'ajax' => array(

						'type'=>'POST', //request type

						'url'=>CController::createUrl('user/DynamicStates'), 

						//Style: CController::createUrl('currentController/methodToCall')

						'update'=>'#text1',

						//'data'=>'js:javascript statement' 

						//leave out the data key to pass all form values through

					)

				)

			);

		?>




                <?php echo CHtml::textField('text1', 'some value1'); ?>

                <?php echo CHtml::textField('text2', 'some value2'); ?>

                <?php echo CHtml::textField('text3', 'some value3'); ?>

                <?php echo CHtml::textField('text4', 'some value4'); ?>

anupam_sam · March 16, 2011, 1:09am

U should return JSON encoded data from the controller action.

checkout CJSON::encode or CJavaScript::jsonEncode for that.

Then u can put the values to text fields as below.

try this:




echo CHtml::activedropDownList($model,'country',$model->getCountryOptions(),

array(

	'ajax' => array(

	'type'=>'POST', //request type

	'dataType'=>'json',

	'url'=>CController::createUrl('user/DynamicStates'),

	'success'=>'function(data){

		$("#text1").text(data.text1);

		$("#text2").text(data.text2);

		$("#text3").text(data.text3);

		$("#text4").text(data.text4);

		}')

	)

);

Andreas123 · March 16, 2011, 5:30pm

Yes! THX that works!

anupam_sam · March 16, 2011, 11:04pm

welcome, anytime!

postodin · May 6, 2011, 8:24pm

Hi andreas123

Can you put your controller code please? i have some difficulty with CJSON in my controller.

thanks you

P.S:

sorry if i make some mistake ^^ i’m French

kuanfai · July 19, 2011, 3:13am

I have the same logic in my form but I can’t get the 4 text fields updated with the json object.

In my controller




public function actionLoadPubConfig() {

//...codes to set the variables below


        echo CJSON::encode(array(

            'adminname'=>$adminname,

            'adminemail'=>$adminemail,

            'csemail'=>$csemail,

            'aooemail'=>$aooemail

}

and my form:




<?php echo EHtml::activeDropDownList($model, 'pub', $model->pub_list,

                        array(

                            'ajax' => array(

                                'type' => 'POST',

                                'dataType'=> 'json',

                                'url' => CController::createUrl('loadPubConfig'),

                                'success'=>'function(data){

                                     $("#AddEventForm_adminname").text(data.adminname);

                                     $("#AddEventForm_adminemail").text(data.adminemail);

                                     $("#AddEventForm_csemail").text(data.csemail);

                                     $("#AddEventForm_aooemail").text(data.aooemail);

                                }',

                            )

                        ));?>

the first time when i change the value of pub field, the string will be output to the page, but the text fileds are not updated:

after the second time i change the pub field, the string on the page is not update, neither the 4 text fields. but there is an error message in jquery:

please help! thanks.

kuanfai · July 19, 2011, 7:57am

how come in my case the success function was not executed at all?

kuanfai · July 19, 2011, 9:34am

solved, found there is another place to call the ajax function.

tturnquist · October 5, 2011, 7:08pm

Sorry to grab this old post, but it is exactly what I was looking for – and I can’t quite get it to work right…

I used Gii to set up my model so I did not write some of this*, but here is what I have:

views/NC/pobased/_form.php contains


...

	<div class="row">

		<?php 

                echo $form->labelEx($model,'PO_NUM'); ?>

		<?php echo $form->textField($model, 'PO_NUM'

                        , array(

                            'ajax'=>

                                array('type'=>'GET'

                                 , 'url'=>CController::createUrl( $this->id ."/changeStuff")

                                 , 'dataType'=>'json'

                                 , 'success'=>'function( myData ) {

                                     $("#' . CHtml::activeId( $model, 'TOTAL_SIZE_LOT') .'" ).text(myData.tot_size_lot);

                                     $("#' . CHtml::activeId( $model, 'TOTAL_SIZE_LOT') .'" ).refresh;

                                     $("#' . CHtml::activeId( $model, 'VENDOR') .'" ).text(myData.vendor);

                                     $("#' . CHtml::activeId( $model, 'VENDOR_NC_HANDLER') .'" ).text(myData.ven_nc_handler);

                                     var o = $("#' . CHtml::activeId( $model, 'PART_NO') .'" );

                                     for( var i in myData.part_nos ){

                                         o.append($(\'<option></option>\').val(myData.part_nos[i]["ID"]).html(myData.part_nos[i]["NAME"]));

                                     }

                               }'

                     )   ) ); ?>

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

	</div>

and my PoBasedController is an instance of controllers/NC/HeadController.php which contains:




        public function actionChangeStuff(){

         $sql = <<<EOD

SELECT POLA.PART_NO as id

        , CONCAT( CONCAT( POLA.PART_NO , ' - ' ), IP.DESCRIPTION )AS name

FROM IFSAPP.PURCHASE_ORDER_LINE_ALL POLA JOIN IFSAPP.INVENTORY_PART IP ON POLA.PART_NO = IP.PART_NO

WHERE POLA.ORDER_NO = '{$_REQUEST['Pobased']['PO_NUM']}'

EOD;

         $connection = Yii::app()->db;

         $command = $connection->createCommand($sql);

         $data = $command->queryAll();

         $ret= array(

                'tot_size_lot' => 15,

                'vendor'        => "bob",

                'ven_nc_handler' =>'monkeyboy',

               'part_nos' => $data );


         echo json_encode( $ret );


     }

[OK, I confess that I have not finished getting the data from the DB for this, but that is easy.]

What happens when I run this in a browser is that none of my TextFields are updated, but my DropDownList works like a charm! Using Google Chrome’s Developer tools to step through the Javascript it shows that the TextField.textContent changes as expected to the values that I want it to, but they never “refresh” and show the data on the HTML page. What am I doing wrong?

Please advise.

Thanks,

Tim

*I am using an Oracle DB which uses all capitals for column and table names, so I when Gii set it up I was able to change my class names, but not my field/attribute names. I intend to clean this up, since it is soooo ugly to read, but I need it working first.

tturnquist · October 7, 2011, 5:55am

Just in case anyone finds this thread, I found my error. I used the JQuery function text() instead of val(). My code should have been


        <div class="row">

                <?php 

                echo $form->labelEx($model,'PO_NUM'); ?>

                <?php echo $form->textField($model, 'PO_NUM'

                        , array(

                            'ajax'=>

                                array('type'=>'GET'

                                 , 'url'=>CController::createUrl( $this->id ."/changeStuff")

                                 , 'dataType'=>'json'

                                 , 'success'=>'function( myData ) {

                                     $("#' . CHtml::activeId( $model, 'TOTAL_SIZE_LOT') .'" ).val(myData.tot_size_lot);

                                     $("#' . CHtml::activeId( $model, 'VENDOR') .'" ).val(myData.vendor);

                                     $("#' . CHtml::activeId( $model, 'VENDOR_NC_HANDLER') .'" ).val(myData.ven_nc_handler);

                                     var o = $("#' . CHtml::activeId( $model, 'PART_NO') .'" );

                                     for( var i in myData.part_nos ){

                                         o.append($(\'<option></option>\').val(myData.part_nos[i]["ID"]).html(myData.part_nos[i]["NAME"]));

                                     }

                               }'

                     )   ) ); ?>

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

        </div>

I found it helpful to actually read the JQueryAPIon such things because it says [quite clearly] when to use text() and when to use val() [my emphasis added]:

iqbalbaba · February 13, 2013, 9:37am

HI

BELOW is my code. when you type doc_name and Prefix and press tab key it should merge doc_name and Prefix textfields and display it in Preview field. Please help me.

<?php echo $form->labelEx($model,‘Doc_name’); ?>

<?php echo $form->textField($model,‘Doc_name’,array(‘size’=>50,‘maxlength’=>50)); ?>

<?php echo $form->error($model,‘Doc_name’); ?>

</div>

<?php echo $form->labelEx($model,‘Prefix’); ?>

<?php echo $form->textField($model,‘Prefix’,array(‘size’=>10,‘maxlength’=>10));?>

<?php echo $form->error($model,‘Prefix’); ?>

</div>

<?php echo $form->labelEx($model,‘Preview’); ?>

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

<?php echo $form->error($model,‘Preview’); ?>

</div>

Please help me

iqbalbaba · February 13, 2013, 11:30am

i need a code for the above problem, please help me

lalithkumar · September 1, 2013, 7:38pm

Anupam:

U should return JSON encoded data from the controller action.

checkout CJSON::encode or CJavaScript::jsonEncode for that.

Then u can put the values to text fields as below.

try this:
echo CHtml::activedropDownList($model,'country',$model->getCountryOptions(),

array(

	'ajax' => array(

	'type'=>'POST', //request type

	'dataType'=>'json',

	'url'=>CController::createUrl('user/DynamicStates'),

	'success'=>'function(data){

		$("#text1").text(data.text1);

		$("#text2").text(data.text2);

		$("#text3").text(data.text3);

		$("#text4").text(data.text4);

		}')

	)

);

lalithkumar · September 1, 2013, 7:46pm

Hi,

I am new to YII. Can post the entire code (Ajax - Change 4 Fields with one AJAX Request)for me to learn

Thanks

jigneshsav · September 11, 2013, 6:46am

Please Send your entire code, i found every where but failed plz pest entire code.