[Support request] how to inject javascript

Home Forums Support [Support request] how to inject javascript

Home Forums Support how to inject javascript

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #625400
    david

    Hi, I’m using the “chosen for wordpress” plugin to style select dropdown lists.
    I would like to include the following javascript to specify the options for how this plugin behaves:

    $('.chosen').chosen({
        search_contains: false,
        enable_split_word_search: false,
        placeholder_text_single: "Click to select from list",
        disable_search_threshold: 3,
        inherit_select_classes: true
      }); 

    How can I do this in GeneratePress Pro without changing functions.php.?
    Do I need to include any wrapper around the above code?
    I’ve tried using the “Insert Headers and Footers” plugin by WPBeginner without success – the options are not implemented.
    Thanks for any help
    David

    GP Premium 1.6.2
    #625415
    david

    Hi, I tried using GP Hooks and inserted the following into wp_footer – and ticked Execute PHP box

    <?php if ( is_page( 'page_id=68' ) ) : ?>
        <script>
            // Your script in here
    $('.chosen').chosen({
        search_contains: false,
        enable_split_word_search: false,
        placeholder_text_single: "Click to select from list",
        disable_search_threshold: 3,
        inherit_select_classes: true
      });
        </script>
    <?php endif; ?>

    Still no luck – javascript not applied to pagee

    #625501
    David
    Staff
    Customer Support

    Hi there, try this:

    <?php if ( is_page( '68' ) ) : ?>
    <script type=”text/javascript”>
        jQuery('.chosen').chosen({
            search_contains: false,
            enable_split_word_search: false,
            placeholder_text_single: "Click to select from list",
            disable_search_threshold: 3,
            inherit_select_classes: true
            });
            </script>
    <?php endif; ?>

    Note – unless using the Sticky Nav, GP doesn’t load jQuery, so if it doesn’t work try adding the enqueue script provided here:

    https://generatepress.com/forums/topic/making-page-header-move/#post-603443

    #625915
    david

    Hi David,
    Thanks for all your suggestions, which I’ve implemented including installing the snippets plugin and adding the enqueue script, but still no luck. This script worked when I used Toolset Views and added it to the “JS Editor” section, but I had other problems with Views so implemented what I wanted without it. Now the only part that’s not working is the javascript to apply the “Chosen for WordPress” options.
    I suspect the problem is a conflict somewhere else but don’t know how to check what or where. I’m using Elementor free to create the selecet dropdown with this HTML snippet:

    <div id="btncl-slct">
    <select class="chosen" style="font-size: 10pt; max-height: 25px; width: 23vw" size="3" onchange="window.location.href=this.value">
    [post_by_eng_name list_name="botanical-name"]
    </select></div>

    The “post_by_eng_name” shortcode is a plugin I wrote (actually copy/pasted from stackoverflow) to create the dropdown lists

    Thanks for your help
    David

    #626195
    Tom
    Lead Developer
    Lead Developer

    If you right click the page and click “Inspect”, are there any errors in the Console area?

    #626238
    david

    Hi Tom, Thanks for getting back to me.
    Console area:

    JQMIGRATE: Migrate is installed, version 1.4.1          jquery-migrate.min.js?ver=1.4.1:2
    
    x   Failed to load resource: the server responded with a status of 404 (Not Found)                
                                                                               chosen-sprite@2x.png:1 

    Thanks
    David

    #626308
    david

    Hi,
    I’ve uploaded the missing resource and now I see only

    JQMIGRATE: Migrate is installed, version 1.4.1

    but still the javascript is not applied!

    Tried moving the javascript from wp_footer to wp_header

    Still the javascript is not applied!

    Any ideas?
    Thanks
    David

    #626775
    Tom
    Lead Developer
    Lead Developer

    Hmm, so there’s no errors.

    Unfortunately I’m not familiar with Chosen, so I don’t know why it’s not working.

    Can you share the exact code you’re using once more, just so I can review it?

    #626788
    david

    Hi Tom,
    Could you just suggest a javascript test to check that it’s active – I tried alert(‘hello world’)
    and it didn’t appear. Don’t know if it matters, but this is not a child theme.

    Thanks
    David

    #627103
    Tom
    Lead Developer
    Lead Developer

    Child theme vs parent theme doesn’t matter.

    Can you share your exact code? I should be able to add an alert we can test with.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.