How do I show/hide groups based on a drop down selection?

[rob]

lets say our form has 3 groups - "select a product" , "product1info" and "product2info"

In the "product" group we have a "product" drop down with the following values:

value label
0 Please select (selected as default)
1 Product 1
2 Product 2


When an option is selected we want to show/hide the corresponding product group.

"product1info" and "product2info" both have their "Show group" option set to "hide" - this hides the group when the form loads
By looking at the list of groups you can see the group id next to it's checkbox, you will need to know this for the javascript code we will add later on. For this example I will say that "product1info" has an ID of 2, and "product2info" has an ID of 3.

In the group "product1info" we have a field called "product 1 label", and in "product2info" we have a field called "product 2 label"


To show/hide the product info groups we need to create a javascript action on the "product" drop down element:

• Edit the "product" element
• select the "Javascript" tab and press "Add Javascript action to element"
• Select "onchange" for the Javascript action and enter this code in the javascript code window:

//get the current value of the product drop down
var v = this.getValue();

// this is our object that maps the product drop down values (1 & 2) to the group html ids
var groups = {
 1:'group2',
 2:'group3'
};

//get the html id of the group to show
var groupToShow = groups[v];

//loop over all the groups we defined in the object 'groups'
for (var i in groups ){
 //if the current group is the one to show - show it
 if(groups[i] == groupToShow){
  $( groups[i] ).show();
 }else{
  //otherwise hide it
  $( groups[i] ).hide();
 }
}

save your element, and view your form, you should just see the product drop down, and when you select an option the corresponding product field will appear

hth
Rob

 

[john47]

Hi Rob

NB EDITED 07.02.08 I have changed the location of the test to http://www.stmaryscalne.org/component/option,com_fabrik/Itemid,378/ and the details of the problems are on that page.


I have tried your code for this form (see my code below) and cannot get it to work in Firefox or IE - http://www.stmaryscalne.org/component/option,com_fabrik/Itemid,377/
My groups were 20 and 21 for Products 1 and products 2.
I used the onchange event and made sure everything was published.
I am using Joomla 1.0.12 and Fabrik 1.0.4

Any ideas?

One other thought - I noticed that the style for the groups in the source code had a ; before the style. Is this correct. It is in views/form/view_html.php group_css .= ";display:none;" Changing it to group_css .= "display:none;" doesn't seem to make any difference.

//get the current value of the product drop down
var v = this.getValue();

// this is our object that maps the product drop down values (1 & 2) to the group html ids
var groups = {
 1:'group20',
 2:'group21'
}


;

//get the html id of the group to show
var groupToShow = groups[v];

//loop over all the groups we defined in the object 'groups'
for (var i in groups ){
 //if the current group is the one to show - show it
 if(groups[i] == groupToShow){
  $( groups[i] ).show();
 }


else{
  //otherwise hide it
  $( groups[i] ).hide();
 }



}

Kind regards

John

 

[rob]

hi works for me in firefox, ie7 and ie6 - have you fixed the problem?

Cheers
Rob

 

[john47]

Rob

Thanks for getting back. I have redone the page at http://www.stmaryscalne.org/component/option,com_fabrik/Itemid,378/ if you could have a look at this with IE. I have detailed the code and problems on that page. One of the problems was the commented out lines in the element's javascript so the page is now working in Firefox. IE is the problem and most users of the site are on IE, many of them in a corporate environment rather than on home pcs.

John

 

[rob]

Hi John

I fixed an issue that appears similar to the one you described yesterday in the SVN, would you mind getting a copy of those files and uploading them onto your site to see if that fixes the issue?
Basically the issue was that in ie and safari, on certain page loads, the element javascript events weren't getting attached correctly so nothing seemed to work.

Cheers
Rob

 

[john47]

Hi Rob

I have updated as you suggested and now the forms do not work in either Firefox or IE! I have emptied the cache in both Joomla and in the browser but all to no avail. I noticed that the upload also included mambot and module folders - I am not sure whether or not I had these before, but presumably they would not make any difference.

Kind regards

John

 

[rob]

have you fixed this - i can see the form
http://www.stmaryscalne.org/component/option,com_fabrik/Itemid,378/

rob

 

[john47]

Rob

As I said, I uploaded the new files but the forms do not now work in either IE or Firefox. Also, any action on the form causes Firefox to stop responding and I have to close it down.

Kind regards

John

 

[rob]

ow - ok i can replicate that!

try updating from the SVN again please?

Cheers
Rob

 

[john47]

Hi Rob

I have updated and we no longer crash. However, the forms are not working in IE or Firefox. Would it be possible for you to publish a test form that uses your code so I can see how it works?

Kind regards

John

 

[john47]

Hi Rob

This post seems to have gone dead and I am very keen to get this hiding of groups working. Is it possible to publish a working model and the code that goes with it?

Thank you

John

 

[rob]

well it works for me in all browsers now, i think i really need backend access to your site to see whats going on - can you pm me a super admin account please?

 

[john47]

Hi Rob

You should get an email with this info - thank you for taking time over this. May I emphasize that, although I like to dabble in code, I have enormous gaps in knowledge and am quite old!

Kind regards

John

 

[cheesegrits]

John,

Can you upgrade to the latest SVN? We made a change to the way the action scripts are added to the document which may help.

-- hugh

 

[john47]

Hi Hugh

Thank you for getting back. I have updated the SVN.

Strange .... In the element's javascript it now reads console.log('helo'); and the following code is included in the page source, but the page does not work.

window.addEvent( 'load', function(e){
ofabrik.dispatchEvent( '6', 'mos_fabrik_data_10___product_choice', 'onchange', 'console.log(\'helo\');');
ofabrik.addGroupJS(22, 'delete', "");

However on this page, http://www.stmaryscalne.org/component/option,com_fabrik/Itemid,377/, that I mentioned in another thread, the checkbox is working in Firefox and IE which is good news!

Thanks for your help. Any ideas what has happened with the top example?

John

 

[adamram]

error message in browser when implementing conditional dropdown

I'm using the example provided at the beginning of this thread but get an error message in IE7 when selecting the product drop down.
The message says "object doesn't support this property or method"
I've used the javascript without the comments, as below, but still get no joy.

var v = this.getValue();
var groups = {
1:'group7',
2:'group8'
};
var groupToShow = groups[v];
for (var i in groups ){
if(groups == groupToShow){
$( groups ).show();
}else{
$( groups ).hide();
}
}

Any ideas?

 

[cheesegrits]

Can you point me at the page?

-- hugh

 

[adamram]

Can you point me at the page?

-- hugh

http://www.allstilesinc.com/index.php?option=com_fabrik&Itemid=90

 

[cheesegrits]

I think this may be an issue we resolved yesterday, which affects second or subsequent javascript actions when the form is viewed in IE.

Can you try updating to the latest SVN, and see if that fixes things? SVN details in my sig.

-- hugh

 

[adamram]

I think this may be an issue we resolved yesterday, which affects second or subsequent javascript actions when the form is viewed in IE.

Can you try updating to the latest SVN, and see if that fixes things? SVN details in my sig.

-- hugh

hugh,
that did the trick. many thanks!
BTW the SVN link in your sig contains http://http// so doesn't work.