I have been experimenting with dust.js by using the home page to create templates (http://akdubya.github.com/dustjs/). I am simply trying to set the selected option in a selectbox. Here is my data model:
{
"name": "SOME NAME",
"favorite_food": 1,
"food_options": [{id:1, value: "Ice Cream"},{id:2, value: "Pizza"},{id:3, value: "Fish"}]
}
I would like to set the selected option by matching the id in the food_options array to the favorite_food property. Here is my template:
<h1>{name}</h1>
<select>
{#food_options}
<option value="{id}"{#eq key=id value=favorite_food} selected="true"{/eq} >
{value}
</option>
{/food_options}
</select>
It seems like it should be simple and I've tried all sorts of variations, but can't get it to work. Any advice is much appreciated.
The Dust helpers you're hoping for are actually a part of the LinkedIn fork of Dust.js. To be able to use those helpers, try using this site:
http://linkedin.github.com/dustjs/test/test.html
LinkedIn fork of Dust:
https://github.com/linkedin/dustjs
DustJs Helpers:
https://github.com/linkedin/dustjs-helpers
Related
https://jsfiddle.net/53jprgse/
I'm not able to get dynamic select option value attributes set using Vue 2.0.3 and :value or v-bind:value bindings. No option values are being set when I use these.
I have to add the static html value="" or value="some value" attribute to get option value attributes to render their dynamic values.
My data set is a simple array of strings.
This is illustrated by inspecting the select elements at the fiddle above.
Can someone tell me what I'm missing here? Seems like this should be very straight forward.
If you want the DOM to actually have the value attribute set by v-bind you have to actually add the value attribute (doesn't matter what it says).
So, in your first 2 selects you basically had this:
<div>
<p>
:value="county"
</p>
<select v-model="filterByCounty">
<option value="">Filter by county...</option>
<option v-for="county in counties" :value="county">
{{ county }}
</option>
</select>
{{ selected_county }}
</div>
If you just add a value to the <option> it will work as you'd like:
<option v-for="county in counties" :value="county" value="">
I'm using select2.full.js
I'm not using any require.js to help me pull in modules, I'm basically using my know how from everything I learned in v3.5
I've been trying countless of hours, wrapping my head around this, but I have no idea how to make ajax cascading dropdowns.
Example: You load up the page, there is the first select2 dropdown that pulls data using ajax automatically (you don't enter anything.. data is there on the page load from the server), a default value is selected. Since that default value is selected, the second select2 drop down will use that value to make an ajax call to populate its own list. Now, when I select another value in the first select2 dropdown, the second select2 dropdown will reflect those changes with the new dataset.
What I've able to come up with was a 3 dropdowns that you can populate on a page load, but when you do any ajax request, the dropdown data doesn't change.
It's been two years since I used select2, and the library keeps changing, the documentation keeps changing, I'm at my wits end with this library. But I feel drawn to it by the bootstrap support, and the look and feel. The functionality, the way to implement things, the documentation is just so unbelievably awful.
I don't have any useful code at all, I've been pulling, plugging, modifying, etc.. and now I'm moving to my hair and teeth.
ANY useful example to do this would be awesome.
Just found my answer..
I was using the templating:
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
</select>
to:
data = [{id: "1", text: "1"}, {id: "2", text: "2"}];
<input id="test" type="hidden" />
and just kept my jquery on select2 the same. So it was really just a change in the templating from to that solved it.
However, the only downside to this is that when you are refreshing new data from these drop downs, the highlighted (selected value) is always the first item in the drop down list, even though that's not the selected value shown in the dropdown.
Here is a small code snippet to make Select2 (v4.x) cascading dropdown - https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
Using this module, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box.
Example use -
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
Selected value of parent select2 listbox will be set to the parent_id of the data object before ajax call.
I have a dropdown that I want to be able to change which id to pass to a path.
Dropdown
<select id="student-selection">
<option value="1">Frank</option>
<option value="2">Bill</option>
</select>
Link
<%= link_to "Create Pet", new_student_pet_path(:id_from_select_dropdown) %>
How is this possible? I'm guessing that I should use coffeescript in some way but I can't figure out a good way besides just parsing the link string and replacing an ID.
I'm also willing to use a div with onclick event if that would make it easier instead of an anchor.
I discovered a good way of doing it. I just put the URLs in the select options as the values instead of using the IDs via the path functions. This way in the coffeescript I just need to set the window.location to the value of the selected option.
HTML
<select id="student-selection">
<option value="/students/1/pets/new">Frank</option>
<option value="/students/2/pets/new">Bill</option>
</select>
CoffeeScript
$ ->
$('btn-id').click ->
window.location = $('#student-selection').children("option").filter(":selected").val()
Is it possible to create a custom GSP tag without writing Groovy code and embedding my HTML in the code (i.e. more of a JSP style way of creating a custom tag)?
I have a menu that consists of a bunch of items something like:
<li class="menu-item">
<g:link controller="someController" action="someAction" id="123">
My Item Text
</g:link>
</li>
I would like to create a new GSP tag to simplify my pages since it will be repeated multiple times. So, I'd like to create something like:
<my:menuitem controller="someController" action="someAction" id="123" text="My Item Text"/>
I know that I can create a custom taglib and create the tag using Groovy code. However I really don't like the idea of embedding HTML into a Groovy file. In the past I have created JSP taglibs in essentially a JSP file without writing Java code. So far looking at the documentation for Grails I haven't seen a similar style.
As a side note, can custom JSP tags be used within GSP?
You can do this with a template via the render tag, as explained in the "Views and Templates" section of the docs. Its worth noting you name the template file with a leading underscore but you refer to it in the render tag without the underscore.
The other alternative is to use a custom taglib as you described but to create your HTML with the Groovy MarkupBuilder. It takes a bit of getting used to (syntax is a bit strange) but once you've done a few times it becomes second nature.
The only way I can see to do what you want to do without a Taglib is to use g:render and pass in your values into the model attribute. Like this:
<g:render template="myTemplate" model="[controller: 'someController', action: 'someAction', id: 123, text: 'My Text Item']" />
Then in your actual template you will have the following:
<li class="menu-item">
<g:link controller="${controller}" action="${action}" id="${id}">
${text}
</g:link>
</li>
Ok so I am working on a project that was outsourced and now I get to jump in and fix everything before it gets pushed to production. I am currently trying to modify a line that creates a select form field. I read up on some of the different form helper methods to use in ruby, and over some of the available options for the method.
My problem is I can't seem to figure out how to get a default value to be displayed inside the select element without having it show up in the drop down options. This is what the line currently looks like.
<%= select :profile, :sexual_interest, SEXUAL_INTEREST_ARRAY, {:prompt => 'sexuality'}, {:class => 'selectFull'} %>
I tried changing some of the options using :default => 'sexuality' and then tried :disabled => 'sexuality'. But I seem to only be able to remove the option entirely from the select element or have it as the first value in the drop down list and being displayed as the default value.
If you are just having issues setting the default value of your select field using a ruby form helper, reference this post selecting a default for option field
If any one could give me some insight as to how to fix this issue I would greatly appreciate it. Any ideas would help, Thanks for reading.
-Alan
It is not possible to do that in HTML, so you'll have to use another approach.
Possible solution
Suppose you have:
<select name="selectBox" id="selectBox">
<option value="default">default</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
Then your javascript will looklike this:
$("#selectBox").change(function(){
$("#selectBox option[value='default']").remove();
});
The example on jsFiddle
Selectors
$('#selectBox option[value="SEL1"]')
For an index:
$('#selectBox option:eq(1)')
For a known text:
$('#selectBox option:contains("Selection 1")')
Hope it helps you!