How do i deal with dependent combo boxes in the views with the form helper. For example:
Country Select Box (Choosing a country shall filter out the states of the selected country)
States Select Box
This should happen with the help of Javascript / Jquery etc. I came across an example for the same with Cake's core AJAX helper but it would be very nice if someone can help with a Javascript example.
Thanks
In views/ edit.ctp
<script type="text/javascript">
$(document).ready(function (){
$('#country').change(function() {
$('#state').load('/controller/getStates/'+$(this).val());
});
});
</script>
<select id="country" name="country">
<option value="1">Greece</option>
</select>
<span id="state">
<select name="state">
<option value=""></option>
</select>
</span>
and in controller.php
function getStates(int countryID){
$this->set('selectbox',
$this->State->find('list',array('conditions'=>'State.Country_id='.$countryID,
'fields;=>array('description')));
}
and views/getStates.ctp
<select name="state">
<option value=""></option>
<?php
foreach($selectbox as $option)
echo '<option value="'.$option['id'].'">'.$option['description'].'</option>'."\n";
?>
</select>
I hope I don't forget something
#gong's solution works well. Just remember to add:
$this->layout = 'ajax';
in the controller and ensure there is a clean ajax.ctp in the layouts folder... otherwise all the layout code will be returned in the ajax response as well as just the dropdown code!
$states = $this->State->find('list', array(
'conditions' => array('State.country_id' =>$codePassed),
'order'=>array('State.stateName ASC'),
'fields' =>array('id','stateName'),
'recursive' => -1
));
$a='';
$a.= "<select name=\"state\">";
$a.= "<option value=\"\">Select state</option>";
foreach($states as $key=>$value){
$a.="<option value=\"$key\">".$value."</option>";
}
$a.="</select>";
Related
in laravel i have ProdoctController and CategoryController,
im passing the category data with this function:
public function view(){
$category = Category::all();
return view('admin.product.main',['category'=>$category]);
}
its working with normal mode in laravel:
<select>
#foreach(category as categories)
<option value='{{category->id}}">{{category->name}}</option>
#endforeach
</select>
but in vue js i have a categories:[] in data,
and i want to use this:
<select v-model="ProductCategory">
<option v-for="category in categories" :value="categories.id">categories.name</option>
</select>
how can i pass the data in categories array?
You can do something like this:
<script type="text/javascript">
window.data = {!! json_encode([
'categories' => $categories,
]) !!};
</script>
<select v-model="ProductCategory">
<option v-for="category in window.data.categories" :value="category.id">category.name</option>
</select>
First part gets you the categories onto the view in the JavaScript and then Vue will have access to them. I think you should fix your category/categories variables, if this is a real code you've been using them not correctly, e.g. when you have a collection of many and when you have only one.
I've a quick issue that I can't handle.
I've a data for a dropdown, and depending on the value that's being picked for that dropdown, I want the data to change on the second dropdown, also preferably if it's hidden until the first dropdown is picked.
Atm, I can pick the first controller but I don't have an idea on how to connect the two dropdowns.
Any help will be greatly appreciated. Thank you in advance
new test service
export default class newtest {
constructor($http){
'ngInject';
this._$http = $http;
let testData = this;
this.options = {
releases: [
{value: 1, name: 'R1', environments : ['R1-QA1', 'R1-QA2']},
{value: 2, name: 'R2', environments : ['R2-QA1', 'R2-QA2']},
{value: 3, name: 'R3', environments : ['R3-QA1', 'R3-QA2']}
],
environments : [
['R1-QA1', 'R1-QA2'],
['R2-QA1', 'R2-QA2'],
['R3-QA1', 'R3-QA2']
]
};
}
}
new test controller
class NewTestCtrl {
constructor(NewTest, $state, $http) {
'ngInject';
this._NewTest = NewTest;
this.options = this._NewTest.options;
this.releaseValues = this.options.releases.name;
this.envValues = [];
}
HTML
<fieldset>
<select ng-model="release" ng-options="release.name for release in $ctrl.options.releases">
<option value="" disabled selected>Select</option>
<option value="value">{{name}}</option>
</select>
</fieldset>
<fieldset>
<select ng-model="release" ng-options="env for environments in $ctrl.options.environments">
<option value="" disabled selected>Select</option>
<option value="env">{{env}}</option>
</select>
</fieldset>
First, both your select elements have ng-model="release". This is the data field it is bound to in your controller. The second select element should be something like ng-model="environment".
You should be able to make the environment list change based on the the release selected by having the options use the release data element, something like ng-options="env for environments in $ctrl.options.releases[release].environments"
Lastly, you could hide the environment select until a release is selected with a ng-Show attribute based on release having a value. Something like ng-Show="release>0" and initialize release to 0 in your constructor.
Thanks for the help #Jim Moore, I found a good fiddle link that I followed for guidelines https://jsfiddle.net/annavester/Zd6uX/
And I changed the json of my data to >
environments : {
'Release 1' : ['R1-QA1', 'R1-QA2'],
'Release 2' : ['R2-QA1', 'R2-QA2'],
'Release 3' : ['R3-QA1', 'R3-QA2']
}
and also the html to, For anyone going through the same issue in the future, I hope this helps.
<fieldset>
<select id="release"
ng-model="$ctrl.release"
ng-hide="!$ctrl.browsers"
ng-options="release for (release, environments) in $ctrl.environments">
<option value="" disabled selected>Select</option>
</select>
</fieldset>
<fieldset>
<select id="environment"
ng-model="$ctrl.environment"
ng-hide="!$ctrl.release"
ng-options="environment for (release, environment) in $ctrl.release">
<option value="" disabled selected>Select</option>
</select>
</fieldset>
I am currently using CakePHP and I have a dropdown list that contains a lot of text. This is actually a list of predefined messages that the user can select.
I wonder if there is a way to tell CakePHP to keep the original size of the dropdown list to not allow text spans to the right, force a carriage return somehow.
I also use Foundation, can be a solution at this level too?
Thanks
You can add class or Id to that select box and apply css on that to control width of that box like:
$options = array('M' => 'Male', 'F' => 'Female');
echo $this->Form->select('gender', $options, array('escape' => false));
Which will look like
<select name="data[User][gender]" id="UserGender">
<option value=""></option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
then add css like
#UserGender {width : 200px;}
I have a select-option field in my form as below:
<div>
<?php echo $this->Form->input('employee_id', array('label' => 'Hi','multiple'=>true,'id'=>'multiselect', 'options' => $employee));?>
</div>
But when I checked the page-source, it produces an additional hidden field in my form.
<div>
<div class="input select">
<label for="multiselect">Hi</label>
<input type="hidden" name="data[Participant][employee_id]" value="" id="multiselect_"/>
<select name="data[Participant][employee_id][]" multiple="multiple" id="multiselect">
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
</select>
</div>
</div>
Whats the reason ? I am not able to get the employee id array due to this in my POST data.
That's so that if no items are selected, you still get an empty element being POSTed.
It's a similar idea as the blank item above a checkbox -- if the checkbox is not selected then the form data is still posted, just with a blank value.
I'm building a non-javascript version of a website, as there are a number of customers who don't have javascript enabled. On this site, the customer selects what country they will be visiting and then displays the data related to that country accordingly.
I've managed to get this to work. They use a HTML drop down menu to select the country, click on Submit, and the page reloads with the data related to the selected country. However, it does not change the country displayed in the HTML drop down menu, so when the page reloads it reverts back to "Select A Country".
What I would like to have happen is that if you clicked on United Kingdom from the drop down box for example, when the page reloads the drop down should display United Kingdom.
Here is the code I am currently using for the view file:
<form name="countryselect" action="/selected-country/" method="post">
<select id="country-list" name="countryselected">
<?php foreach($countries as $coun) { ?>
<option value="<?php echo $coun['Tariff']['countryslug']; ?>"><?php echo $coun['Tariff']['countryname']; ?></option>
<?php } ?>
<input type="submit" value="Submit" />
</select>
</form>
And in my controller file I am using this:
$countries = $this->Tariff->find('all', array('conditions' => array('Tariff.gsmid' => '1')));
$this->set('countries', $countries);
if (!isset($_POST['countryselected'])) {
} else {
$countryselect = $_POST['countryselected'];
$tarcounselect = $this->Tariff->find('first', array('conditions' => array('Tariff.countryslug' => $countryselect)));
$this->set('tarcounselect', $tarcounselect);
}
Cheers!
If you use Cake, you should not build the form and the select manually but use the Cake FormHelper instead. It will then keep the selected country automatically:
Controller:
$this->set('countries', $this->Tariff->find('list', array('conditions' => array('Tariff.gsmid' => '1'), 'fields' => array('countryslug', 'countryname'))));
View:
<?php
echo $this->Form->create();
echo $this->Form->select('Tariff.countryslug', $countries);
echo $this->Form->end(__('Submit'));
?>
And then to retrieve the selected country in the controller:
if($this->request->is('post'))
{
$countryslug = $this->request->data['Tariff']['countryslug'];
}