Yii Framework Forum: activeDropDownList and Javascript - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

activeDropDownList and Javascript usage of js to activeDropDownList population Rate Topic: -----

#1 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 02 February 2010 - 08:50 AM

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.
0

#2 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 02 February 2010 - 10:13 AM

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
Posted Image
0

#3 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 02 February 2010 - 10:57 AM

View Postdimis283, 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
0

#4 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 02 February 2010 - 01:45 PM

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 ).
Posted Image
0

#5 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 02 February 2010 - 03:53 PM

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
0

#6 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 03 February 2010 - 01:32 AM

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
Posted Image
0

#7 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 03 February 2010 - 03:32 AM

View Postdimis283, 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 :blink:
My question: How can I call js function after filling up activeTextFiled in form?
Thanks a lot.
0

#8 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 03 February 2010 - 04:15 AM

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.
Posted Image
0

#9 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 03 February 2010 - 02:06 PM

View Postdimis283, 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
0

#10 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 04 February 2010 - 02:44 AM

This ?
Posted Image
0

#11 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 04 February 2010 - 03:31 AM

View Postdimis283, on 04 February 2010 - 02:44 AM, said:

This ?

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

Petr
0

#12 User is offline   vanki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 19-November 09
  • Location:Czech Republic, Kutna Hora

Posted 04 February 2010 - 05:40 AM

to Dimis283

View Postdimis283, 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
0

#13 User is offline   dimis283 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 277
  • Joined: 24-January 09

Posted 04 February 2010 - 07:02 AM

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

#14 User is offline   yiiblablabla 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 23-February 10

Posted 07 March 2010 - 12:14 PM

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
0

#15 User is offline   yiiblablabla 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 23-February 10

Posted 08 March 2010 - 12:06 PM

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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users