Enhanced Drodown which are not visible « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

ghalleb
Member
Hi,

I'm am using several form on the page in different tab.
All of the form use dropdown which are enhanced by jQuery.chosen (by selecting " Enable enhanced user interface" on the element).

My problem is: the dropdown which are visible are ok, but the ones which are inside the tab aren't.

In gravityform.js I saw :
```
if(element.is(":visible") && element.siblings(".chzn-container").length == 0){
            jQuery(this).chosen({no_results_text: noResultsText});
        }
```
So I tried to remove the "visible" part but the result is even worst (size aren't good and sometime, no dropdown at all).

Why don't you convert the invisible dropdown as well?
Posted 11 years ago on Wednesday December 5, 2012 | Permalink
Chris Hajer
Key Master

You should not modify the plugin files at all.

Can you share a link to the page where your form is embedded so we can see the problem? Thank you.

Posted 11 years ago on Thursday December 6, 2012 | Permalink
ghalleb
Member

Here is a form with 2 tab using the same form:

http://www.ghalleb.com/test2/

The one which is visible on start is ok, the other one is not

Posted 11 years ago on Wednesday December 19, 2012 | Permalink
Chris Hajer
Key Master

When you say they are not "OK" do you mean that the enhanced interface is not working on the 2nd tab? I will check with the development team and see if there is anything we can do to ensure the enhanced interface works with your non-visible tabs.

It seems to be related to the fact that the tabbed content is hidden and then revealed with JavaScript, and Gravity Forms uses the gform_post_render jQuery hook to load the chosen.js again but that does not appear to be working.

Posted 11 years ago on Saturday December 22, 2012 | Permalink
ghalleb
Member

That is exactly the problem.

The script checks the visibility of the dropdown to load the enhance interface.

Posted 11 years ago on Saturday December 22, 2012 | Permalink
Alex Cancado
Administrator

The problem is that the chosen script has a limitation and can only be initialized when the drop down is visible, otherwise you will get the strange results you have seen when you modified the code. Does your tab has any events you can hook into when you move between tabs? If so, you will have to manually initialize the second drop down when that tab becomes visible. If not, you may not be able to use this feature with your tab script.

Posted 11 years ago on Wednesday December 26, 2012 | Permalink
ghalleb
Member

Hi Alex,

I think I could hook something on the tab selection.

Could you provide me the code to use?

I hope it could be fixed in a future version of the chosen script....

Posted 11 years ago on Monday January 7, 2013 | Permalink
Chris Hajer
Key Master

I will send this to Alex today for him to take another look.

Posted 11 years ago on Tuesday January 8, 2013 | Permalink
Alex Cancado
Administrator
Add the following, making sure to replace 4 with your form ID and 20 with your field ID.
```
jQuery("#input_4_20").chosen({no_results_text: "No results found"});
```
Posted 11 years ago on Tuesday January 8, 2013 | Permalink
dgalfano
Member

Alex, where is that suppose to be added? Running into a similar issue.

Posted 11 years ago on Wednesday January 9, 2013 | Permalink
David Peralty

http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F <- This page gives a quick tutorial, so you know where to put the code we give out. All my best!

Posted 11 years ago on Wednesday January 9, 2013 | Permalink
dgalfano
Member
I have 1 form. The enhanced multi-select is working when I have it in the sidebar: see http://www.corzoinsurance.com

However, in the fancybox pop up (click any of the contact us links/buttons) - it only shows the multi-select without the Chosen enhanced script. I added this to that page template (http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/)) header:
```
<script type="text/javascript">
    jQuery(document).ready(function($) {

        jQuery("#input_1_5").chosen({no_results_text: "No results found"});

    });
</script>
```
But that didn't do anything.

Oddly, when I simply add the same form to a default page template (same as the homepage), it also doesn't show the enhanced multi-select (& the same sidebar form also doesn't show the enhanced multi-select): http://www.corzoinsurance.com/quick-quote/

Am I missing anything here?
Posted 11 years ago on Thursday January 10, 2013 | Permalink
ghalleb
Member

@Alex

Thanks a lot, I'll take a try

Posted 11 years ago on Monday January 14, 2013 | Permalink