[vanki]

Hi.

Can anybody point me to some source of examples How to use javascript in Yii?
e.g.
I have form with radiocheck where one can check male or female. After that there is activeDropDownList where you can choose size of a shoes. If you are man -> male size, if women -> female size.

Can you show me how can I change data (listData()) in activeDropDownList using pure javascript? I found some example but always with ajax and some controller/action , so not directly on the page.

Thanks a lot.

[dimis283]

The idea is simple.
You send the reguest with ajax at your controller (see for example Ajax.request for prototype)
createurl
So the action get the parameters and fill the listdata (men or women)
you may search here

[vanki]

dimis283, on 02 February 2010 - 10:13 AM, said:

The idea is simple.
You send the reguest with ajax at your controller (see for example Ajax.request for prototype)
createurl
So the action get the parameters and fill the listdata (men or women)
you may search here

Is it any evidence to do this way than on the page? Is this pattern (ajax->controller on the server -> page) better than js on page? I understand that this is much more conform MVC , personlly dont like js so Iam happy with your recommendation. But I want code according "the best practises"....

Thank you
Petr

[dimis283]

Anyway how will you get the data for the dropdown.
I suppose that will be heavier the page when you get all the data at the page so to use it with the javascript.
I remember that I used something simiral (an ajax upate of a dropdown) after the insertion of data at a form(with cakephp-php 4 ).

[vanki]

I rebuild my old pages about obesity. I got personal height and weight in the form. If BMI (body mass index = weight/height^2) is < 25 then user is able to choose from dropDownList different scenarios "how to lose weight". So I have data for a dropDownList in advance and I use javacsript only for choosing correct offer in a dropDownList. And I want to rewrite using Yii. That's all :-)
I found some example where there are direct use of javascript:
CHtml::link(,,array('onclick'=>'return someFunction()') or CHtml:clientChange() but I coudn't find right way (usage of clientChange() I totally missed :-) ).
Sure ajax is way how to do that but I think maybe to robust for such simple example.

Thanks for your help

Petr

[dimis283]

If the data is just sume elements I thing will be ok with javascript and with big data ajax will be better.
I have done also this stuff with javascript

[vanki]

dimis283, on 03 February 2010 - 01:32 AM, said:

If the data is just sume elements I thing will be ok with javascript and with big data ajax will be better.
I have done also this stuff with javascript

OK. So can you show me how is it possible to use javacsript in Yii? I coudn't find right way
My question: How can I call js function after filling up activeTextFiled in form?
Thanks a lot.

[dimis283]

I thing you will use plain javascript, the only need is to know the id of the elements of the page (I suppose of the form) and with CHtml (there is a htmloptions as I know array('onchange'=>'myfunction') I thing you can set them by yourself.

[vanki]

dimis283, on 03 February 2010 - 04:15 AM, said:

I thing you will use plain javascript, the only need is to know the id of the elements of the page (I suppose of the form) and with CHtml (there is a htmloptions as I know array('onchange'=>'myfunction') I thing you can set them by yourself.

Yes, that is exactly what I want.

Original js function where I change SELECT OPTION...

function CalcBMI() {
    var weight = document.loginForm.weight.value;
    var height = document.loginForm.height.value;
		document.getElementById("bmi").innerHTML = "";
    if (weight != parseFloat(weight))
      return false;

    if (height != parseFloat(height))
      return false;

    height = parseFloat(height) / 100.;
    var bmi = parseFloat(weight)/height/height;
    bmi = Math.round(bmi*10)/10;
		document.getElementById("bmi").innerHTML = "Váš BMI:<br>" + "<" + "b" + ">" + bmi + "<" + "/b" + ">";
		if (bmi < 25)
	 	  document.getElementById("targetlist").innerHTML = '<SELECT NAME="target"><OPTION VALUE=2>chci udržet váhu po zhubnutí<OPTION VALUE=3>chci zlepšit životní styl';
	 	else
      document.getElementById("targetlist").innerHTML = '<SELECT NAME="target"><OPTION VALUE=1>chci hubnout<OPTION VALUE=2>chci udržet váhu po zhubnutí<OPTION VALUE=3>chci zlepšit životní styl';

  }

Now I want call function 'onchange'=>'return CalcBMI()' but I dont know how to pass changed OPTIONs directly to activeDropDownList.

<table border="0">
<tr><td width="100">
<?php echo CHtml::activeLabelEx($model,'height'); ?>
</td><td>
<?php echo CHtml::activeTextField($model,'height',array('size'=>3,'maxlength'=>3, 'onchange'=>'return CalcBMI()')); ?>
&nbsp;v cm
<?php echo CHtml::error($model, 'height'); ?>
</td></tr>
<tr><td>
<?php echo CHtml::activeLabelEx($model,'target'); ?>
</td><td>
<?php echo CHtml::activeDropDownList($model,'target', array('1'=>'Chci hubnout','2'=>'Chci udržet váhu po zhubnutí','3'=>'Chci zlepšit životní styl')); ?>
</td></tr>

Thanks
Petr

[dimis283]

This ?

[vanki]

dimis283, on 04 February 2010 - 02:44 AM, said:

This ?

thanks a lot, it looks good. Javascript is not my cup of tee.

Petr

[vanki]

to Dimis283

dimis283, on 02 February 2010 - 10:13 AM, said:

The idea is simple.
You send the reguest with ajax at your controller (see for example Ajax.request for prototype)
createurl
So the action get the parameters and fill the listdata (men or women)
you may search here

I feel ashamed for my stupid question, but if you didnt loose your patience one question more.
As you recommended I try solve my problem with ajax. I start with examples from cookbook. This this example works fine but this one not whole.
I simplified (remove calling database):

controller:

    public function actionDynamiccities()
    {
    if(Yii::app()->request->isAjaxRequest && isset($_POST['country_id'])) echo "ajax & POST" . print_r($_POST);
    else echo "ajax & NO";

        if (1 == 1){
        echo CHtml::tag('option',array('value'=>'1'),CHtml::encode('test1'),true);
        echo CHtml::tag('option',array('value'=>'2'),CHtml::encode('test2'),true);
        echo CHtml::tag('option',array('value'=>'3'),CHtml::encode('test3'),true);
        }else{
            echo CHtml::tag('option',
                   array('value'=>'1'),CHtml::encode('test2'),true);
        }
    }

and view:

<?php
echo CHtml::dropDownList('country_id','', array(1=>'USA',2=>'France',3=>'Japan'),
array(
'ajax' => array(
'type'=>'POST', //request type
'url'=>'dynamiccities', //url to call
//'update'=>'#city_id', //selector to update
//'data'=>'js:javascript statement'
//leave out the data key to pass all form values through
 'success'=>'js: function(msg) { alert(msg); }'
)));

echo "<br>";
//empty since it will be filled by the other dropdown
echo CHtml::dropDownList('city_id','', array());
?>

When I change dropDownList (country_id) page generates ajax request (see. if(Yii::app()->request->isAjaxRequest) but I can't get any data from $_POST. Where do I mistake?

Thanks

[dimis283]

As I test it there is an error. There are no form tags

[yiiblablabla]

I am getting this problem too, the $_POST from ajax request is comming out empty and i can't get it to work !! Do you have any idea ?

Thanks in advance

[yiiblablabla]

I knew what was wrong, it was just a whitespace in the parameter posted to the function! solved