<div class="form-group">
<?php
echo $this->Form->input('area', array('label' => false,
'placeholder' => 'Enter Zone Name',
'type' => 'select',
'class' => 'form-control',
'id'=>'area',
'multiple' => 'multiple',
'options' => $areaList)
);
?>
</div>
This is my dropdrop for input type select on edit page.
I just want to know how can I make $arealist values to be shown selected.
I am using Cakephp 3.x. I am new to cakephp 3.x.
Pass the keys of $areaList (which should be a find('list') style resultset/array) to either the default option (which will be used unless the form context contains data for the field, for example the submitted form data), or to the value option (which will hard-select the given values, ie possible form context data will not override it).
// ...
'options' => $areaList,
'default' => array_keys($areaList)
See also
Cookbook > Views > Helpers > Form > Common Options For Specific Controls
Cookbook > Views > Helpers > Form > Creating Select, Checkbox and Radio Controls
Related
I have a yii2 activeform where the functionality of the form can change based on other things within the form. So, I have a clubs field, that can be multiple in some instances but not multiple in others.
<?= $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'data' => $club_data,
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }'),
],
],
])->label('Club(s)'); ?>
I need to programmatically change the multiple pluginOption to true and false. This should be when the user goes into the form but also immediately when a dropdown is changed on the form. I can do it when the user initially goes into the form but not immediately when another dropdown is changed.
I've made separate fields, one actually linked to a field in the database and another not, this kind of works but it's far from elegant!
I've looked in both the kartik select2 documentation and the standard jquery select2 documentation and I can't spot anything. Any help or pointers would be much appreciated.
Reference
I was working on a Yii2-formwizard plugin a few months back where I had a situation of providing tabular functionality and cloning the fields really became the pain in the ass when it came to using 3rd party plugins like Select2 and Datepicker and I figured out the following code along with a lot of other (as the other part isn't relevant to your problem so not adding it).
Approach to the problem
The way Kartik-select2 works it stores the select2 plugin-specific options in the data-krajee-select2 attribute of the element you are using the select2 on.
And the theme or say the Kartik's plugin-specific options like theme and others are saved in the variable whose name is saved in the data-s2-options attribute. You can look for both of them in view-source of the page where you are using it.
Solution
So what you need to do is to
Steps
Get the applied options
Add/Update the option
Apply back the options
As you just added a single field and not the other one on who's selection it would change, I would demonstrate an example where you can change the behavior of the select2 from multiple to single using 2 different buttons, clicking on the relevant button the select2 will work accordingly. You can adjust the javascript code where ever you want to.
But before I add any code you need to fix one thing, you don't need the main data option when you are using the ajax option inside the plugin options. In other words, it does not have any effect on your select2 and is adding page load time only you should remove it.
You select2 should look like below, I added id to the options of the select2 for the example you can change it to the active form formatted name like model-field_name format if you like, but don't forget to change the id in the javascript code too
<?php echo $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)','id'=>'clubs'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
]
]
])->label('Club(s)');?>
Add the following buttons on your page
echo Html::button('multiple', ['class' => 'btn btn-info', 'id' => 'multi']);
echo Html::button('single', ['class' => 'btn btn-info', 'id' => 'single']);
And now the magic thing, add it on the top of your view
$js = <<<JS
var element=$("#clubs");
$('#multi').on('click',function(e){
//reset select2 values if previously selected
element.val(null).trigger('change');
//get plugin options
let dataSelect = eval(element.data('krajee-select2'));
//get kartik-select2 options
let krajeeOptions = element.data('s2-options');
//add your options
dataSelect.multiple=true;
//apply select2 options and load select2 again
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
$('#single').on('click',function(e){
element.val(null).trigger('change');
let dataSelect = eval(element.data('krajee-select2'));
let krajeeOptions = element.data('s2-options');
dataSelect.multiple=false;
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
Now if your select2 is working correctly click on the multiple button and you will see the multiple selections are enabled for the select2 and when clicked on the single button.
Hope it helps.
I'm using select2 to let user choose stuff from list from ajax.
In adding to db it's working great, but I want to edit stuff. So I can still select stuff from my select2, but user should see what is the current value of select2.
I've tried to do something with InitSelect, but it didn't work, even after I've just passed data from php.
This is my Select2:
$(".personid").select2({
ajax: {
type: "post",
url: '/' + APP_PATH + '/Projects/find_person.json',
datatype: 'json',
quietMillis: '100',
data: function (term, page) {
return {
q: term.toUpperCase(), // wprowadzony ciag znakow - zawsze na uppercase
page_limit: 10,
};
},
results: function (data, page) {
var dane = {results: []};
$.each(data['data'], function (i, item) {
dane.results.push({
id: item['Person']['id'],
text: item['Person']['displayName']
});
});
return dane;
}
}
});
And this is my cake form input:
echo $this->Form->input('person_id', array(
'type' => 'text',
'value' => $projectcontact['Person']['id'],
'Placeholder' => 'Wybierz osobę',
'empty' => 'Wybierz osobę ',
'class' => 'form-control personid',
'label' => array(
'class' => 'col-md-4 control-label',
'text' => 'Osoba'
)
));
Can anyone help to make Select.js display current Persona name data from database in this?
With Select2 4.x
With Select2 4.x you're not supposed to use a text input element anymore, but a select element. Quote from the docs:
When using Select2 with remote data, the HTML required for the select is the same as any other Select2. If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
https://select2.github.io/examples.html#data-ajax
So, as described, create a proper select input with a single selected option element, something along the lines of:
echo $this->Form->input('person_id', array(
'type' => 'select',
'options' => array(
$projectcontact['Person']['id'] => $projectcontact['Person']['displayName']
),
'selected' => $projectcontact['Person']['id'],
'class' => 'form-control personid',
'label' => array(
'class' => 'col-md-4 control-label',
'text' => 'Osoba'
)
));
Additionally you'll have to ensure that $projectcontact is being filled with the person according to the possible submitted person_id value, otherwise the selected value will not remain when rendering the form after submit.
Normally when creating a select element, you'd use a complete list of options, so that the form helper could pick the appropriate option automatically, based on the submitted value. Without such a list, you'll have to read and supply the specific person instead.
Here's some dummy code that demonstrates the priniciple:
$personId = $defaultPersonId;
if($this->request->is(array('post', 'put'))) {
$personId = $this->request->data('ModelName.person_id');
// ...
}
$projectcontact = $this->Person->findById($personId);
$this->set('projectcontact', $projectcontact);
See also
Cookbook > Core Libraries > Helpers > Form > Options for select, checkbox and radio inputs
Cookbook > Core Libraries > Helpers > Form > Creating form elements
Cookbook > Models > Retrieving Your Data > find(‘list’)
I have the following line of code on a CakePHP view:
<?php
echo $this->Form->input(
'person_id',
array(
'label' => false,
'div' => false,
'class' => 'form-control search-person'
)
);
?>
I want to create a text input with this line of code, but if the field name has the suffix _id, the rendered HTML changes from a text field to a drop-down select.
If I change the prefix to anything else, for example person_idd or abc_idd, it renders a text input, but if the field name ends with _id suffix, it renders a drop-down select, which doesn't allow me to write anything.
Is this some CakePHP feature? How can I avoid this behavior and produce a text input with a field ending with the _id suffix?
It's a CakePHP feature:
This method will automatically inspect the model field it has been supplied in order to create an appropriate input for that field.
Taken from Cookbook 2.x: FormHelper: Creating form elements.
To get a text input, add 'type' => 'text' to the options array:
<?php echo $this->Form->input('person_id', array(
'type' => 'text',
'label' => false,
'div' => false,
'class' => 'form-control search-person'
)); ?>
Inside my form there is a long row of checkboxes which I want to show as two columns of checkboxes (for reasons related to presentation). So in the following code I split the options into two separate arrays and create two different options by the same name. When I debug($this->request->data); the 'location' key is always empty. However, the same code works as a single input just fine. What am I doing wrong?
<?php
$count = count($location_options); //$location_options is passed from the controller
$half = round( $count/2 );
$location_options1 = array_slice($location_options, 0, $half, TRUE);
$location_options2 = array_slice($location_options, $half, NULL, TRUE);
//I CAN'T GET THIS TO WORK!!
//echo $this->Form->input('location', array('type'=>'select', 'multiple'=>'checkbox', 'options'=>$location_options1, 'div'=>array('class'=>'col-xs-12 col-sm-6 form-group', 'style'=>'margin-bottom:0;', 'selected'=>$user_location_alert_tag_ids)));
//echo $this->Form->input('location', array('type'=>'select', 'multiple'=>'checkbox', 'options'=>$location_options2, 'div'=>array('class'=>'col-xs-12 col-sm-6 form-group', 'selected'=>$user_location_alert_tag_ids)));
//BUT THIS WORKS JUST FINE
echo $this->Form->input('location', array('type'=>'select', 'multiple'=>'checkbox', 'options'=>$location_options, 'div'=>array('selected'=>$user_location_alert_tag_ids)));
?>
Look at the generated HTML, for each select element a hidden field is generated that ensures that the appropriate key will be present in the data.
Multiple fields with the same name will cause multiple hidden fields to be generated where the last one will overwrite the former ones.
This can be avoided using the hiddenField option for the additional fields, so that the hidden initializer field is only generated for the first input. Quote from the docs:
If you want to create multiple blocks of inputs on a form that are all grouped together, you should use this parameter on all inputs except the first. If the hidden input is on the page in multiple places, only the last group of input’s values will be saved.
Also you should define a unique ID for both inputs, otherwise you'll end up with invalid HTML as the helper will produce duplicate IDs.
And last but not least your parentheses are probably a little wrong, the selected key is nested in the div key, which I guess is wrong in case this is ment to define the selected entries.
echo $this->Form->input('location', array(
'id' => 'location1',
'type' => 'select',
'multiple' => 'checkbox',
'options' => $location_options1,
'div' => array('class' => 'col-xs-12 col-sm-6 form-group', 'style'= > 'margin-bottom:0;')
'selected' => $user_location_alert_tag_ids
)));
echo $this->Form->input('location', array(
'id' => 'location2',
'type' => 'select',
'multiple' => 'checkbox',
'options' => $location_options2,
'div' => array('class' => 'col-xs-12 col-sm-6 form-group'),
'selected' => $user_location_alert_tag_ids
'hiddenField' => false
)));
I am using Cakephp 2.2.3 version. When I create form using Cake form helpers, it automatically appends a div and label to the input type field. How to avoid it?
Following is the code:
<?php echo $this->Form->input('username', array('id' => 'username', 'class' => 'login-inp', 'type' => 'text')); ?>
You can use options array of input to avoid form appending div and label automatically. Set div and label of options array to false.
echo $this->Form->input('username',
array('id' => 'username', 'class' => 'login-inp',
'div' => false, 'label' => false
)
);
That's what FormHelper::input() is supposed to do. If you don't want the label and wrapping div just use the functions to generate specific input elements only like FormHelper::text(), FormHelper::select(), FormHelper::radio(), etc.