PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Enhanced Drodown which are not visible

  1. 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 7 years ago on Wednesday December 5, 2012 | Permalink
  2. 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 7 years ago on Thursday December 6, 2012 | Permalink
  3. 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 7 years ago on Wednesday December 19, 2012 | Permalink
  4. 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 7 years ago on Saturday December 22, 2012 | Permalink
  5. ghalleb
    Member

    That is exactly the problem.

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

    Posted 7 years ago on Saturday December 22, 2012 | Permalink
  6. 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 7 years ago on Wednesday December 26, 2012 | Permalink
  7. 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 7 years ago on Monday January 7, 2013 | Permalink
  8. I will send this to Alex today for him to take another look.

    Posted 7 years ago on Tuesday January 8, 2013 | Permalink
  9. 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 7 years ago on Tuesday January 8, 2013 | Permalink
  10. dgalfano
    Member

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

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

    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 7 years ago on Wednesday January 9, 2013 | Permalink
  12. 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 7 years ago on Thursday January 10, 2013 | Permalink
  13. ghalleb
    Member

    @Alex

    Thanks a lot, I'll take a try

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