Symphony.

DISCLAIMER: I'm still learning Javascript

I am having trouble understanding how to use symphonyPickable().

I only got as far as:

(function($) {
    $(document).ready(function() {
        $('#field-6').symphonyPickable();
        $('#field-3').symphonyPickable();
    });
})(jQuery.noConflict());

Then I'm stumped.

I am trying to use this to in a section entry page in the backend. I have one selectbox field and a few fields which I'd like to show/hide depending on the selection.
I would hugely appreciate a code sample of how to set up this function. Anyone?

Best, Tommaso

What are you trying to achieve? Please give us as much context as possible. Thanks!

Seems like I responded to fast and you adjusted your post in the meantime :)

You'll need some custom markup to get this working. This is how Pickable works:

• .pickable() can be applied to a wrapper like a div or fieldset that contains a select box.
• By default Pickable searches for the class .pickable to find elements that should be shown or hidden based on the select box setting.
• In order to match the option values and the .pickable elements, each element needs to have an id of the option value it is connected to.

If you like to use another identifier for the pickable elements, you could pass an identifier with the call to Pickable:

$('#field-6').symphonyPickable({
    pickable: 'div.field-something'     
});

The most important part it to have the matching ids and values like so:

// Select
<select>
    <option value="this-is-a-test">This is a test</option>
    <option value="hello-world">Hello World!</option>
</select>

// Pickables
<div class="pickable" id="this-is-a-test">
    <p>I'm a Pickable element</p>
</div>
<div class="pickable" id="hello-world">
    <p>I'm another Pickable element</p>
</div>

Does this help a bit?

Big time yes! Thanks a lot for taking the time to explain it.

I guess I'll just add class names to some panels on the fly before calling the function. Btw, I'm loading this in via the HTMLPanel extension. Dirty hack?

Btw, I'm loading this in via the HTMLPanel extension. Dirty hack?

Your script file? It could be done via a small extension: have a look at Image Index Preview which does nothing but that: https://github.com/nilshoerrmann/image_index_preview