Javascript Action on Element - Code does not save

[davree]

Hello,

I have been trying to create a form where a selection from a drop down box shows a different group of elements depending on the dropdown selection.

I have been following Rob's suggestion here - I realise it is quite old and maybe not relevant anymore however I cannot even get to a point to test it.

When I enter any code into the Javascript code box within the element edit screen it will not save - as in it deletes the code.

I updated from Github yesterday and I am running Joomla 3.1.5

Anyone got any ideas?

Also any pointer on how to get this to work would be great.

Cheers

Dave

 

[rackem]

I discovered similar behavior with a PHP Validation code so I raised the issue in the standard support forum here: http://www.fabrikar.com/forums/index.php?threads/php-code-not-saved.35437/

 

[Bauer]

Hello,
I have been trying to create a form where a selection from a drop down box shows a different group of elements depending on the dropdown selection.

By "group of elements" do you mean a repeat group linked to a parent form or do you want to just show/hide certain elements inside the form based on the selection made in the dropdown list?

If the 2nd case is what you mean, you can always just use jQuery (in the form_##.js file) for such functions. I find that easier than writing code in the javascript textarea in a fabrik element anyhow.

Assuming you're using jQuery 1.7+, use a binding on change handler like...

jQuery(document).on('change', '#id_of_selectbox', function() {
    // First you'd need to get the new selected value
    var selectedVal = jQuery(this).val();
 
    // then you'll need to show all the elements that may have been hidden by a prior 'on change' selection
    jQuery('#id_of_div_containing_element_to_show').show();
    // continue using similar syntax to list other possible hidden elements to show
    // or you could use wildcards here to show them all
    // Then create a switch statement to determine what elements to hide based on the currently selected value
 
    switch(selectedVal)
    {
    case 1:
        jQuery('#id_of_div_containing_element_to_hide').hide();
        // continue listing elements to hide
        break;
    case 2:
        // etc.
        break;
    default:
        break;
    }
});

You would need to write a more global function to find the correct repeat (sub)group element(s) if this is in a repeat group. In that case you could just pass the selected id on to another function - e.g....

jQuery(document).on('change', '[id^="id_of_repeatgroup_selectbox_less_group_index"]', function() {
    var thisID = jQuery(this).prop('id');
    showHide(thisID);
});

function showHide(thisID) {
    // add similar code and switch statement as above except use a combination of closest() and find() to assure you stay in the right repeat group...
    // i.e.:
    jQuery('#' + thisID).closest('.fabrikSubGroup').find('div[class*="___element_name_to_hide"]').hide();
}

 

[rob]

Anyone got any ideas?

I tested and it works here.
Do you receive any js errors when opening/saving the element in the admin page?
Can you post a screen shot of what settings you are attempting to save?