Problems with dependent dropDown

Well,

At first, i read various topics about this case, but none help me to resolve my problem.

I’ll talk about the my situation.

I have 3 tables: anunciantes, cidades, estados.

Anunciantes is a person, the user of site. In his register, the user will fill his cidades (city), and estados (state).

So, in the register form, he’s choose a state, than the dropDownList of cidades, have to be fed with the cityes (cidades), of that State (Estados).

Well, hope that i have been clear.

Now, i’ll show you my code.

The form’s part that have the dropDownLists


 <div class="row">

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


                <!--  Dropdown de Estados com chamada Ajax para atualizar dropDown de cidades -->

                <?php echo $form->dropDownList($mestados,'cod_estado',CHtml::listData($mestados->getAllEstados()->queryAll(), 'cod_estado', 'desc_estado'),

                        array(

                            'ajax'=>array(

                                'type'=>'POST',

                                'url'=>CController::createUrl('Anunciantes/getCidadesByEstado'),

                                'update'=>'#'.CHtml::activeId($mcidades,'cod_cidade'),

                            )));

                            

                ?>


                <!-- End dropDown Estados -->


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

	</div>


        <div class="row">

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

		<?php echo $form->dropDownList($mcidades,'cod_cidade', array()); ?>

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

	</div>

My actions create and getCidadesByEstado, and the accessRules


public function actionCadastro() #Action Create

        {

            $model = new Anunciantes;

            $mcidades = new Cidades();

            $mestados = new Estados();


            if (isset ($_POST['Anunciantes'])) {

                $model->atributes = $_POST['Anunciantes'];

                $model->cod_cidade = $_POST['Cidades']['cod_cidade'];

                $model->cod_estado = $_POST['Estados']['cod_estado'];


                if($model->save())

                        $this->redirect(array());

            }


            $this->render('Cadastro', array(

                'model'=>$model,

                'mcidades'=>$mcidades,

                'mestados'=>$mestados,

            ));

        }




        # Atualização dinamica de dropDown Cidade

         public function actiongetCidadesByEstado()

        {


             echo "teste";exit;


            $mcidades = new Cidades();


            $mcidades = Cidades::model()->findAll('cod_estado=:cod_estado',

                    array(':cod_estado'=>(int)$_POST['Estados']['cod_estado']));


            $mcidades = CHtml::listData($mcidades, 'cod_cidade', 'desc_cidade');


            foreach($mcidades as $value=>$name)

            {

                echo CHtml::tag('option',

                array('value'=>$value),CHtml::encode($name),true);

            }


        }




 public function accessRules()

	{

		return array(

			array('allow',  // allow all users to perform 'index' and 'view' actions

				'actions'=>array('cadastro','getCidadesbyEstado'),

				'users'=>array('*'),

			),

			

		);

	}

Before i forget, i used a echo "teste"; to see if the action is called correctly, but

the echo is not performed, although i don’t find any error in code.

Well, somebody knows what can by my problem?

Abraço

Seems it’s a case problem

Call your method actionGetCidadesByEstado instead of actiongetCidadesByEstado… and leave everything else as is…

Hi mdomba.

I tried the your suggestion, but the error persists.

No error is displayed, but the second dropDown don’t load the cities.

Replace the code





 <div class="row">

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

                <?php echo $form->dropDownList($mcidades,'cod_cidade', array()); ?>

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

        </div>




to




 <div class="row">

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

                <?php echo $form->dropDownList($model,'cod_cidade', array()); ?>

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

        </div>



and try.Make changes accordingly in ‘update’ part. Also remove the echo teste from the method being called. Call the original method.

Hi tad, i tried your suggestion too, but it’s not working.

The second dropDown don’t load the cities.

First you need to find out if the ajax call is been made…

the case was the problem… but you say that still no ajax call is made… could be permission problems… did you put getCidadesByEstado in the accessRules?

Check with firebug or similar browser addon to see if the ajax call is made and what is the result of the call…

Mdomba,

In the controller AnunciantesController i put the permission to GetCidadesByEstado.

Follow:




public function accessRules() {

   return array(

      array('allow',

              'actions'=>array('GetCidadesByEstado'),

              'users'=>array('*'),

      ),

   );

}



When i change the value of first dropDown, the ajax is called, but the action isn’t performed.

Can you explain this better… if the ajax is called… what is the URL that is called?.. is that the URL of that action you need?.. what is the result of the AJAX call?..

and note the proper case in the accessRules should be as I wrote you in the previous post… not as you put it…

Well, the URL that is called, is "Anunciantes/GetCidadesByEstado".

The action GetCidadesByEstado is in AnunciantesController.php

I don’t understand what you say about the result of ajax call.

And, what’s wrong with the permission that i post?

If you use firebug or similar addon for your browser then you can see what is the result of the ajax call… if there is any error you can see the error… if there are no error you can see what is returned from the ajax call…

Note the case of the letters (upper or lower G) in:

actionGetCidadesByEstado

getCidadesByEstado

so… in accessRule… instead of


'actions'=>array('GetCidadesByEstado'),

you need to put


'actions'=>array('getCidadesByEstado'),

Well, Even if the name of action is actionGetCidadesByEstado, with “G”, the name on accessrules should be getCidadesByEstado? That’s weird.

Anyway, i look at the code thats generated in my Html, and couldn’t find error.

See for yourself.


jQuery(function($) {

jQuery('body').undelegate('#Estados_cod_estado','change').delegate('#Estados_cod_estado','change',function(){jQuery.ajax({'type':'POST','url':'/emc001/Anunciantes/GetCidadesByEstado','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#Cidades_cod_cidade").html(html)}});return false;});

});

If you want help at least try what other suggest you before posting…

I wrote that you have an case error in the accessRules and you post the jQuery code ???

Have you tried what I wrote before?

btw

check the default code generated by Gii… for example the action create

the method is called "actionCreate"… but in the accssRules is "create"

Ah yeah, i understand now. Really, in the accesrules the actions is lowercases.

But, i tried this, and don’t work yet. I try using getcidadesbyestado too, but still don’t works.


public function accessRules()

	{

		return array(

			array('allow',  // allow all users to perform 'index' and 'view' actions

				'actions'=>array('cadastro','getCidadesByEstado'),

				'users'=>array('*'),

			),

			

		);

	}



To solve this… you really need to check with something like Firebug… to see what is called… and what is the result of the ajax call…

Well, that’s my problem.

In my previous post, i showed you the jquery that’s generated. There, the url sent to ajax is

/emc001/anunciantes/getcidadesbyestado.

That’s the correct url of the action, but the ajax can’t call the action. I try put the url in browser, and i can call the action correctly.

I don’t understanding the reason.

If you see the code in the HTML source… that does not mean that the ajax call has been made !

I don’t know how to tell you differently…

get firefox… install the addon called firebug… read a bit on how to use firebug… and run your page from firefox with firebug activated (F12)… then you will see if the ajax call is made and what is the result of it…

It would be this?




if ( !eventHandle ) {

elemData.handle = eventHandle = function( e ) {

// Discard the second event of a jQuery.event.trigger() and

// when an event is called after a page has unloaded

return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?

jQuery.event.handle.apply( eventHandle.elem, arguments ) :

undefined;

};

}



This is within the file jquery.js

No, just click on the Console tab in Firebug and the ajax call should show up. If not or if you see an error message, examine client code.

If present, but nothing under the response tab, debug the server code: enable file logging, add trace calls to the controller action, examine protected/runtime/application.log.

Good luck.

Edit: BTW Firebug is an extension to Firefox. See the Tools/Extensions menu.

/Tommy

I know Firebug, but never had worked with ajax before, so i’m sorry for my ignorance about this.

Now i understand what i have to do. I will try this, and return the result to you later.

Thanks

Shit…hahaha

Now it’s working fine. The echo that i had placed was blocking the function. I don’t know how i don’t think about before.

But, thank you all for your help.

Abraço