Hide fields on demand

[Mourice]

hi everybody,

first I want to say that xataface is helping me a lot and spared me quite some time.

I want to hide unnecessary fields in my columns. But only when an earlier field before says "no" (widget:type=select vocabulary = yes_no)
I was thinking about an IF -> THEN solution but I didnt find anything ....

Is that even possible?

greets mo

[shannah]

You'll likely want to do this with Javascript. Xataface 2.0 supports a depselect module that will handle this behavior automatically (with some config), but since that isn't released, you'll need to implement it yourself.

This wiki page (http://xataface.com/wiki/Dynamic_select_boxes) shows one method of doing this using javascript and some delegate class customization.

You can also check out the source of the depselect module to see how it works.
http://xataface.com/dox/modules/depselect/latest/

-Steve

[Mourice]

Thx Steve for the hint,

but my problem is, that depselect creates just another select field. I want to hide/show normal text fields and they should depend on the selected valuelists entrys!

Here is my valuelists.ini content:
[art]
Epidemie = Epidemie
Dürre = Dürre
Erdbeben = Erdbeben
Erdrutsche = Erdrutsche
Vulkan = Vulkan
Überschwemmung/Überflutung = Überschwemmung/Überflutung
Schneefall/Schneesturm = Schneefall/Schneesturm
Sturm = Sturm
Waldbrand = Waldbrand
Terror = Terror
Kerntechnik = Kerntechnik

For some entrys I select from above I would like to show extra text entry fields from the fields.ini.

I'm not that familiar with javascript, so I didnt find a way thats working for me.

I would really appreciate the help

greets Mo

[shannah]

You'll want to create a function that updates the view status of your field depending on the state of the valuelist.
Then you'll want to add two event listeners to call this function:
An onchange handler in the select list to trigger the update. And an ready event in the document (so that it is updated properly when the page first loads).

Code: Select all

(function(){
    var $ = jQuery;
    $('document').ready(function(){
        function update(){
            var listValue = $('#my_list_field').val();
            if ( listValue = 'some acceptable value' ){
                $('#my_other_field_form_row').hide();
            } else {

               $('#my_other_field_form_row').show();
            }
        }
   
    $('#my_list_field').change(update);
   
    update(); // call update at beginning of page load.

})();


[Mourice]

Hi Steve,

your last tip looks quite good, but I'm not able to implement the code. It doesn't work like it should, or not at all. It would be very nice if you could give me some more advice where exactly to put this, maybe even some step by step guidance...?

I would really appreciate the help.

greets mo

[Cabeza]

Steve,
Needing to put together the functionality to show/hide a field depending of the value selected for another field and following your advice, I did the following:

1-created a javascripts.js file where I put
a- a function show_hide() which is essentially the same as the one you detail in your post, adapted to my environment
b- an anonymous function which calls show_hide(), i.e., ( function(){ show_hide() }) (); This to make use of the "autorun" property of anonymous functions so that the state of the field updates upon launch of the page.

2- widget:atts:onchange = "show_hide()" on the corresponding fields.ini to set a handle to trigger the toggle upon manually updating the field.
3- function block__custom_javascripts(){...} on ApplicationDelegate.php to add the reference to my javascripts.js to the Dataface Main Template.

First of all: it works. So thanks again.
But I sense that the implementation is kludgy (well, no surprise here me being the author). In particular I dislike the need for the function() and the anonymous function calling it to obtain a- autorefresh b-I would not know how to link the widget onchange to my show_hide() function.
Any other way to put this together?
Thanks in advance.