Search code examples
javascriptjqueryjoomlasubform

Use parent class and get middle part of child class

I am working with Joomla's new SubForm code. This allows the user to duplicate a set of inputs and reuse them. Basically a repeatable form. This form creates the following structure.

<div class="subform-repeatable-group">
    <div class="control-group jform_params__content__content0__dc_subheader-cg"></div>
    <div class="control-group jform_params__content__content0__dc_typeofcontent-cg"></div>
    <div class="control-group jform_params__content__content0__dc_toc_image-cg"></div>
</div>

The issue is that the SubForm is loaded inside the parent form but Joomla sees it as a independent form. Therefore the normal Show/Hide functions no longer work. So I have to create my own.

What do I got and what is not good

This is the generated Select:

<select id="jform_params_theme_selection" name="jform[params][theme_selection]" class="chzn-done">
  <option value="3dperspective" selected="selected">3D Perspective</option>
  <option value="default">Default</option>
  <option value="notheme">Select a theme!</option>
</select>

I already got the piece of code that will check if the select value on the parent form is selected.

$('#jform_params_theme_selection').bind('change', function (e) {
  if( $('#jform_params_theme_selection').val() == 'notheme') {
  } else if( $('#jform_params_theme_selection').val() == 'default') {
  } else if( $('#jform_params_theme_selection').val() == '3dperspective') {
  }
}).trigger('change');

Now I can offcourse for each element add it manually like this:

$('[class$="__dc_typeofcontent-cg"]').hide();

But there must be a better way.

What do I want.

  1. I want to use the .hide() function on every item that has the following letters/symbols in its class __dc_ and has as .parents(.subform-repeatable-group)

Bit of extra information

  1. There is another theme that does not have __dc_ but is called __threed_ so I must be able to define the letters/symbols.
  2. I already checked if I could use something with X amount of positions from the front or a X amount of positions from the back but that is constantly changing.

Thanks everyone for helping.

As usual I am going to keep searching and updating this post whenever I get more results.

Solution

  • Could use filter() something like:

      var cGroups = $('.subform-repeatable-group .control-group');

  var hideTheme = '_dc';
  var showTheme = '_threed';

  cGroups.filter(function(){
     return this.className.indexOf(hideTheme )>-1
  }).hide()



  cGroups.filter(function(){
     return this.className.indexOf(showTheme )>-1
  }).show()

    DEMO