PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]

Support Forum

You need to log-in to create request (topic) to the support

Issue with Dynamic IDs Generated by HUSKY and Functional Date Picker Code

The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page please
If you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Alessandro(@alessandro-7)
8 Posts
Customers
November 1, 2023, 15:46

Hello,

I have noticed that the IDs of the filters generated by the HUSKY plugin are dynamic and change every time I refresh the page. For example:

html

<input type="search" id="woof_txt_search6542529638e99" ...

<input type="search" id="woof_txt_search6542529458e52" ...

However, I need to intercept these IDs to load a date picker through a custom function. Currently, this function cannot work due to the constant refresh of the IDs.

I already have a working code for the date picker that I would like to use, but I can't integrate it properly because of the dynamic IDs generated by HUSKY.

I was wondering if you could provide advice or suggest an approach to address this issue and make my date picker code work with dynamic IDs. Is there any other feature of the HUSKY plugin that can be used, or could you provide a method to obtain a stable reference to the filters?

I am attaching the code for the working date picker below:

$(document).ready(function() {
    const jQueryScript = document.createElement("script");
    jQueryScript.src = "https://code.jquery.com/jquery-3.6.0.min.js";
    document.head.appendChild(jQueryScript);
    jQueryScript.onload = function() {
        const jQueryUIScript = document.createElement("script");
        jQueryUIScript.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
        document.head.appendChild(jQueryUIScript);
        jQueryUIScript.onload = function() {
            // Una volta che le librerie sono caricate, puoi inizializzare il datepicker
            $(function() {
                // Trova l'elemento input con l'ID "woof_meta_filter_65424e838b7b0"
                var $input = $("#woof_meta_filter_65424e838b7b0");
                // Inizializza il datepicker sul campo di input con l'ID "woof_meta_filter_65424e838b7b0"
                $input.datepicker({
                    dateFormat: 'dd/mm/yy',
                    changeMonth: true,
                    changeYear: true,
                    monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
                    monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
                    dayNames: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
                    dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                    prevText: '<',
                    nextText: '>'
                });
            });
        };
    };
});

Thank you very much for your assistance.

Best regards,

Alessandro

#1
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
November 2, 2023, 12:13

Hello

You can get element  by class

JQuery(".woof_text_search_container .woof_husky_txt-input")

#2
Alessandro(@alessandro-7)
8 PostsTopic Author
Customers
November 2, 2023, 16:44

Thank you for your response,

I followed your instructions and tried to use the following jQuery selector:

```JQuery(".woof_text_search_container .woof_husky_txt-input")```

However, the date picker is displayed on the default"Search by text" field, but I would like to target a specific ACF field instead. I have added both a text field and a date field through ACF, and I want to apply the date picker to one of these fields.

Could you kindly instruct me on how to modify the jQuery selector to target the ACF field I have added? Once I have this information, I will decide on which field to apply the date picker.

To get a clear idea of what I am trying to achieve, I invite you to visit my website at the following address:

https://bresciaeventi.com/home-eventi

Thank you in advance for your assistance. I look forward to your response.

Best regards,

Alessandro

Last edited on November 2, 2023, 16:53 by Alessandro · #3
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
November 3, 2023, 11:50

Hello

Ok! Try  this

jQuery("input[name='textinput_data-testo-evento']")

#4
Alessandro(@alessandro-7)
8 PostsTopic Author
Customers
November 3, 2023, 12:29

Thank you,

With this solution, the date picker is visible.

I have noticed that when I enter a date, for example: 22/04/2024 (dd/mm/yyyy), the search form with the"input type="search"" attribute changes the value to"22042024."

I would like to remind you that both the ACF field and the text field are text fields. Therefore, my question is: does the"data-text-event" ACF text field I have entered in Haskey allow searching with text containing the"/" character?
https://bresciaeventi.com/home-eventi/

Last edited on November 3, 2023, 12:31 by Alessandro · #5
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
November 3, 2023, 14:27

Hello

No, because the field is being sanitized

#6