[Solved] Yiistrap - Textfieldcontrolgroup Prepend & Append

Yii 1.1 Extensions
1

Hi Chris,

I’ve switched to YiiStrap from Bootstrap and so far so good.

I’m using textFieldControlGroup with both a prepend and a append option.


<div id="institution_fee_indicator" >

		<?php echo $form->textFieldControlGroup($model,'institution_fee',array('class'=>'currency', 'prepend'=>'R', 'append'=>'%')); ?>

	</div>

I would like to use JavaScript to show and hide the prepend value and append value based on a selection in a radio button group. The JS is the easy part. The problem is that I cannot find a way to uniquely identify the prepend and append values since both have exactly the same class


<span class="add-on">R</span>

.

Looking through the API code, I see that it is possible to pass HTML options to a prepend and append. Can this be done when using it in a textFieldControlGroup? If it can, how to do it? I’m thinking of setting an id tag.

Thanks for all the hard work.

Gerhard

2

The beauty of using Yii, YiiStrap and YiiWheels is of course that we have access to the API code. Working through that I figured out how to solve my problem.

The intention was to have a radio button with two options (‘P’ for percentage and ‘R’ for South African Rand) as well as a textFieldControlGroup that displays either a ‘R’ as a prepend or a ‘%’ as a append depending on what is chosen in the RadioButtonList.

The trick is to call some JavaScript in the onChange event of the inlineRadioButtonListControlGroup. That’s easy enough. I also check the value of the RadioButtonList on the document load so I can hide the prepend or append value appropriately in the case where the data is being edited when loading a record from the model.

I then set up the textFieldControlGroup to have a prepend value of ‘R’ AND a append value of ‘%’. The idea is then to show the one and hide the other based on the choice of the radio buttonlist. What I struggled with is to figure our how to set a unique id for the prepend and append portion of the textFieldControlGroup. Once I figured that out it all fell into place quite easily.

The code for the RadioButton list and the currency textFieldControlGroup.


		<?php echo $form->inlineRadioButtonListControlGroup($model,'institution_fee_type', $model->getRateTypeOptions(), array('onchange' => 'RateTypeChange(this.value, "institution_fee");')); ?>

		<?php echo $form->textFieldControlGroup($model,'institution_fee',array('class'=>'currency', 'prepend'=>'R', 'prependOptions'=>array('addOnOptions'=>array('id'=>'institution_fee_prepend')),'append'=>'%',  'appendOptions'=>array('addOnOptions'=>array('id'=>'institution_fee_append')))); ?>

Here’s the JavaScript I used to manage hiding and showing the R and % values.





	$script = "$(document).ready(function()

	                   {

			

							var RateType = $('input[name=\'Event[institution_fee_type]\']:checked').val();

							RateTypeChange(RateType, 'institution_fee');

			


	                   });			

				

			

			function RateTypeChange(RateType, id)

			{   

			

				if(RateType=='P') {

							$('#'+id+'_prepend').hide();

							$('#'+id+'_append').show();

			

				} else if(RateType=='R') {

							$('#'+id+'_prepend').show();

							$('#'+id+'_append').hide();

				};

}			

			

			" ;

	Yii::app()->clientScript->registerScript('updates', $script, CClientScript::POS_END);

	

	

?>