I am an extreme newbie, for which I apologize, but I'm not finding this...
In templates/editor/journal.hbs, this works:
<h2>Journal template</h2>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option> {{journal}}
{{/each}}
</select>
{{outlet}}
But the same code, in my component (journal-list), does not...
with journal.hbs changed to
<h2>Journal template</h2>
{{journal-list title="Crazy Test" model=journal}}
{{outlet}}
And that code in journal-list.hbs,
{{yield}}
<h1>{{title}}</h1>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:
</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option>
{{/each}}
</select>
all stubs generated by ember generate, I do get the title but the listview is unpopulated.
What magic am I missing? Do I need to configure a route to the component, for example?
Thanks
Uggah. I did spend over an hour on that before posting!
It's simple. Instead of journal.hbs having model=journal, it needed model=model.
Related
How to get the value from the dropDown Box in Django Without Submit Button
<div class="single-shorter">
<form action="." method="GET">
<label>Sort By :</label>
<select name="val" id="val">
<option selected="selected" value="name">Name</option>
<option value="price">Price</option>
</select>
</form>
</div>
You can simple obtain it using Ajax but as mentioned in comments in dont want to use that u can use value attribute in option value and using event listner and window.loction.href we can obtain this... This is one example
<select id="foo">
<option value="">Your Dropdown</option>
<option value="http://www.google.com">x</option>
<option value="http://www.facebook.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
as u are using django use this and also dont want to change the value attribute
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
I'm using the django-select2 package to implement Searchable Select on a ForeignKey field.
I was successful in getting the functionality to work by following the steps mentioned in the docs but I am having trouble with the styling.
To render my form I use crispy-forms. All the other widgets get rendered properly except the Select2Widget.
As can be seen in the above image, the height and width of the form element is not dynamic like other elements.
HTML code generated:
<div class=""> <select name="current_user" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
class="select2widget form-control django-select2" required id="id_current_user">
<option value=""></option>
<option value="">---------</option>
<option value="4" selected>Arpita</option>
</select> </div>
</div>
<div id="div_id_device_admin" class="form-group"> <label for="id_device_admin" class=" requiredField">
Device admin<span class="asteriskField">*</span> </label>
<div class=""> <select name="device_admin" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
class="select2widget form-control django-select2" required id="id_device_admin">
<option value=""></option>
<option value="">---------</option>
<option value="4" selected>Arpita</option>
</select> </div>
</div>
This is how I set the widget in ModelForm.
def __init__(self, *args, in_org, **kwargs):
...
self.fields['current_user'].widget = Select2Widget()
self.fields['current_user'].queryset = in_org.user_set.all()
I feel this is mostly an issue with CSS styling and I am unable to figure out the issue. Any help would be greatly appreciated.
For those who are looking for a solution (though I think it's not the best),
you can fix the layout issue by passing attrs={'data-width': '100%'}
e.g.
self.fields['current_user'].widget = Select2Widget(attrs={'data-width': '100%'})
or
current_user = forms.ChoiceField(
widget=ModelSelect2Widget(
model=User,
search_fields=['username__istartswith'],
attrs={'data-width': '100%'},
),
)
/ exams / template.hbs
<form>
<select name="selectvalue" id="selectvalue">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<button type="submit" {{action "printans"}}> Submit </button>
</form>
/ exams / controller.hbs
import Controller from '#ember/controller';
export default Controller.extend({
actions: {
printans: function(){
let val = this.get('selectvalue');
console.log(val);
}
}
});
All I need is I want to replace the html code in the template.hbs with handlebars, and when the form is submitted, I need to pass the value to the controller.
Do you mean something like:
<form>
{{#power-select
selected=selectvalue
options=cities
onchange=(action "printans")
as |name|
}}
{{name}}
{{/power-select}}
</form>
I'm totally guessing here.
Additional Details would be helpful:
- what are you trying to do (specifically)
- where do you get your list of items?
There is this addon, which covers a lot more common behavior: https://github.com/cibernox/ember-power-select
This is my sample drop down
<select name="newType" class="parts-select full-width-combo" onchange={{action "loadFilter" value="target.value" }}>
<option value="" selected hidden >Select </option>
{{#each model as |item|}}
<option value="{{item.id}}">{{item.description}}</option>
{{/each}}
</select>
from the relevant template action I wanted to set this selected item dynamically.
As an example it default selected by "Select" and then based on some button click on that page and need to set my selected option to other selected option to be selected.
I am not using any plugin and I can't do it here.
I used mut helper to set directly to selectedItemId property. so onchange it will update it automaticaly. also used ember-truth-helper for eq helper to decide particular item is selected or not.
<select name="newType" class="parts-select full-width-combo" onchange={{action (mut selectedItemId) value="target.value" }}>
<option value="" selected hidden >Select </option>
{{#each model as |item|}}
<option value="{{item.id}}" selected={{if (eq item.id selectedItemId) 'true'}}>{{item.description}}</option>
{{/each}}
</select>
You can use ember-truth-helpers' eq helper to set which option is selected. I believe I have coded what you are asking at this twiddle. See my-component.hbs about how I used eq helper to set selected attributes of each option.
By the way I suggest using ember-power-select for select box instead of trying to write your own select with options.
I am trying to add events for two values in the combobox using emberJs. This is what I have tried.
<select class="bs-select form-control input-small">
<option {{action 'allData' }}>All Data </option>
<option {{action 'myData' }}>My Data </option>
</select>
I have added two functions in my controller by name allData & myData but these functions never gets called. What should I do ?
You can try using a binding instead. {{view Ember.Select}}
see: http://emberjs.com/api/classes/Ember.Select.html
You can add a binding for the value and add an observer in your controller to do something when the señection changes.