CODEWITHSUNDEEP
ajaxyii
SHANib
SHANib

Reputation: 718

how to display textbox on selecting an option in dropdown using ajax

This is the dropdown am using.. 

    <?php echo $form->labelEx($model,'status'); ?>
            <?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description()' )); ?>

How can i display a text box for description on selecting inactive dynamically...

please suggest some yii + ajax tutorials for beginners

Upvotes: 1

Views: 12160

Answers (3)

yardie
yardie

Reputation: 1

There no value is in the $_POST variable for the dynamic field that was created. i.e. the field that was created between the div tag.

Upvotes: 0

Alfredo Castaneda Garcia
Alfredo Castaneda Garcia

Reputation: 1659

What you're are trying to do is actually pretty simple, and, thanks to Yii's jQuery encapsulation, you don't need to worry about jquery code. Here is the reference: http://www.yiiframework.com/wiki/24/creating-a-dependent-dropdown#hh0 Anyway, let me show you how to do it. But before I have a question for you: does this line of code: array( 'onChange' => 'javascript:description()' ), was your attempt to solve this problem? Or does it has another functionality unrelated to this topic? If it is part of your attempt to solve the problem, then just delete it. You won't need that. As I told you before, you don't need to worry about actual jquery code, it is well encapsulated in Yii. Other way, if it is unrelated to this topic, let it where it is, of course.

Now, about the ajax update. First all all, we need a div where the text box will be displayed; I'll use the description_id div. Then, the ajax request is specified inside the dropdownlist() as follows:

<?php echo $form->labelEx($model,'status'); ?>
<?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description()', 
       'ajax'=>array(
          'type'=>'POST',
          'url'=>CController::createUrl('YourController/actionWhichEchoesTheTextBox'),
          'update'=>'#description_id',
))); 
?>
<div id="description_id">
</div>

You may notice that in the 'url' attribute of the ajax declaration we specified the function which will be called when the ajax request triggers. In the 'update' attribute we specified the div where will be displayed the result of calling the function specified in the url attribute.

Finally, all that's left to do is declare the action actionWhichEchoesTheTextBox(). It can be declare in any controller, but if it is not in the current controller, then you have to declare it as static method in order to make it accessible here. So to avoid any problem, you should declare it in the current controller, and it would look something like this:

    public function actionWhichEchoesTheTextBox()
   {
      if($_POST['ModelName']['status']===0)
         echo CHtml::textField("ModelName", 'description'/*attribute name*/) ; 
   }

And that's it.

Upvotes: 6

Rajat Singhal
Rajat Singhal

Reputation: 11264

How even we are today evening only I did the same thing..

create a div which will be invisible by default and when will contain the textbox and label for that whose name we can set based on the normal namings for the form...

and as you have already added description function onChange, in that function make the display of the div as block..

In the model you'll have to include variable name for that field of textbox if its not there in model alreay....(I assume you can take it from here...)

<?php echo $form->labelEx($model,'status'); ?>
<?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description(this.selectedIndex)' )); 
?>
<div id="description_id" style="display:none;">
<laabel for="...">..
<textarea name="ModelName[description]">....
</div>
<script>
function description(id)
{
if(id==0)
document.getElementById("description_id").style.display="block";
}
</script>

Upvotes: 3

Related Questions